kd-aiot-frontend-aps/src/views/workOrder/components/details.vue

<template>
  <ele-modal
    :width="modelWidth"
    :visible.sync="detailsVisible"
    :close-on-click-modal="false"
    custom-class="ele-dialog-form"
    :maxable="true"
    :title="'详情'"
    append-to-body
    :before-close="cancelDetails"
  >
    <div class="form-wrapper">
      <el-form
        ref="form"
        :model="form"
        label-position="right"
        label-width="107px"
      >
        <el-row
          :gutter="10"
          class="basic"
          type="flex"
          style="flex-wrap: wrap"
          v-for="(el, index) in fieldList"
          :key="index"
        >
          <el-col
            :xs="6"
            :sm="6"
            :md="6"
            :lg="6"
            :xl="6"
            v-for="item in el"
            :key="item.prop"
          >
            <el-form-item :label="item.label">
              <!-- <div class="item_label">{{ current[item.prop] }}</div> -->
              <el-input :value="fieldValue(item.prop)" readonly />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
            <el-form-item label="所属工厂:">
              <el-input v-model="form.factoryName" :readonly="true"> </el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
            <el-form-item label="所属工作中心:">
              <el-select
                style="width: 100%"
                v-model="form.workCenterId"
                placeholder="请选择"
                @change="changeWork"
              >
                <el-option
                  v-for="item in workCenterList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
            <el-form-item label="所属班组:" required>
              <el-select
                style="width: 100%"
                v-model="form.teamId"
                placeholder="请选择"
                @change="changeGroups"
              >
                <el-option
                  v-for="item in teamList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-form-item label="报工类型:" required>
            <el-radio-group v-model="form.singleReport" disabled>
              <!-- v-if="clientEnvironmentId != 2" -->
              <el-radio :label="1">单件报工</el-radio>
              <el-radio :label="0">批量报工</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="派单方式:" prop="taskAss">
            <!-- @change="changeDispatch" -->
            <el-radio-group v-model="form.taskAss" disabled>
              <el-radio :label="1">生产订单派单</el-radio>
              <el-radio :label="0">工序任务派单</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-row>
        <el-row v-if="form.taskAss == 1">
          <el-col :span="24">
            <el-form-item label="指派:" prop="assignType">
              <el-radio-group
                v-model="form.assignType"
                size="mini"
                @change="assignRadio"
              >
                <el-radio-button :label="1">工位</el-radio-button>
                <el-radio-button :label="2">人员</el-radio-button>
                <el-radio-button :label="3">产线</el-radio-button>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-form-item required label="工位:" v-if="form.assignType == 1">
            <el-select
              class="ele-block"
              v-model="form.workstationIds"
              placeholder="请选择工位"
              size="mini"
              multiple
              disabled
              filterable
            >
              <el-option
                v-for="item in stationList"
                :key="item.id"
                :label="item.name + '（' + item.code + '）'"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="人员:" v-if="form.assignType == 2">
            <el-select
              class="ele-block"
              v-model="form.crewIds"
              placeholder="请选择人员"
              size="mini"
              filterable
              multiple
              disabled
            >
              <el-option
                v-for="item in crewList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="产线:" v-if="form.assignType == 3" required>
            <el-select
              class="ele-block"
              v-model="form.factoryLineIds"
              placeholder="请选择产线"
              size="mini"
              filterable
              multiple
              disabled
            >
              <el-option
                v-for="item in productionList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-row>

        <el-tabs
          class="process_list"
          v-model="processId"
          type="border-card"
          @tab-click="handleClick"
          v-show="form.taskAss == 0"
          v-loading="tabsLoading"
        >
          <el-tab-pane
            v-for="(item, index) in processList"
            :key="item.id"
            :label="item.name"
            :name="item.id"
          >
            <ele-pro-table
              class="table"
              :ref="`tableRef${index}`"
              :columns="columns"
              :datasource="item.list"
              cache-key="systemRoleTable"
              :pageSize="20"
              v-loading="tabLoading"
              :selection.sync="item.selection"
              row-key="id"
            >
              <template v-slot:toolbar>
                <!-- <el-button
                  type="primary"
                  @click="dispatch(item, 1)"
                  :loading="toolbarLoading"
                >
                  派单
                </el-button>
                <el-button
                  type="primary"
                  @click="dispatch(item, 2)"
                  :loading="toolbarLoading"
                >
                  撤回
                </el-button>
                <el-button
                  type="primary"
                  @click="dispatch(item, 3)"
                  :loading="toolbarLoading"
                >
                  保存
                </el-button> -->

                <div style="display: inline-block">
                  <span
                    class="text"
                    style="
                      font-weight: bold;
                      font-size: 14px;
                      margin-right: 8px;
                    "
                    >指派:</span
                  >
                  <el-radio-group
                    v-model="item.assignType"
                    size="mini"
                    @change="(e) => changeRadio(e, index)"
                  >
                    <el-radio-button
                      :label="1"
                      :disabled="radioBun(item, 'stationDis')"
                      >工位</el-radio-button
                    >
                    <el-radio-button
                      :label="2"
                      :disabled="radioBun(item, 'staffDis')"
                      >人员</el-radio-button
                    >
                    <el-radio-button
                      :label="3"
                      :disabled="radioBun(item, 'lineDis')"
                      >产线</el-radio-button
                    >
                  </el-radio-group>
                </div>

                <div
                  style="margin-left: 50px; display: inline-block"
                  v-if="timeSlot(item)"
                >
                  时间段: {{ item.startDate }} ----- {{ item.endDate }}
                </div>
              </template>
              <template v-slot:quantity="{ row }">
                <el-input
                  :readonly="permissions(row)"
                  type="number"
                  v-model="row.quantity"
                  placeholder="请输入数量"
                  @input="(e) => handleQuantityInput(e, row, item)"
                ></el-input>
              </template>
              <template v-slot:weight="{ row }">
                <el-input
                  :readonly="permissions(row)"
                  type="number"
                  v-model="row.weight"
                  placeholder="请输入重量"
                  @input="(e) => handleWeightInput(e, row, item)"
                ></el-input>
              </template>
              <template v-slot:teamTimeIds="{ row }">
                <el-select
                  :disabled="permissions(row)"
                  multiple
                  v-model="row.teamTimeIds"
                  placeholder="班次"
                  @change="(e) => shiftSelection(e, row, item)"
                >
                  <el-option
                    v-for="item in shiftList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </template>
              <template v-slot:startTime="{ row }">
                <el-date-picker
                  :readonly="permissions(row)"
                  class="w100"
                  v-model="row.startTime"
                  type="datetime"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  placeholder="开始时间"
                  @change="handleStartTimeChange(row, item)"
                ></el-date-picker>
              </template>
              <template v-slot:endTime="{ row }">
                <el-date-picker
                  :readonly="permissions(row)"
                  class="w100"
                  v-model="row.endTime"
                  type="datetime"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  @change="handleEndTimeChange(row, item)"
                  placeholder="完成时间"
                ></el-date-picker>
              </template>

              <template v-slot:action="{ row }">
                <!--  :readonly="resetBtnDis(row)" -->
                <el-popconfirm
                  title="确定要重置该条数据吗？"
                  @confirm="resetData(row, item)"
                  v-if="resetBtnDis(row)"
                >
                  <template v-slot:reference>
                    <el-link type="primary" :underline="false"> 重置 </el-link>
                  </template>
                </el-popconfirm>
              </template>
            </ele-pro-table>
          </el-tab-pane>
        </el-tabs>
      </el-form>
    </div>

    <div slot="footer">
      <el-button plain @click="cancelDetails">取消</el-button>
    </div>
  </ele-modal>
