kd-aiot-frontend/src/views/productionScheduling/workCalendar/index.vue

<template>
  <div class="ele-body">
    <el-card shadow="never" v-loading="loading">
      <el-form
        ref="form"
        :model="form"
        :rules="{}"
        label-width="120px"
        class="el-form-box"
      >
        <div style="display: flex">
          <el-form-item label="工厂名称：" prop="factoriesId">
            <el-select
              v-model="form.factoriesId"
              placeholder="请选择"
              @change="change_factoryId"
            >
              <el-option
                v-for="item in factoriesList"
                :label="item.factoryName"
                :value="item.factoryId"
                :key="item.factoryId"
                @click.native="form.factoriesName = item.factoryName"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="产线名称：" prop="productionLineId">
            <el-select v-model="form.productionLineId" placeholder="请选择">
              <el-option
                v-for="item in productionLineList"
                :label="item.name"
                :value="item.id"
                @click.native="change_productionLine(item)"
                :key="item.id"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="工位名称：" prop="workStationId">
            <el-select v-model="form.workStationId" placeholder="请选择">
              <el-option
                v-for="item in workStationList"
                :label="item.name"
                :value="item.id"
                @click.native="form.workStationName = item.name"
                :key="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <!-- <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              class="ele-btn-icon"
              @click="search"
            >
              查询
            </el-button>
            <el-button @click="reset" icon="el-icon-refresh-left"
              >重置</el-button
            >
          </el-form-item> -->
        </div>
      </el-form>
      <div style="display: flex">
        <div class="calendar-container">
          <el-calendar v-model="timeValue">
            <template #dateCell="{ date, data }">
              <div
                class="calendar-day"
                @click="handleDateClick(date)"
                :class="{ 'selected-date': isSelected(date) }"
              >
                <div class="datetext">{{
                  data.day.split('-').slice(2).join('-')
                }}</div>
                <div class="lunar-date">{{ lunarDate(date) }}</div>
              </div>
            </template>
          </el-calendar>
        </div>
        <el-form ref="form" :rules="{}" label-width="300px" class="el-form-box">
          <el-form-item label="生产班次" prop="code">
            <el-select
              v-model="productionShift"
              multiple
              placeholder="请选择"
              style="width: calc(100% - 75px)"
            >
              <el-option
                v-for="item in productionShiftList"
                :key="item.code"
                :label="item.shiftName"
                :value="item.code"
              >
              </el-option>
            </el-select>
            <el-button
              size="small"
              type="primary"
              icon="el-icon-plus"
              class="ele-btn-icon"
              @click="selectProductionShiftList"
              style="margin-left: 5px"
            >
              适用
            </el-button>
          </el-form-item>
        </el-form>
      </div>
      <div>
        <!-- <el-button
          size="small"
          type="primary"
          icon="el-icon-plus"
          class="ele-btn-icon"
          @click="handleAddOrEdit()"
        >
          新增行
        </el-button> -->
        <el-button
          size="small"
          type="primary"
          class="ele-btn-icon"
          @click="edit()"
        >
          编辑
        </el-button>
      </div>
      <searchTable
        :productionLineList="productionLineList"
        :productionShiftList="productionShiftList"
        @search="search"
      ></searchTable>

      <!-- 数据表格 -->
      <ele-pro-table
        :ref="'table'"
        :columns="columns"
        :datasource="datasource"
        height="600px"
        full-height="calc(100vh - 116px)"
        tool-class="ele-toolbar-form"
        :selection.sync="selection"
        @columns-change="handleColumnChange"
        :cache-key="cacheKeyUrl"
        style="margin-top: 10px"
        row-key="id"
      >
        <template v-slot:action="{ row }">
          <el-link
            type="primary"
            :underline="false"
            icon="el-icon-edit"
            @click="edit(row)"
          >
            修改
          </el-link></template
        >
      </ele-pro-table>
    </el-card>

    <!-- <add-or-edit-dialog
      ref="addOrEditDialogRef"
      @done="reload"
    ></add-or-edit-dialog> -->

    <!-- <process-submit-dialog
      :processSubmitDialogFlag.sync="processSubmitDialogFlag"
      v-if="processSubmitDialogFlag"
      ref="processSubmitDialogRef"
      @reload="reload"
      :isNotNeedProcess="false"
    ></process-submit-dialog> -->
    <timeTable ref="timeTableRef" @reload="reload"></timeTable>
  </div>
