工时管理-样式优化

gaoluyang

2025-03-21 445007f79c0162c3cd88ace0d3608fd6dbf0c719

 src/views/performance/manHour/workTimeConfig.vue

@@ -1,171 +1,75 @@
<template>
  <div class="work-time-config">
  <div class="capacity-scope">
    <div class="search">
      <div class="search_thing">
        <div class="search_label">编号：</div>
        <div class="search_input">
          <el-input
            size="small"
            placeholder="请输入"
            clearable
            v-model="queryParams.number"
            @keyup.enter.native="refreshTable()"
          ></el-input>
        </div>
      <div>
        <el-form :model="queryParams" ref="queryParams" size="small" :inline="true">
          <el-form-item label="编号" prop="number">
            <el-input size="small" placeholder="请输入" clearable v-model="queryParams.number"
                      @keyup.enter.native="refreshTable()"></el-input>
          </el-form-item>
          <el-form-item label="实验室" prop="laboratory">
            <el-select v-model="queryParams.laboratory" placeholder="全部" size="small" @change="refreshTable()" clearable>
              <el-option v-for="item in laboratoryList" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="部门" prop="department">
            <el-input size="small" placeholder="请输入" clearable v-model="queryParams.department"
                      @keyup.enter.native="refreshTable()"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="mini" @click="refreshTable">查询</el-button>
            <el-button size="mini" @click="refresh">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="search_thing">
        <div class="search_label">实验室：</div>
        <el-select
          v-model="queryParams.laboratory"
          placeholder="全部"
          size="small"
          @change="refreshTable()"
          clearable
        >
          <el-option
            v-for="item in laboratoryList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      <div>
        <el-button size="small" type="primary" @click="openAdd('新增')"
                   v-if="checkPermi(['performance:manHour:workTimeConfig:add'])">新 增</el-button>
      </div>
      <div class="search_thing">
        <div class="search_label">部门：</div>
        <div class="search_input">
          <el-input
            size="small"
            placeholder="请输入"
            clearable
            v-model="queryParams.department"
            @keyup.enter.native="refreshTable()"
          ></el-input>
        </div>
      </div>
      <div class="search_thing" style="padding-left: 30px">
        <el-button size="small" @click="refresh()">重 置</el-button>
        <el-button size="small" type="primary" @click="refreshTable()"
          >查 询</el-button
        >
      </div>
      <el-button
        size="small"
        type="primary"
        style="position: absolute; right: 50px"
        @click="openAdd('新增')"
        v-if="checkPermi(['performance:manHour:workTimeConfig:add'])"
        >新 增</el-button
      >
    </div>
    <div class="table">
      <lims-table
        :tableData="tableData"
        :column="column"
        :page="page"
        :tableLoading="tableLoading"
        :height="'calc(100vh - 290px)'"
        @pagination="pagination"
      ></lims-table>
      <lims-table :tableData="tableData" :column="column" :tableLoading="tableLoading" :height="'calc(100vh - 290px)'"
        :page="page" @pagination="pagination"></lims-table>
    </div>
    <!-- 新增/编辑 -->
    <el-dialog :title="title" :visible.sync="timeDia" width="500px">
      <el-form
        :model="timeForm"
        ref="timeForm"
        :rules="timeRules"
        label-position="right"
        label-width="120px"
      >
      <el-form :model="timeForm" ref="timeForm" :rules="timeRules" label-position="right" label-width="120px">
        <el-form-item label="编号" prop="number">
          <el-input
            size="small"
            placeholder="请输入"
            clearable
            v-model="timeForm.number"
          ></el-input>
          <el-input size="small" placeholder="请输入" clearable v-model="timeForm.number"></el-input>
        </el-form-item>
        <el-form-item label="辅助项目名称" prop="auxiliaryProject">
          <el-input
            size="small"
            placeholder="请输入"
            clearable
            v-model="timeForm.auxiliaryProject"
          >
          <el-input size="small" placeholder="请输入" clearable v-model="timeForm.auxiliaryProject">
          </el-input>
        </el-form-item>
        <el-form-item label="部门" prop="department">
          <el-input
            size="small"
            placeholder="请输入"
            clearable
            v-model="timeForm.department"
          >
          <el-input size="small" placeholder="请输入" clearable v-model="timeForm.department">
          </el-input>
        </el-form-item>
        <el-form-item label="实验室" prop="laboratory">
          <el-select
            v-model="timeForm.laboratory"
            size="small"
            clearable
            placeholder="请选择"
            style="width: 100%"
          >
            <el-option
              v-for="item in laboratoryList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
          <el-select v-model="timeForm.laboratory" size="small" clearable placeholder="请选择" style="width: 100%">
            <el-option v-for="item in laboratoryList" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="单位" prop="unit">
          <el-select
            v-model="timeForm.unit"
            size="small"
            clearable
            placeholder="请选择"
            style="width: 100%"
          >
            <el-option
              v-for="item in unitList"
              :key="item.dictValue"
              :label="item.dictLabel"
              :value="item.dictValue"
            >
          <el-select v-model="timeForm.unit" size="small" clearable placeholder="请选择" style="width: 100%">
            <el-option v-for="item in unitList" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="核准工时" prop="approvedWorkingHour">
          <el-input
            size="small"
            placeholder="请输入"
            clearable
            v-model="timeForm.approvedWorkingHour"
          >
          <el-input size="small" placeholder="请输入" clearable v-model="timeForm.approvedWorkingHour">
          </el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remarks">
          <el-input
            size="small"
            placeholder="请输入"
            type="textarea"
            :rows="2"
            clearable
            v-model="timeForm.remarks"
          >
          <el-input size="small" placeholder="请输入" type="textarea" :rows="2" clearable v-model="timeForm.remarks">
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="timeDia = false">取 消</el-button>
        <el-button
          :loading="uploading"
          type="primary"
          @click="submitProduct('timeForm')"
          >确 认</el-button
        >
        <el-button :loading="uploading" type="primary" @click="submitProduct('timeForm')">确 认</el-button>
      </span>
    </el-dialog>
  </div>
@@ -207,9 +111,7 @@
        { label: "备注", prop: "remarks" },
        {
          dataType: "action",
          fixed: "right",
          label: "操作",
          width: "160px",
          operation: [
            {
              name: "编辑",
@@ -240,7 +142,7 @@
      ],
      page: {
        total: 0,
        size: 10,
        size: 20,
        current: 0,
      },
      tableLoading: false,
@@ -373,45 +275,22 @@
      })
        .then(() => {
          deleteAuxiliaryWorkingHours({ id: row.id }).then((res) => {
            if (res.code == 201) return;
            this.$message.success("删除成功");
            this.refresh();
            if (res.code == 200){
              this.$message.success("删除成功");
              this.refresh();
            }
          });
        })
        .catch(() => {});
        .catch(() => { });
    },
  },
};
</script>

<style scoped>
.work-time-config {
  height: 100%;
}
.search {
  background-color: #fff;
  height: 80px;
  height: 46px;
  display: flex;
  align-items: center;
}

.search_thing {
  width: 250px;
  display: flex;
  align-items: center;
}

.search_label {
  width: 70px;
  font-size: 14px;
  text-align: right;
}

.search_input {
  width: calc(100% - 70px);
}
.table {
  padding: 10px;
  padding-top: 0;
  justify-content: space-between;
}
</style>