kd-aiot-frontend-eom/src/views/saleManage/saleOrder/components/bomDialog.vue

<template>
  <ele-modal
    custom-class="ele-dialog-form long-dialog-form"
    :centered="true"
    v-if="visible"
    :visible.sync="visible"
    :close-on-click-modal="false"
    :append-to-body="true"
    width="70%"
    @close="cancel"
    :maxable="true"
    :resizable="true"
    title="确认属性类型"
  >
    <ele-pro-table
      ref="table"
      :columns="columns"
      :datasource="tableList"
      class="dict-table"
      tool-class="ele-toolbar-actions"
      :needPage="false"
    >
      <template v-slot:componentAttribute="{ row }">
        <div>
          <el-select
            v-model="row.componentAttribute"
            filterable
            :multiple="true"
            :multiple-limit="1"
            class="ele-block"
            size="mini"
          >
            <el-option
              v-for="item in sxtList"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            ></el-option>
          </el-select>
        </div>
      </template>

      <template v-slot:demandQuantity="{ row }">
        <el-input
          v-model="row.demandQuantity"
          placeholder="请输入"
          :readonly="type == 'detail'"
          @input="
            (value) =>
              (row.demandQuantity = value.replace(
                /^(-)*(\d+)\.(\d\d\d\d\d\d).*$/,
                '$1$2.$3'
              ))
          "
        ></el-input>
      </template>
      <template v-slot:purchasingCycle="{ row }">
        {{ row.purchasingCycle }}{{ row.purchasingCycleUnit }}
      </template>

      <template v-slot:purchaseQuantity="{ row }">
        <el-input
          v-model="row.purchaseQuantity"
          placeholder="请输入"
          :readonly="type == 'detail'"
          @input="
            (value) =>
              (row.purchaseQuantity = value.replace(
                /^(-)*(\d+)\.(\d\d\d\d\d\d).*$/,
                '$1$2.$3'
              ))
          "
        ></el-input>
      </template>

      <template v-slot:deliveryMethod="{ row, $index }">
        <el-select
          clearable
          class="ele-block"
          v-model="row.deliveryMethod"
          placeholder="请选择"
          :disabled="type == 'detail'"
        >
          <el-option
            label="一次性到货"
            :value="1"
            @click.native="row.timeList = null"
          />
          <el-option
            label="分批到货"
            :value="2"
            @click.native="
              handleMethod(row, $index);
              row.requireDeliveryTime = null;
            "
          />
        </el-select>
      </template>
      <template v-slot:dosage="{ row, $index }">
        <el-input
          v-model="row.dosage"
          placeholder="请输入"
          :readonly="type == 'detail'"
          type="number"
        ></el-input>
      </template>

      <template v-slot:requireDeliveryTime="{ row, $index }">
        <el-date-picker
          style="width: 100%"
          clearable
          v-model="row.requireDeliveryTime"
          type="date"
          v-show="row.deliveryMethod == 1"
          value-format="yyyy-MM-dd"
          placeholder="请选择日期"
          :pickerOptions="{
            disabledDate: (time) =>
              time.getTime() <
              new Date(new Date().setHours(0, 0, 0, 0)).getTime()
          }"
          :readonly="type == 'detail'"
        >
        </el-date-picker>

        <el-link
          type="primary"
          :underline="false"
          v-show="row.deliveryMethod == 2"
          @click.native="handleMethod(row, $index)"
        >
          设置分批时间
        </el-link>
      </template>

      <template v-slot:imgUrl="{ row }">
        <fileMain
          v-model="row.imgUrl"
          module="main"
          :showLib="false"
          :limit="1"
          :disabled="type == 'detail'"
        />
      </template>

      <template v-slot:files="{ row }">
        <fileMain
          v-model="row.files"
          module="main"
          :showLib="false"
          :limit="1"
          :disabled="type == 'detail'"
        />
      </template>

      <template v-slot:action="{ row }" v-if="type != 'detail'">
        <el-popconfirm
          class="ele-action"
          title="确定要删除当前物料吗？"
          @confirm="remove2(row)"
        >
          <template v-slot:reference>
            <el-link type="danger" :underline="false" icon="el-icon-delete">
              删除
            </el-link>
          </template>
        </el-popconfirm>
      </template>
    </ele-pro-table>

    <div slot="footer" class="footer">
      <el-button type="primary" @click="save" v-click-once>确认</el-button>
      <el-button @click="cancel">返回</el-button>
    </div>
    <timeDialog
      @chooseTime="chooseTime"
      ref="timeDialogRef"
      :isBatch="true"
    ></timeDialog>
  </ele-modal>