</template>

<script>
  import tabMixins from '@/mixins/tableColumnsMixin';
  // import addOrEditDialog from './components/addOrEditDialog.vue';
  import {
    getTableList,
    saveOrUpdate
  } from '@/api/productionScheduling/workCalendar';
  import {
    getTableList as getProductionShift,
    selectProductionShiftList
  } from '@/api/productionScheduling/productionShift';
  // import processSubmitDialog from '@/components/processSubmitDialog/processSubmitDialog.vue';
  import timeTable from './components/timeTable.vue';
  import { solarToLunar } from 'lunar-calendar';
  import {
    getFactoryarea,
    getFactoryworkstation,
    listFactoryLineByFactoryId,
    listByProductionLineId
  } from '@/api/factoryModel';
  import searchTable from './components/searchTable.vue';
  // import { getteampage } from '@/api/workforceManagement/team.js';
  import dayjs from 'dayjs';

  export default {
    mixins: [tabMixins],
    components: {
      timeTable,
      searchTable
      // addOrEditDialog
    },
    data() {
      return {
        // 加载状态
        loading: false,
        delVisible: false,

        timeValue: new Date(),
        selectedDates: [new Date()],
        factoriesList: [],
        productionShiftList: [],
        productionShift: [],
        productionLineList: [],
        workStationList: [],
        selection: [],
        defTime: {
          step: '00:01',
          start: '00:00',
          end: '23:59'
        },
        form: {
          factoriesId: '',
          factoriesName: '',
          productionLineId: '',
          productionLineName: '',
          workStationId: '',
          workStationName: ''
        },
        params: {
          workStationId: '',
          productionLineId: '',
          productionShift: ''
        },
        list: [],
        processSubmitDialogFlag: false,
        cacheKeyUrl: 'main-productionScheduling-workCalendar-index',
        columns: [
          {
            label: '选择',
            width: 45,
            type: 'selection',
            columnKey: 'selection',
            align: 'center',
            reserveSelection: true
          },
          {
            minWidth: 150,
            prop: 'dayDate',
            label: '日期',
            align: 'center',
            slot: 'code',
            showOverflowTooltip: true
          },

          {
            minWidth: 180,
            prop: 'productionLineName',
            label: '产线名称',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            minWidth: 180,
            prop: 'workCenterName',
            label: '工作中心',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            minWidth: 130,
            prop: 'workStationName',
            label: '工位名称',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            minWidth: 180,
            prop: 'productionShift',
            label: '生产班次',
            align: 'center',
            showOverflowTooltip: true
          },
          // {
          //   width: 60,
          //   label: '序号',
          //   type: 'index',
          //   columnKey: 'index',
          //   align: 'center'
          // },
          // {
          //   minWidth: 150,
          //   prop: 'dutyName',
          //   slot: 'dutyName',
          //   label: '出勤名称',
          //   align: 'center',
          //   showOverflowTooltip: true
          // },

          // {
          //   minWidth: 120,
          //   prop: 'timeType',
          //   slot: 'timeType',
          //   label: '类型',
          //   align: 'center',
          //   showOverflowTooltip: true
          // },
          // {
          //   minWidth: 150,
          //   prop: 'startTime',
          //   slot: 'startTime',
          //   label: '开始时间',
          //   align: 'center',
          //   showOverflowTooltip: true
          // },
          // {
          //   minWidth: 150,
          //   slot: 'endTime',
          //   prop: 'endTime',
          //   label: '结束时间',
          //   align: 'center',
          //   showOverflowTooltip: true
          // },
          {
            minWidth: 150,
            prop: 'workingHours',
            label: '工作总时长(分钟)',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            minWidth: 150,
            prop: 'restTime',
            label: '休息时间',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            columnKey: 'action',
            label: '操作',
            width: 100,
            align: 'center',
            resizable: false,
            slot: 'action',
            showOverflowTooltip: true,
            fixed: 'right'
          }
          // {
          //   minWidth: 100,
          //   prop: 'updateUserName',
          //   label: '设置人',
          //   align: 'center',
          //   showOverflowTooltip: true
          // },
          // {
          //   minWidth: 100,
          //   prop: 'updateTime',
          //   label: '设置时间',
          //   align: 'center',
          //   showOverflowTooltip: true
          // },
          // {
          //   minWidth: 180,
          //   prop: 'note',
          //   slot: 'note',
          //   label: '备注',
          //   align: 'center',
          //   showOverflowTooltip: true
          // }
        ]
      };
    },

    created() {
      this.getFactory();
      this.getProductionShift();
      this.form.factoriesId = this.$store.state.user.info.factoryId;
      if (this.form.factoriesId) {
        this.getProductionLine();
      }
    },
    methods: {
      edit(row) {
        if (row?.id) {
          this.$refs.timeTableRef.init([row?.id], 'edit');
        } else {
          this.$refs.timeTableRef.init(
            this.selection.map((item) => item.id),
            'edit'
          );
        }
      },
      /* 表格数据源 */
      datasource({ page, limit, where, order }) {
        if (this.selectedDates.length) {
          where.dayDate = this.selectedDates.map(
            (item) => item.toISOString().split('T')[0]
          );
        }
        return getTableList({
          pageNum: page,
          size: limit,
          ...where
        });
      },
      async search(where) {
        this.$refs.table.reload({ page: 1, where });
      },

      reset() {
        this.form = {
          factoriesId: '',
          factoriesName: '',
          productionLineId: '',
          productionLineName: ''
        };
      },
      //获取班次
      getProductionShift() {
        getProductionShift({
          pageNum: 1,
          size: 999
        }).then((res) => {
          this.productionShiftList = res.records;
        });
      },
      handleDateClick(date) {
        const dateStr = date.toISOString().split('T')[0];
        const index = this.selectedDates.findIndex(
          (d) => d.toISOString().split('T')[0] === dateStr
        );
        if (index === -1) {
          this.selectedDates.push(date);
        } else {
          this.selectedDates.splice(index, 1);
        }
      },
      isSelected(date) {
        const dateStr = date.toISOString().split('T')[0];
        return this.selectedDates.some(
          (d) => d.toISOString().split('T')[0] === dateStr
        );
      },
      formatDate(date) {
        return date.toISOString().split('T')[0];
      },
      removeDate(index) {
        this.selectedDates.splice(index, 1);
      },
      lunarDate(date) {
        const lunar = solarToLunar(
          date.getFullYear(),
          date.getMonth() + 1,
          date.getDate()
        );
        return lunar.lunarDay === 1
          ? lunar.lunarMonthName + '月'
          : lunar.lunarDayName; // 显示农历（初一显示月份）
      },

      /* 刷新表格 */
      reload(where = {}) {
        this.$refs.table.reload({ page: 1, where });
      },

      /* 获取工厂 */
      async getFactory() {
        const { list } = await getFactoryarea({
          pageNum: 1,
          size: 999,
          type: 1,
          enable: 1
        });
        this.factoriesList = list || [];
      },

      /* 获取产线 */
      async getProductionLine() {
        this.productionLineList = await listFactoryLineByFactoryId([
          this.form.factoriesId
        ]);
      },
      /* 获取工位 */
      async getFactoryworkstation() {
        this.workStationList = await listByProductionLineId(
          this.form.productionLineId
        );
      },

      change_factoryId() {
        this.form.productionLineId = '';
        this.form.productionLineName = '';
        this.getProductionLine();
      },
      change_productionLine(item) {
        this.form.workStationId = '';
        this.form.workStationName = '';
        this.form.productionLineName = item.name;
        if (item.productionSchedulingDimension) {
          this.getFactoryworkstation();
        }
      },
      //根据排程维度获取初始化列表
      async getInitList() {
        // productionSchedulingDimension
        let productionLineList = this.form.productionLineId
          ? this.productionLineList.filter(
              (item) => item.id == this.form.productionLineId
            )
          : this.productionLineList;
        let promiseAll = [];

        //获取工位
        productionLineList
          .filter((item) => item.productionSchedulingDimension == 1)
          .forEach((item) => {
            promiseAll.push(listByProductionLineId(item.id));
          });
        let workStationList = await Promise.all(promiseAll);
        workStationList = workStationList.flat();

        if (this.form.workStationId) {
          workStationList = workStationList.filter(
            (item) => item.id == this.form.workStationId
          );
        }

        return [
          ...workStationList.map((item) => {
            item.productionLineName = productionLineList.find(
              (item2) => item2.id == item.productionLineId
            )?.name;
            item.workStationName = item.name;
            item.workStationId = item.id;
            return item;
          }),
          ...productionLineList
            .filter((item) => !item.productionSchedulingDimension)
            .map((item) => {
              item.productionLineName = item.name;
              item.productionLineId = item.id;
              return item;
            })
        ];
      },
      async selectProductionShiftList() {
        if (!this.form.factoriesId) {
          return this.$message.error('请选择工厂');
        }
        if (!this.productionLineList.length) {
          return this.$message.error('产线不能为空');
        }
        if (!this.productionShift.length) {
          return this.$message.error('请选择班次');
        }
        let data = await selectProductionShiftList(this.productionShift);
        let list = [];
        let initList = await this.getInitList();
        initList.forEach((Lineitem) => {
          data.forEach((dataItem) => {
            list.push({
              productionLineName: Lineitem.productionLineName,
              productionLineId: Lineitem.productionLineId,
              workStationName: Lineitem.workStationName,
              workStationId: Lineitem.workStationId,
              workCenterName: this.form.workCenterName,
              workCenterId: this.form.workCenterId,
              factoriesName: this.form.factoriesName,
              factoriesId: this.form.factoriesId,
              productionShift: dataItem.shiftName,
              workingHours: dataItem.totalWorkingMinutes,
              restTime: dataItem.restDurationMinutes,
              list: dataItem.list.map((item) => {
                item.id = '';
                return item;
              }),
              dayDate: ''
            });
          });
        });
        this.list = this.selectedDates
          .map((date) => {
            list.forEach((listItem) => {
              listItem.dayDate = dayjs(date).format('YYYY-MM-DD');
              listItem.list.forEach((item1) => {
                item1.dayDate = listItem.dayDate;
                item1.productionLineId = listItem.productionLineId;
                item1.productionLineName = listItem.productionLineName;
                item1.productionShift = listItem.productionShift;
                item1.workCenterId = listItem.workCenterId;
                item1.workCenterName = listItem.workCenterName;
                item1.workStationId = listItem.workStationId;
                item1.workStationName = listItem.workStationName;
                item1.factoriesName = this.form.factoriesName;
                item1.factoriesId = this.form.factoriesId;
              });
            });
            return JSON.parse(JSON.stringify(list));
          })
          .flat();
        saveOrUpdate(this.list).then((res) => {
          this.search({
            productionLineId: this.form.productionLineId,
            workStationId: this.form.workStationId
          });
        });
      },

      save() {}
    }
  };
</script>

<style lang="scss" scoped>
  :deep(.el-link--inner) {
    margin-left: 0px !important;
  }

  .sys-organization-list {
    height: calc(100vh - 264px);
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    overflow: auto;
  }

  .sys-organization-list :deep(.el-tree-node__content) {
    height: 40px;

    & > .el-tree-node__expand-icon {
      margin-left: 10px;
    }
  }
  :deep(.el-calendar__body) {
    padding: 0;
  }
  .calendar-day {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  .selected-date {
    background: rgba($color: #409eff, $alpha: 0.2);
  }
  .selected-dates {
    margin-top: 20px;
  }
  .calendar-container {
    width: 480px;
    height: 350px;
  }
  :deep(.el-calendar-day) {
    padding: 0;
    height: 40px;
  }
  :deep(.el-calendar-table)th:nth-last-child(-n + 2) {
    color: #f56c6c; /* 深色文字 */
  }
  :deep(.el-calendar-table)td:nth-last-child(-n + 2) {
    .datetext {
      color: #f56c6c; /* 深色文字 */
    }
  }
  :deep(.el-calendar-table)td.is-today {
    color: #409eff !important; /* 深色文字 */
  }
  .lunar-date {
    font-size: 10px;
  }
</style>