工时管理-样式优化

gaoluyang

2025-03-21 445007f79c0162c3cd88ace0d3608fd6dbf0c719

工时管理-样式优化

 src/views/performance/manHour/workTimeConfig.vue

@@ -1,33 +1,32 @@
<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="mini" type="primary" @click="refreshTable()">查询</el-button>
        <el-button size="mini" @click="refresh()">重置</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" :tableLoading="tableLoading" :height="'calc(100vh - 290px)'"
@@ -112,7 +111,6 @@
        { label: "备注", prop: "remarks" },
        {
          dataType: "action",
          fixed: "right",
          label: "操作",
          operation: [
            {
@@ -144,7 +142,7 @@
      ],
      page: {
        total: 0,
        size: 10,
        size: 20,
        current: 0,
      },
      tableLoading: false,
@@ -290,35 +288,9 @@
</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>

 src/views/performance/manHour/workTimeManagement.vue

@@ -1,69 +1,47 @@
<template>
  <!--日工时管理-->
  <div class="work-time-management">
    <div class="search">
      <div class="search_thing" style="width: 200px">
        <div class="search_label">星期：</div>
        <el-select v-model="entity.weekDay" clearable placeholder="全部" size="small" @change="refreshTable()">
          <el-option v-for="item in weekList" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div class="search_thing" style="width: 390px">
        <div class="search_label" style="width: 90px">时间范围：</div>
        <div class="search_input">
  <div class="capacity-scope">
    <div>
      <el-form :model="entity" ref="entity" size="small" :inline="true">
        <el-form-item label="星期" prop="weekDay" class="form-item">
          <el-select v-model="entity.weekDay" clearable placeholder="全部" size="small" @change="refreshTable()">
            <el-option v-for="item in weekList" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="时间范围" prop="dateTime" class="dateTime">
          <el-date-picker v-model="entity.dateTime" clearable end-placeholder="结束日期" format="yyyy-MM-dd"
            range-separator="至" size="small" start-placeholder="开始日期" style="width: 100%" type="daterange"
            value-format="yyyy-MM-dd" @change="refreshTable()">
                          range-separator="至" size="small" start-placeholder="开始日期" type="daterange"
                          style="width: 100%"
                          value-format="yyyy-MM-dd" @change="refreshTable()">
          </el-date-picker>
        </div>
      </div>
      <!-- 以下这两个为组长角色特有的 -->
      <div class="search_thing" style="width: 200px">
        <div class="search_label">名字：</div>
        <el-input v-model="entity.name" clearable placeholder="请输入" size="small"
          @keyup.enter.native="refreshTable()"></el-input>
      </div>
      <div v-if="currentTable == 'ValueTable1'" class="search_thing" style="width: 250px">
        <div class="search_label" style="width: 120px">样品编号：</div>
        <el-input v-model="entity.sample" clearable placeholder="请输入" size="small"
          @keyup.enter.native="refreshTable()"></el-input>
      </div>
      <div v-if="currentTable == 'ValueTable0'" class="search_thing" style="width: 200px">
        <div class="search_label">状态：</div>
        <el-select v-model="entity.state" placeholder="全部" size="small" @change="refreshTable()" clearable>
          <el-option v-for="item in stateList" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div class="search_thing" style="padding-left: 30px; width: 100px">
        <el-button size="mini" type="primary" @click="refreshTable()">查询</el-button>
        <el-button size="mini" @click="refresh()">重置</el-button>
      </div>
        </el-form-item>
        <el-form-item label="名字" prop="name">
          <el-input v-model="entity.name" clearable placeholder="请输入" size="small"
                    @keyup.enter.native="refreshTable()"></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="state" v-if="currentTable == 'ValueTable0'">
          <el-select v-model="entity.state" placeholder="全部" size="small" @change="refreshTable()" clearable>
            <el-option v-for="item in stateList" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="样品编号" prop="sample" v-if="currentTable == 'ValueTable1'">
          <el-input v-model="entity.sample" clearable placeholder="请输入" size="small"
                    @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 style="display: flex; align-items: center; justify-content: space-between">
    <div style="display: flex; align-items: center; justify-content: space-between;margin-bottom: 10px">
      <el-radio-group :key="'111'" v-model="currentTable" size="small" @change="searchList">
        <el-radio-button label="ValueTable0"> 辅助工时 </el-radio-button>
        <el-radio-button label="ValueTable1"> 产量工时 </el-radio-button>
      </el-radio-group>
      <div style="display: flex; align-items: center">
<!--        <p style="font-size: 14px; margin-right: 30px">-->
<!--          总工时汇总：<span v-if="totalInfo" style="font-size: 16px; color: #3a7bfa">{{-->
<!--            totalInfo["产量工时汇总"] + totalInfo["辅助工时汇总"]-->
<!--              ? Number(-->
<!--                totalInfo["产量工时汇总"] + totalInfo["辅助工时汇总"]-->
<!--              ).tofixed(4)-->
<!--              : 0-->
<!--          }}</span>&nbsp;&nbsp;&nbsp;&nbsp;产量工时汇总：<span v-if="totalInfo" style="font-size: 16px; color: #3a7bfa">{{-->
<!--              totalInfo["产量工时汇总"]-->
<!--                ? Number(totalInfo["产量工时汇总"]).tofixed(4)-->
<!--                : 0-->
<!--            }}</span>&nbsp;&nbsp;&nbsp;&nbsp;辅助工时汇总：<span v-if="totalInfo" style="font-size: 16px; color: #3a7bfa">{{-->
<!--              totalInfo["辅助工时汇总"]-->
<!--                ? Number(totalInfo["辅助工时汇总"]).tofixed(4)-->
<!--                : 0-->
<!--            }}</span>-->
<!--        </p>-->
        <el-button v-show="currentTable == 'ValueTable0' &&
          checkPermi(['performance:manHour:workTimeManagement:add'])
          " size="small" type="primary" @click="openAdd">录入数据</el-button>
@@ -78,12 +56,12 @@
    </div>
    <div class="table">
      <lims-table :tableData="tableData" :column="column" :page="page" :tableLoading="tableLoading"
                  key="tableData"
        :height="'calc(100vh - 350px)'" :isSelection="true" v-if="currentTable == 'ValueTable0'"
        @pagination="pagination" :handleSelectionChange="handleSelectionChange"></lims-table>
                  key="tableData" :height="'calc(100vh - 330px)'"
                  :isSelection="true" v-if="currentTable == 'ValueTable0'"
                  @pagination="pagination" :handleSelectionChange="handleSelectionChange"></lims-table>
      <lims-table :tableData="tableData0" :column="column0" :page="page0" :tableLoading="tableLoading"
                  key="tableData0"
        :height="'calc(100vh - 350px)'" v-if="currentTable == 'ValueTable1'" @pagination="pagination0"></lims-table>
                  key="tableData0" :height="'calc(100vh - 330px)'"
                  v-if="currentTable == 'ValueTable1'" @pagination="pagination0"></lims-table>
    </div>
    <el-dialog :before-close="handleClose" :title="formData.id ? '编辑' : '录入数据'" :visible.sync="addVisible"
      width="600px">
@@ -106,7 +84,6 @@
              <el-input v-model="formData.week" disabled size="small"></el-input>
            </el-form-item>
            <el-form-item label="星期:">
              <!-- <el-input v-model="formData.weekDay" size="small" disabled></el-input> -->
              <el-select v-model="formData.weekDay" disabled placeholder="请选择" size="small">
                <el-option v-for="item in weekList" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
@@ -428,7 +405,7 @@
      ],
      page: {
        total: 0,
        size: 10,
        size: 20,
        current: 1,
      },
      tableLoading: false,
@@ -450,7 +427,7 @@
      ],
      page0: {
        total: 0,
        size: 10,
        size: 20,
        current: 1,
      },
      shifList: [],