</template>

<script>
  import releaseMixin from '../mixins/release';
  import { parameterGetByCode } from '@/api/mainData/index';
  export default {
    components: {},
    props: {
      current: {
        type: Object,
        default: () => {}
      },
      detailsVisible: {
        type: Boolean,
        default: false
      }
    },
    mixins: [releaseMixin],
    data() {
      return {
        processId: '',
        tabLoading: false,
        dynamicName: '工位名称',
        form: {
          assignType: 1,
          crewIds: '',
          workstationIds: '',
          teamId: '',
          singleReport: '',
          workCenterId: '',
          taskAss: 1,
          factoryName: '',
          factoryLineIds: ''
        },
        toolbarLoading: false,
        processList: [],
        workCenterList: [],
        teamList: [],
        tabsLoading: false,
        stationList: [], // 工位的数据
        productionList: [], // 产线的数据
        crewList: [], // 人员的数据
        procTaskDis: false, // 工序任务派单选择
        firstTaskindex: '', // 首工序id 对应的工序列表数据下标
        fieldList: [
          [
            { label: '生产订单号:', prop: 'code' },
            { label: '计划编号:', prop: 'productionPlanCode' },
            { label: '工艺路线:', prop: 'produceRoutingName' },
            { label: '名称:', prop: 'productName' }
          ],
          [
            { label: '生产编号:', prop: 'productionCodes' },
            { label: '牌号:', prop: 'brandNo' },
            { label: '批次号:', prop: 'batchNo' },
            { label: '型号:', prop: 'model' }
          ],
          [
            { label: '要求生产数量:', prop: 'formingNum' },
            { label: '要求生产重量:', prop: 'initialWeight' },
            { label: '计划开始时间:', prop: 'planStartTime' },
            { label: '计划结束时间:', prop: 'planCompleteTime' }
          ],
          [
            { label: 'BOM版本:', prop: 'bomCategoryName' },
            { label: 'BOM类型:', prop: 'produceType' },
            { label: '首工序:', prop: 'firstTaskName' },
            { label: '创建时间:', prop: 'createTime' }
          ],
          [
            { label: '机型:', prop: 'modelKey' },
            { label: '颜色:', prop: 'colorKey' },
            { label: '派单人:', prop: 'dispatcher' },
            { label: '派单时间:', prop: 'dispatchTime' }
          ]
        ],
        shiftList: [],
        dateValue: '',
        orderDis: false, // 生产订单派单
        singleDis: false, // 单个报工
        batchDis: false, // 批量报工
        isDispatchRow: {}, // 查询是否派单数据
        time_calc_code: '0' // 是否进行时间赋值 0 否 1 是
      };
    },
    computed: {
      fieldValue() {
        return (field) => {
          let value = this.current[field];
          // if (field == 'modelKey' || field == 'colorKey') {
          //   return value;
          // }
          if (field == 'produceType') {
            if (value == 1) {
              return 'PBOM';
            }
            if (value == 2) {
              return 'MBOM';
            }
            if (value == 3) {
              return 'ABOM';
            }
          }
          return value || '';
        };
      },
      clientEnvironmentId() {
        return this.$store.state.user.info.clientEnvironmentId;
      },
      userInfo() {
        return this.$store.state.user.info;
      },
      modelWidth() {
        // if(this.form.taskAss == 1){
        //   return '1000px'
        // }
        return '85vw';
      },
      // 重置按钮 的置灰权限 没有进行操作跟派单的数据 置灰
      resetBtnDis() {
        return (row) => {
          if (!row.status) return false;
          let flag = row.status.code != 1;
          return flag;
        };
      },
      // 指派单选框操作 已派单的 其它两个按钮不能操作
      radioBun() {
        return (row, type) => {
          if (!row.radioBun) return false;
          let flag = row.radioBun[type];
          return flag;
        };
      },
      // 列表输入框操作 已派单的不能操作
      permissions() {
        return (row) => {
          // if (!row.status) return false;
          // if (row.status.code == 1) return true;
          return true;
        };
      },
      // 时间段显示
      timeSlot() {
        return (item) => {
          if (!item.startDate || !item.endDate) {
            return false;
          }
          return true;
        };
      },
      columns() {
        return [
          {
            columnKey: 'index',
            label: '序号',
            type: 'index',
            width: 55,
            align: 'center',
            fixed: 'left'
          },
          // {
          //   width: 45,
          //   type: 'selection',
          //   columnKey: 'selection',
          //   align: 'center',
          //   fixed: 'left',
          //   reserveSelection: true
          // },
          {
            prop: 'name',
            label: this.dynamicName,
            align: 'center',
            width: 200
          },
          {
            prop: 'code',
            label: '编码',
            align: 'center',
            width: 200
          },
          {
            prop: 'status',
            label: '状态',
            align: 'center',
            width: 150,
            formatter: (row) => {
              if (!row.status) return '';
              return row.status.desc || '';
            }
          },
          {
            slot: 'quantity',
            prop: 'quantity',
            label: '数量',
            align: 'center',
            width: 140
          },
          {
            slot: 'weight',
            prop: 'weight',
            label: `重量(${this.current.newWeightUnit})`,
            align: 'center',
            width: 140
          },
          {
            slot: 'teamTimeIds',
            prop: 'teamTimeIds',
            label: '班次',
            align: 'center',
            minWidth: 220
          },
          {
            slot: 'startTime',
            prop: 'startTime',
            label: '计划开始时间',
            align: 'center',
            minWidth: 240
          },
          {
            slot: 'endTime',
            prop: 'endTime',
            label: '计划完成时间',
            align: 'center',
            minWidth: 240
          },
          {
            columnKey: 'action',
            label: '操作',
            width: 120,
            align: 'center',
            resizable: false,
            fixed: 'right',
            slot: 'action'
          }
        ];
      }
    },
    watch: {},
    created() {
      // 时间计算规则code
      this.getCode();
      this.workCenterData(); // 查询工作中心
      this.getClassesData(); // 查询班次
      this.queryCheckExists(); // 查询是否派单
      this.form.singleReport = this.clientEnvironmentId == 2 ? 0 : '';
      this.dateValue = this.getFormattedDate();
    },
    methods: {
      getCode() {
        parameterGetByCode({
          code: 'time_calculation_rules'
        }).then((res) => {
          if (res) {
            this.time_calc_code = res.value || '0';
          }
        });
      },

      async getDispatchMethod(code) {
        await parameterGetByCode({ code }).then((res) => {
          if (res) {
            this.form.taskAss = res.value == '0' ? 0 : 1;
          }
        });
      },

      async getAssignmentMethod(code) {
        await parameterGetByCode({ code }).then((res) => {
          if (res) {
            this.form.assignType =
              res.value == '0' ? 0 : res.value == '1' ? 1 : 2;
          }
        });
      },

      cancelDetails() {
        this.$emit('update:detailsVisible', false);
      }
    }
  };
</script>

<style lang="scss" scoped>
  .top-box {
    display: flex;
    margin-bottom: 10px;
    .item-box {
      flex: 1;
    }
  }

  .radio-box {
    margin: 10px 0;
  }

  .table {
    margin-top: 20px;
  }

  ::v-deep .el-radio-button__orig-radio:checked + .el-radio-button__inner {
    box-shadow: none;
  }

  ::v-deep .el-input.is-disabled .el-input__inner {
    color: #ab7777;
  }
</style>