bonus-ui/src/views/material/lease/outBound/component/addToolsOutBound.vue

<template>
  <!-- 新增工机具 -->
  <div>
    <el-form
      :model="maForm"
      ref="maForm"
      size="small"
      :rules="rules"
      :inline="true"
      label-width="120px"
    >
      <el-form-item label="共享单位" prop="arrivalTime">
        <el-select
          v-model="maForm.supplierId"
          placeholder="共享单位"
          clearable
          filterable
          style="width: 240px"
          disabled
        >
          <el-option
            v-for="item in supplierList"
            :key="item.supplierId"
            :label="item.supplier"
            :value="item.supplierId"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="共享工程" prop="supplierId">
        <el-select
          v-model="maForm.supplierId"
          placeholder="共享工程"
          clearable
          filterable
          style="width: 240px"
          disabled
        >
          <el-option
            v-for="item in supplierList"
            :key="item.supplierId"
            :label="item.supplier"
            :value="item.supplierId"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="领料人" prop="leasePerson">
        <el-input
          v-model="maForm.leasePerson"
          placeholder="请输入领料人"
          clearable
          maxlength="50"
          style="width: 240px"
          @keyup.enter.native="handleQuery"
          disabled
        />
      </el-form-item>

      <el-form-item label="联系电话" prop="phone">
        <el-input
          v-model="maForm.phone"
          placeholder="请输入联系电话"
          clearable
          maxlength="50"
          style="width: 240px"
          @keyup.enter.native="handleQuery"
          disabled
        />
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleSave"
          >保存</el-button
        >
      </el-col>
      <!-- <el-col :span="1.5">
                <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" v-if="isEdit">导出</el-button>
            </el-col> -->
    </el-row>

    <el-table v-loading="loading" :data="equipmentList" height="546">
      <el-table-column align="center" label="序号" type="index" width="55" />
      <el-table-column
        align="center"
        label="类型名称"
        prop="maTypeName"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        align="center"
        label="规格型号"
        prop="typeName"
        show-overflow-tooltip
      />
      <el-table-column align="center" label="计量单位" prop="unitName" />
      <el-table-column align="center" label="当前库存" prop="storageNum" />
      <el-table-column label="预领数量" prop="purchaseNum" align="center">
      </el-table-column>

      <el-table-column align="center" label="已领数量" prop="unitName" />
      <el-table-column align="center" label="管理模式" prop="unitName" />
      <el-table-column align="center" label="出库数量" prop="unitName">
        <template slot-scope="scope">
          <div
            v-if="scope.row.unitName != null && scope.row.unitName != ''"
            @click="codeBind(scope.row)"
            style="color: #02a7f0; cursor: pointer"
          >
            {{ scope.row.unitName }}
          </div>
          <el-input-number
            v-else
            v-model="scope.row.preNum"
            controls-position="right"
            style="width: 100%"
          ></el-input-number>
        </template>
        <!-- <template slot-scope="scope">
          <el-input-number
            v-if="scope.row.unitName != null && scope.row.unitName != ''"
            v-model="scope.row.preNum"
            controls-position="right"
            style="width: 100%"
          ></el-input-number>
        </template> -->
      </el-table-column>
      <el-table-column label="备注" prop="remark" align="center">
        <template v-slot="scope">
          <el-input
            v-model="scope.row.remark"
            controls-position="right"
            style="width: 100%"
          ></el-input>
        </template>
      </el-table-column>

      <el-table-column label="操作" align="center">
        <template slot-scope="scope" v-if="scope.row.roleId !== 1">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            style="color: red"
            @click="handleDelete(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 绑定弹框-->
    <el-dialog
      width="70%"
      append-to-body
      title="编码绑定"
      :visible.sync="bindCodeVisible"
      @close="closeCancel"
    >
      <el-form
        size="small"
        :inline="true"
        ref="queryFormBindRef"
        :model="queryBindForm"
        :rules="queryBindFormRules"
      >
        <el-form-item label="前缀" prop="codePrefix">
          <el-input
            clearable
            maxlength="20"
            placeholder="请输入前缀"
            v-model="queryBindForm.codePrefix"
          />
        </el-form-item>

        <el-form-item label="后缀范围" prop="codeSuffixStart">
          <el-input
            clearable
            placeholder="开始数值"
            v-model="queryBindForm.codeSuffixStart"
          />
        </el-form-item>
        <el-form-item prop="codeSuffixEnd">
          <el-input
            clearable
            placeholder="结束数值"
            v-model="queryBindForm.codeSuffixEnd"
          />
        </el-form-item>
        <el-form-item label="编码" prop="code">
          <el-input
            clearable
            maxlength="20"
            placeholder="请输入编码"
            v-model="queryBindForm.code"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="mini" @click="handleAdd"
            >填充</el-button
          >
          <el-button type="primary" size="mini" @click="handleCodeBinding"
            >绑定</el-button
          >
        </el-form-item>
      </el-form>
      <el-table border max-height="600px" :data="codeTableList" height="546">
        <el-table-column align="center" label="序号" type="index" />
        <el-table-column align="center" label="设备名称" prop="materialName" />
        <el-table-column align="center" label="规格型号" prop="materialModel" />
        <el-table-column align="center" label="设备编码">
          <template slot-scope="{ row }">
            <el-input clearable v-model="row.maCode" placeholder="请填写编码" />
          </template>
        </el-table-column>
        <el-table-column align="center" label="状态"> </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="danger"
              icon="el-icon-remove"
              @click="handleRemove(scope.$index)"
            >
              移除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import {
  getPurchaseCheckInfo,
  equipmentTypeTree,
  addApplyInfo,
  updatePurchaseCheckInfo,
} from "@/api/purchase/goodsArrived";
import { getListFacturer } from "@/api/ma/supplier";
import { getToken } from "@/utils/auth";
import {
  uploadPurchaseFile,
  getPurchaseFileList,
} from "@/api/purchase/goodsAccept";

