kd-aiot-frontend-mes/src/views/mes/workOrder/components/send-order.vue

<!-- 字典编辑弹窗 -->
<template>
  <ele-modal
    width="960px"
    :maxable="true"
    :visible="visible"
    :close-on-click-modal="true"
    title="派单"
    @update:visible="updateVisible"
  >
    <HeaderTitle title="选择生产设备" size="16px"></HeaderTitle>
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      label-width="85px"
      style="margin-bottom: 10px"
    >
      <el-row>
        <el-col :span="8">
          <el-form-item label="字典名称:" prop="name">
            <el-select
              v-model="form.name"
              placeholder="请选择"
              @change="OneChange(1)"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="字典值:" prop="code">
            <el-select
              v-model="form.name1"
              placeholder="请选择"
              @change="OneChange(2)"
            >
              <el-option
                v-for="item in options"
                :key="item.label"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="应用类型:" prop="appType">
            <el-select v-model="form.name2" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.name"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <HeaderTitle title="生产基本信息" size="16px"></HeaderTitle>

    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      label-width="110px"
      style="margin-bottom: 10px"
    >
      <el-row>
        <el-col :span="8">
          <el-form-item label="产品分类:"> 1111 </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="生产版本:"> 2222 </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="交货日期:"> 3333 </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="产品牌号:"> 3333 </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="产品型号:"> 3333 </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="生产数量:"> 3333 </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="物料(产品)编码:"> 3333 </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="物料(产品)名称:"> 3333 </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="生产工单号:"> 3333 </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="销售单号:"> 3333 </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="计划单号:"> 3333 </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <HeaderTitle title="当班人员信息" size="16px"></HeaderTitle>

    <el-table
      :data="tableData"
      border
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column prop="code" label="字典项编码">
        <template slot-scope="scope">
          <el-input
            @blur="checkedValue(scope.row.code)"
            v-model="scope.row.code"
            placeholder=""
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="字典项名称">
        <template slot-scope="scope">
          <el-input v-model="scope.row.name" placeholder=""></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="sort" label="排序">
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.sort"
            @input="
              scope.row.sort = String(scope.row.sort).replace(/[^\d]/g, '')
            "
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="enable" label="启用">
        <template slot-scope="scope">
          <el-radio-group v-model="scope.row.enable">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-popconfirm
            class="ele-action"
            title="确定要删除此字典项吗？"
            @confirm="removeArr(scope)"
          >
            <template v-slot:reference>
              <el-link type="danger" :underline="false" icon="el-icon-delete">
                删除
              </el-link>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <template v-slot:footer>
      <el-button @click="updateVisible(false)">取消</el-button>
      <el-button type="primary" :loading="loading" @click="save">
        保存
      </el-button>
    </template>
  </ele-modal>
</template>