</template>

<script>
  import timeDialog from '@/components/timeDialog/index.vue';

  const statusOpt = {
    '': '全部',
    0: '草稿',
    1: '已发布'
  };
  const rootCategoryLevelIdList = {
    9: '产品',
    1: '物料',
    4: '生产设备',
    5: '模具',
    6: '备品备件',
    3: '零部件',
    8: '舟皿',
    10: '消耗材料',
    13: '包装材料',
    14: '生产辅助设备',
    15: '仪表计量设备',
    23: '会计科目',
    26: '周转盘',
    28: '废品'
  };
  export default {
    components: { timeDialog },
    data() {
      return {
        tableList: [],
        // 表格列配置
        columns: [
          {
            label: '序号',
            columnKey: 'index',
            type: 'index',
            width: 55,
            align: 'center',
            showOverflowTooltip: true
          },

          {
            prop: 'code',
            label: '物品编码',
            showOverflowTooltip: true,
            width: 120
          },
          {
            prop: 'name',
            label: '名称',
            width: 150
          },

          // {
          //   prop: 'level',
          //   label: '层级'
          // },

          {
            prop: 'brandNum',
            label: '牌号'
          },

          {
            prop: 'modelType',
            label: '型号',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'specification',
            label: '规格',
            align: 'center',
            showOverflowTooltip: true
          },

          {
            prop: 'dosage',
            label: '用量',
            slot: 'dosage',
            width: 150
          },

          {
            prop: 'componentAttribute',
            label: '属性类型',
            slot: 'componentAttribute',
            width: 260
          },

          {
            prop: 'materialsCode',
            label: '物料代号',
            width: 150
          },

          {
            prop: 'versions',
            label: '版本',
            formatter: (row) => {
              return row.versions + '.0';
            }
          },
          {
            prop: 'status ',
            label: '状态',
            formatter: (row) => {
              return statusOpt[+row.status];
            }
          },

          {
            prop: 'createName',
            label: '创建人',
            showOverflowTooltip: true
          },
          // {
          //   prop: 'createTime',
          //   label: '创建日期',
          //   width: 160
          // }
          // {
          //   columnKey: 'selection',
          //   type: 'selection',
          //   width: 50,
          //   align: 'center',
          //   fixed: 'left'
          // },
          // {
          //   columnKey: 'index',
          //   label: '序号',
          //   type: 'index',
          //   width: 55,
          //   align: 'center',
          //   showOverflowTooltip: true,
          //   fixed: 'left'
          // },
          // {
          //   prop: 'componentAttribute',
          //   label: '属性类型',
          //   slot: 'componentAttribute',
          //   width: 260
          // },
          // {
          //   label: '物料名称',
          //   prop: 'name',
          //   align: 'center',
          //   minWidth: 120,
          //   fixed: 'left'
          // },

          // {
          //   label: '物料编码',
          //   prop: 'code',
          //   align: 'center',
          //   minWidth: 120,
          //   fixed: 'left'
          // },
          // {
          //   label: '牌号',
          //   prop: 'brandNum',
          //   align: 'center'
          // },
          // {
          //   prop: 'specification',
          //   label: '规格',
          //   align: 'center',
          //   showOverflowTooltip: true,
          //   minWidth: 110
          // },
          // {
          //   label: '型号',
          //   prop: 'modelType',
          //   align: 'center'
          // },

          // {
          //   prop: 'inventoryQuantity',
          //   label: '库存',
          //   showOverflowTooltip: true
          // },
          // {
          //   prop: 'secureInventory',
          //   label: '安全库存',
          //   showOverflowTooltip: true
          // },
          // {
          //   prop: 'lockQuantity',
          //   label: '锁库数量',
          //   showOverflowTooltip: true
          // },
          // {
          //   prop: 'inTransitNum',
          //   label: '在途数量',
          //   showOverflowTooltip: true
          // },
          // {
          //   prop: 'inTransitOrdersNum',
          //   label: '在途已关联数量',
          //   showOverflowTooltip: true
          // },
          // {
          //   prop: 'availableQuantity',
          //   label: '可用数量',
          //   showOverflowTooltip: true
          // },
          // {
          //   prop: 'unit',
          //   label: '计量单位',
          //   showOverflowTooltip: true,
          //   action: 'unit',
          //   slot: 'unit'
          // },

          // {
          //   label: '需求数量',
          //   slot: 'demandQuantity',
          //   action: 'demandQuantity',
          //   align: 'center',
          //   minWidth: 120
          // },

          // {
          //   label: '采购数量',
          //   slot: 'purchaseQuantity',
          //   action: 'purchaseQuantity',
          //   align: 'center',
          //   minWidth: 120
          // },
          // {
          //   label: '采购周期',
          //   slot: 'purchasingCycle',
          //   action: 'purchasingCycle',
          //   align: 'center',
          //   minWidth: 160
          // },
          // {
          //   label: '到货方式',
          //   slot: 'deliveryMethod',
          //   action: 'deliveryMethod',
          //   align: 'center',
          //   minWidth: 140
          // },

          // {
          //   label: '要求到货时间',
          //   slot: 'requireDeliveryTime',
          //   action: 'requireDeliveryTime',
          //   align: 'center',
          //   minWidth: 180
          // },

          // {
          //   label: '图纸',
          //   slot: 'imgUrl',
          //   action: ' imgUrl',
          //   align: 'center',
          //   minWidth: 140
          // },

          // {
          //   label: '附件',
          //   slot: 'files',
          //   action: ' files',
          //   align: 'center',
          //   minWidth: 140
          // },
          // {
          //   columnKey: 'action',
          //   label: '操作',
          //   width: 80,
          //   align: 'center',
          //   resizable: false,
          //   slot: 'action',
          //   showOverflowTooltip: true
          // }
        ],

        visible: false,

        loading: false,

        sxtList: [
          {
            label: '自制件',
            value: 1
          },
          {
            label: '采购件',
            value: 2
          },
          {
            label: '外协件',
            value: 3
          }
          // {
          //   label: '受托件',
          //   value: 4
          // }
        ]
      };
    },
    computed: {},
    created() {},
    methods: {
      open(tableList) {
        this.visible = true;
        this.tableList = tableList.map((item) => {
          if (item.componentAttribute?.length > 1) {
            item.componentAttribute = [];
          }
          return item;
        });
      },
      //设置分批到货时间
      handleMethod(row, index) {
        row.arrivalBatch = row.timeList;
        this.$refs.timeDialogRef.open(row, index);
      },
      chooseTime({ arrivalBatch, index }) {
        this.$set(this.tableList[index], 'timeList', copyObj(arrivalBatch));
      },
      save() {
        const arr = this.tableList.filter(
          (item) => !item.componentAttribute.length
        );
        if (arr.length) {
          return this.$message.warning('请选择属性类型');
        }
        this.$emit('handleSubmit', this.tableList);
        this.cancel();
      },
      cancel() {
        this.visible = false;
        this.tableList = [];
      }
    }
  };
</script>
<style scoped lang="scss"></style>