// import Treeselect from '@riophae/vue-treeselect'
// import '@riophae/vue-treeselect/dist/vue-treeselect.css'
// import HoldingpoleDialog from '@/components/HoldingpoleDialog/index.js'

export default {
  name: "AddTools",
  dicts: ["purchase_task_status"],
  // components: { Treeselect, HoldingpoleDialog },
  props: {
    isEdit: {
      type: Boolean,
      default: () => {
        return false;
      },
    },
    editTaskId: {
      type: [String, Number],
      default: () => {
        return "";
      },
    },
    editId: {
      type: [String, Number],
      default: () => {
        return "";
      },
    },
  },
  data() {
    return {
      taskId: "",
      // isEdit: false,
      // 遮罩层
      loading: false,
      loadingTwo: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      bindCodeVisible: false, //  绑定弹框
      // 总条数
      total: 0,
      //物资厂家
      supplierList: [],
      //机具类型
      equipmentTypeList: [],
      //绑定的数据
      codeTableList: [],
      // 角色表格数据
      equipmentList: [{ unitName: 4 }, { unitName: null }],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      rowData: {},
      // 查询参数
      queryParams: {
        equipmentId: undefined,
        productionTime: "",
      },
      maForm: {
        taxRate: 13,
        arrivalTime: "",
        purchaser: "",
        remark: "",
        purchaseNumber: "",
      },
      // 表单参数
      form: {},
      defaultProps: {
        children: "children",
        label: "label",
      },
      // 编码绑定表单数据源
      queryBindForm: {
        typeId: "", //          物资typeId
        typeName: "", //        规格型号
        codePrefix: "", //      编码前缀
        maTypeName: "", //      物资名称
        codeSuffixEnd: "", //   后缀结束
        codeSuffixStart: "", // 后缀开始
        code: "", //编码
      },
      // 表单校验
      rules: {
        // deviceType: [
        //     {
        //         required: true,
        //         message: '请选择类型规格',
        //         trigger: 'blur',
        //     },
        // ],
        deviceType: [
          {
            required: true,
            message: "请选择规格型号",
            trigger: "blur",
          },
        ],
      },
      // 编码校验规则
      queryBindFormRules: {
        codePrefix: [
          { required: true, message: "请输入前缀", trigger: "blur" },
        ],
        codeSuffixStart: [
          {
            required: true,
            trigger: "blur",
            message: "请输入前缀",
          },
          {
            pattern: /^[1-9][0-9]*$/,
            message: "请输入大于0且不能以0开头的正整数",
          },
        ],
        codeSuffixEnd: [
          {
            required: true,
            trigger: "blur",
            message: "请输入后缀",
          },

          {
            pattern: /^[1-9][0-9]*$/,
            message: "请输入大于0且不能以0开头的正整数",
          },
        ],
      },
      deviceTypeTreeProps: {
        children: "children",
        label: "typeName",
        // multiple: false,
        value: "typeId",
        multiple: true,
      },
      deviceType: [],
      propsKey: 1000,
      waitBindNum: 0, //          待绑定数量
      // taxRate:0,
    };
  },
  computed: {
    pickerOptions() {
      return {
        disabledDate(time) {
          const currentDate = new Date();
          currentDate.setHours(0, 0, 0, 0);
          return time.getTime() < currentDate.getTime();
        },
      };
    },
  },
  watch: {},
  mounted() {
    if (this.isEdit) {
      console.log("isEdit", this.isEdit);
      this.taskId = this.editTaskId;
      this.id = this.editId;
      // this.getTaskInfo();
    }
    this.supplierInfoList();
    this.equipmentType();
  },
  methods: {
    //取消弹窗
    closeCancel() {
      this.bindCodeVisible = false;
      this.resetForm("queryFormBindRef");
    },
    codeBind(row) {
      this.bindCodeVisible = true;
      this.waitBindNum = row.unitName;
    },
    handleAdd() {
      if (this.queryBindForm.code != "") {
        console.log("this.queryBindForm.code", this.queryBindForm.code);
      } else {
        // 1. 校验表单
        this.$refs.queryFormBindRef.validate((valid) => {
          if (valid) {
            // 1.1 判断结束值是否大于开始值
            const {
              typeName,
              codePrefix,
              maTypeName,
              codeSuffixEnd,
              codeSuffixStart,
            } = this.queryBindForm;
            if (parseInt(codeSuffixEnd) < parseInt(codeSuffixStart)) {
              this.$modal.msgError("结束值不可小于开始值");
              return;
            }
            // 1.2 判断可编码数量
            let waitCodeNum = this.waitBindNum; // 待编码数量
            // 可编码数量 如相减大于代编码数量 则取待编码数量 如小于待编码数量 则取相减后值
            let passCodeNUm =
              codeSuffixEnd - codeSuffixStart > waitCodeNum
                ? waitCodeNum
                : codeSuffixEnd - codeSuffixStart;

            this.codeTableList = [];
            // 1.3 循环生成编码
            for (let i = 0; i < passCodeNUm; i++) {
              const codeItem = {
                typeName,
                maTypeName,
                outFacCode: "",
                productDate: "",
                maCode: `${codePrefix}${parseInt(codeSuffixStart) + i}`,
              };
              this.codeTableList.push(codeItem);
            }
          }
        });
      }
    },
    handleCodeBinding() {},
    /** 物资厂家-下拉选 */
    supplierInfoList() {
      let param = {
        pageNum: 1,
        pageSize: 100,
        keyWord: undefined,
      };
      getListFacturer(param).then((response) => {
        this.supplierList = response.rows;
      });
    },
    //选择物资厂家
    // changeSupplier(supplierId) {
    //     this.equipmentList.forEach((item) => {
    //         this.$set(item, 'supplierId', supplierId)
    //     })
    // },
    /** 机具类型 */
    equipmentType() {
      equipmentTypeTree().then((response) => {
        this.equipmentTypeList = response.data;
        this.equipmentTypeList.forEach((item, index) => {
          if (item.children && item.children.length > 0) {
            item.children.forEach((item2, index2) => {
              if (item2.children && item2.children.length > 0) {
                item2.children.forEach((item3) => {
                  if (item3.children && item3.children.length > 0) {
                    item3.children.forEach((item4) => {
                      item4.maTypeName = item3.typeName;
                      item4.specificationType = item4.typeName;
                      this.$set(item4, "purchaseTaxPrice", 0);
                      this.$set(item4, "purchasePrice", 0);
                    });
                  }
                });
              }
            });
          }
        });
        //反显
        let selectList = [];
        this.equipmentList.forEach((e) => {
          selectList.push(
            this.getParentsById(this.equipmentTypeList, e.typeId)
          );
        });
        this.deviceType = selectList;
      });
    },
    //添加机具类型
    deviceTypeChange(val) {
      const deviceTypeList = this.$refs.deviceTypeCascader.getCheckedNodes();
      let tempList = [];
      if (val.length > 0) {
        const items = val.map((e) => {
          return e[3];
        });
        for (let i of items) {
          for (let z of deviceTypeList) {
            if (z.data.typeId === i) {
              const obj = JSON.parse(JSON.stringify(z.data));
              // obj.supplierId = ''
              obj.createTime = null;
              obj.productionTime = "";
              obj.purchaseTaxPrice = 0;
              obj.purchaseTaxPrice = 0;
              obj.purchaseNum = 1;
              obj.fixCode = "0";
              obj.bmFileInfos = [];
              tempList.push(obj);
              break;
            }
          }
        }
        const newDataListNew = [...this.equipmentList, ...tempList];
        const map = new Map();
        for (let item of newDataListNew) {
          if (!map.has(item.typeId)) {
            map.set(item.typeId, item);
          }
        }
        const newArray = [...map.values()];
        let newArray_array = [];
        items.forEach((e) => {
          newArray.forEach((j) => {
            if (e == j.typeId) {
              newArray_array.push(j);
            }
          });
        });
        this.equipmentList = newArray_array;
      } else {
        this.equipmentList = [];
      }
    },
    //获取任务详情--- 编辑回显数据
    getTaskInfo() {
      // this.loading = true;
      getPurchaseCheckInfo({
        taskId: this.taskId,
        id: this.id,
        taskStatus: 1,
      }).then((response) => {
        this.maForm = response.data.purchaseCheckInfo;
        this.maForm.id = response.data.purchaseCheckInfo.id;
        this.maForm.taskId = response.data.purchaseCheckInfo.taskId;
        this.maForm.arrivalTime = response.data.purchaseCheckInfo.arrivalTime;
        this.maForm.supplierId = response.data.purchaseCheckInfo.supplierId;
        this.maForm.remark = response.data.purchaseCheckInfo.remark;
        this.maForm.taxRate = response.data.purchaseCheckInfo.taxRate;
        // this.maForm.purchaseNumber = response.data.purchaseNumber
        // this.maForm.productionTime = response.data.purchaseCheckInfo.productionTime
        this.equipmentList = response.data.purchaseCheckDetailsList;
        console.log(this.equipmentList);
        // this.loading = false;
      });
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.roleId);
      this.single = selection.length != 1;
      this.multiple = !selection.length;
    },
    /** 保存按钮操作 */
    handleSave() {
      // console.log(this.equipmentList)
      if (this.equipmentList.length > 0) {
        this.$refs["maForm"].validate((valid) => {
          if (valid) {
            this.maForm.taskId = this.taskId;
            // this.maForm.checkDetailsList = this.equipmentList
            this.$modal
              .confirm("是否确认保存当前页面")
              .then(function () {})
              .then(() => {
                if (this.isEdit) {
                  console.log("编辑");
                  this.loading = true;
                  updatePurchaseCheckInfo({
                    purchaseCheckDetailsList: this.equipmentList,
                    purchaseCheckInfo: this.maForm,
                  }).then((response) => {
                    if (response.code == 200) {
                      this.$modal.msgSuccess("编辑成功");
                      // this.$tab.closeOpenPage({
                      //     path: '/store/newBuy/newDevicesList',
                      // })

                      this.$emit("addToolsSuccess");
                    }
                    this.loading = false;
                  });
                } else if (!this.isEdit) {
                  console.log("新增");
                  // console.log(this.equipmentList)
                  this.loading = true;
                  addApplyInfo({
                    leaseApplyDetailsList: this.equipmentList,
                    leaseApplyInfo: this.maForm,
                  }).then((response) => {
                    if (response.code == 200) {
                      this.$modal.msgSuccess("新增成功");
                      // this.$tab.closeOpenPage({
                      //     path: '/store/newBuy/newDevicesList',
                      // })

                      this.$emit("addToolsSuccess");
                    }
                    this.loading = false;
                  });
                }
              })
              .catch(() => {});
          }
        });
      } else {
        this.$modal.msgError("请先添加机具类型");
      }
    },

    //树结构数据获取父
    getParentsById(list, id) {
      for (let i in list) {
        if (list[i].typeId == id) {
          //查询到就返回该数组对象的value
          return [list[i].typeId];
        }
        if (list[i].children) {
          let node = this.getParentsById(list[i].children, id);
          if (node !== undefined) {
            //查询到把父节把父节点加到数组前面
            node.unshift(list[i].typeId);
            return node;
          }
        }
      }
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      // console.log(row.id)
      this.$modal
        .confirm("是否确认删除所选择的数据项？")
        .then(() => {
          this.deviceType.forEach((e, index) => {
            if (e[3] === row.typeId) {
              this.deviceType.splice(index, 1);
              this.propsKey++;
            }
          });
          this.equipmentList.forEach((item, index) => {
            if (item.id == row.id) {
              this.equipmentList.splice(index, 1);
            }
          });
        })
        .catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download(
        "/material/purchase_check_info/exportDetails",
        { taskId: this.taskId },
        `新购到货详情_${new Date().getTime()}.xlsx`
      );
    },
  },
};
</script>
<style lang="scss">
.popper-select {
  .el-cascader-panel .el-scrollbar .el-checkbox {
    display: none;
  }

  .el-cascader-panel .el-scrollbar:nth-child(4) .el-checkbox {
    display: block !important;
  }
}
</style>