<script>
  import { addDictionary, updateDictionary } from '@/api/system/dictionary';
  import {
    pageDictionaryData,
    removeDictionaryData,
    removeDictionaryDataBatch
  } from '@/api/system/dictionary-data';

  export default {
    props: {
      // 弹窗是否打开
      visible: Boolean,
      // 修改回显的数据
      id: String | Number
    },
    data() {
      const defaultForm = {
        name: '',
        name1: '',
        name2: '',
        code: '',
        appType: 1,
        enable: 1,
        remark: '',
        dictStaticSubmitPOList: []
      };
      return {
        defaultForm,
        // 表单数据
        form: { ...defaultForm },
        // form: {
        //   name: '',
        //   code: '',
        //   appType: 1,
        //   enable: 1,
        //   remark: ''
        // },
        // 表单验证规则
        rules: {
          name: [
            {
              required: true,
              message: '请输入字典名称',
              trigger: 'blur'
            }
          ],
          code: [
            {
              required: true,
              message: '请输入字典值',
              trigger: 'blur'
            }
          ],
          appType: [
            {
              required: true,
              message: '请选择应用类型',
              trigger: 'blur'
            }
          ],
          enable: [
            {
              required: true,
              message: '请选择是否启用',
              trigger: 'blur'
            }
          ],
          sort: [
            {
              required: true,
              message: '请输入排序号',
              trigger: 'blur'
            }
          ]
        },
        options: [
          { value: 1, label: '车间1', name: 11 },
          { value: 2, label: '车间2', name: 12 },
          { value: 3, label: '车间3', name: 13 },
          { value: 4, label: '车间4', name: 14 }
        ],
        // 表格列配置
        columns: [
          {
            columnKey: 'selection',
            type: 'selection',
            width: 45,
            align: 'center'
          },
          {
            columnKey: 'index',
            type: 'index',
            width: 45,
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'code',
            label: '字典编码',
            showOverflowTooltip: true
          },
          {
            prop: 'name',
            label: '字典名称',

            showOverflowTooltip: true
          },
          // {
          //   prop: 'appType',
          //   label: '字典类型',

          //   showOverflowTooltip: true,
          //   minWidth: 110
          // },
          {
            prop: 'appType',
            label: '应用类型',

            showOverflowTooltip: true
          },
          {
            prop: 'remark',
            label: '描述',

            showOverflowTooltip: true
          },
          {
            prop: 'createTime',
            label: '创建时间',

            showOverflowTooltip: true,
            minWidth: 110,
            formatter: (_row, _column, cellValue) => {
              return this.$util.toDateString(cellValue);
            }
          },
          {
            columnKey: 'action',
            label: '操作',
            width: 130,
            align: 'center',
            resizable: false,
            slot: 'action',
            showOverflowTooltip: true
          }
        ],
        tableData: [],
        // 表格选中数据
        selection: [],
        datasource: {
          list: []
        },
        // 提交状态
        loading: false,
        // 是否是修改
        isUpdate: false,
        delectId: 1
      };
    },
    created() {},

    methods: {
      OneChange(val) {
        if (val == 1) {
          this.form.name1 = '';
          this.form.name2 = '';
        } else if (val == 2) {
          this.form.name2 = '';
        }
      },
      pushArr() {
        this.form.dictStaticSubmitPOList.push({
          code: '',
          enable: 1,
          name: '',
          sort: '',
          delectId: this.delectId
        });
        this.delectId = this.delectId + 1;
        this.filterArr();
      },
      //
      checkedValue(val) {
        console.log(val);
      },
      removeArr(row) {
        console.log(row);
        if (row.row.id) {
          this.form.dictStaticSubmitPOList.forEach((item) => {
            if (item.id === row.row.id) {
              item.deleted = 1;
            }
          });
          this.filterArr();
        } else {
          let index = this.form.dictStaticSubmitPOList.findIndex(
            (item) => item.delectId === row.row.delectId
          );
          console.log(index);
          this.form.dictStaticSubmitPOList.splice(index, 1); // 在数组的指定位置移除对应的元素。 返回移除的
          this.filterArr();
        }

        // let falg = this.form.dictStaticSubmitPOList[row.$index].deleted === 0;
        // if (falg) {
        //   this.form.dictStaticSubmitPOList[row.$index].deleted = 1;
        //   this.filterArr();
        // } else {
        //   this.form.dictStaticSubmitPOList.splice(row.$index, 1);
        //   this.filterArr();
        // }
      },
      handleSelectionChange() {},
      /* 保存编辑 */
      save() {
        this.$refs.form.validate((valid) => {
          if (!valid) {
            return false;
          }
          let falg = this.form.dictStaticSubmitPOList.some(
            (item, index) => item.code.length === 0
          );
          if (falg) {
            this.$message({
              message: '字典项编码不能为空',
              type: 'warning'
            });
            return;
          }
          this.form.dictStaticSubmitPOList.forEach((item, index) => {
            if (item.delectId) {
              delete item.delectId;
            }
          });

          this.loading = true;
          const saveOrUpdate = this.isUpdate ? updateDictionary : addDictionary;
          saveOrUpdate(this.form)
            .then((msg) => {
              this.loading = false;
              this.$message.success(msg);
              this.updateVisible(false);
              this.$emit('done');
            })
            .catch((e) => {
              this.loading = false;
              // // this.$message.error(e.message);
            });
        });
      },
      filterArr() {
        this.tableData = this.form.dictStaticSubmitPOList.filter(
          (item) => item.deleted !== 1
        );
      },
      /* 更新visible */
      updateVisible(value) {
        this.$emit('update:visible', value);
      },

      getDetail() {
        //   const res = await pageDictionaryData(this.id);
        //   this.form = res.data.dictInfoVO;
        //   this.form.dictStaticSubmitPOList = res.data.dictStaticVOList;
        //   if (this.form.dictStaticSubmitPOList.length > 0) {
        //     this.filterArr();
        //   } else {
        //     this.tableTata = [];
        //   }
      }
    },
    watch: {
      visible(visible) {
        if (visible) {
          if (this.id) {
            // this.$util.assignObject(this.form, this.data);
            this.isUpdate = true;
            this.getDetail();
          } else {
            this.isUpdate = false;
          }
        } else {
          this.$refs.form.clearValidate();
          this.form = { ...this.defaultForm };
          this.form.dictStaticSubmitPOList = []; // clear the list of the dictionary static push button. 描述变化的字段不会在push后
          this.tableData = []; // clear the list of the dictionary static push button. 描述变化的字段不会在push后。
        }
      }
    }
  };
</script>
<style lang="scss" scoped>
  .divider {
    margin-bottom: 20px;

    .title {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      .ele-bg-primary {
        width: 8px;
        height: 20px;
        margin-right: 10px;
      }
      .action {
        flex: 1;
        display: flex;
        justify-content: flex-end;
      }
      span {
        font-size: 20px;
      }
    }
  }
</style>