@@ -915,37 +892,10 @@
</script>

<style scoped>
.work-time-management {
  height: 100%;
  overflow-y: scroll;
  padding: 20px;
  padding-top: 0;
  /* scrollbar-width: none;  */
.form-item >>>.el-form-item__content {
  width: 120px;
}

/* .work-time-management::-webkit-scrollbar {
  display: none;
} */
.search {
  background-color: #fff;
  height: 80px;
  display: flex;
  align-items: center;
}

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

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

.search_input {
  width: calc(100% - 70px);
.dateTime >>>.el-form-item__content {
  width: 260px;
}
</style>

 src/views/performance/manHour/workTimeStatistics.vue

@@ -1,51 +1,48 @@
<template>
  <div>
  <div class="capacity-scope">
    <div>
      <div class="search">
        <div class="search_thing">
          <div class="search_label">日期：</div>
          <div class="search_input" style="display: flex; align-items: center">
            <el-date-picker
              v-model="queryParams.month"
              :clearable="false"
              format="yyyy-MM"
              placeholder="选择月"
              size="small"
              style="width: 100%"
              type="month"
              value-format="yyyy-MM"
              @change="refreshTable()"
            >
            </el-date-picker>
          </div>
        </div>
        <div class="search_thing">
          <div class="search_label">员工：</div>
          <el-input
            v-model="queryParams.name"
            clearable
            placeholder="请输入"
            size="small"
            @keyup.enter.native="refreshTable()"
          ></el-input>
        </div>
        <div class="search_thing" style="padding-left: 30px">
          <el-button size="mini" type="primary" @click="refreshTable()">查询</el-button>
          <el-button size="mini" @click="refresh()">重置</el-button>
        <div>
          <el-form :model="queryParams" ref="queryParams" size="small" :inline="true">
            <el-form-item label="日期" prop="month">
              <el-date-picker
                v-model="queryParams.month"
                :clearable="false"
                format="yyyy-MM"
                placeholder="选择月"
                size="small"
                style="width: 100%"
                type="month"
                value-format="yyyy-MM"
                @change="refreshTable()"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="员工" prop="name">
              <el-input
                v-model="queryParams.name"
                clearable
                placeholder="请输入"
                size="small"
                @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>
      <div class="table">
        <limsTable
          :column="tableColumn"
          :table-data="tableData"
          :table-loading="tableLoading"
          :page="page"
          style="padding: 0 15px"
          :height="'calc(100vh - 290px)'"
          @pagination="pagination"
        >
        </limsTable>
      </div>
      <limsTable
        :column="tableColumn"
        :table-data="tableData"
        :table-loading="tableLoading"
        :page="page"
        :height="'calc(100vh - 290px)'"
        @pagination="pagination"
      >
      </limsTable>
    </div>
  </div>
</template>
@@ -96,7 +93,7 @@
      tableLoading: false,
      page: {
        total: 0,
        size: 10,
        size: 20,
        current: 0,
      },
    };
@@ -135,32 +132,5 @@
</script>

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

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

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

.search_input {
  width: calc(100% - 60px);
}
.table {
  height: calc(100% - 60px - 80px - 10px - 40px - 25px);
}
</style>

 src/views/standard/model/index.vue

@@ -2,7 +2,7 @@
  <div class="capacity-scope">
    <div class="search">
      <div>
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
        <el-form :model="queryParams" ref="queryParams" size="small" :inline="true">
          <el-form-item label="模板名称" prop="name">
            <el-input v-model="queryParams.name" clearable placeholder="请输入" size="small"
                      @keyup.enter.native="refreshTable()"></el-input>