bonus-ui/src/views/toolsManage/toolsApplication/components/AddCode.vue

<template>
  <div>
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="80%" :close-on-click-modal="false">
      <el-card style="margin-bottom: 20px">
        <el-form
          v-if="dialogVisible"
          ref="dialogForm"
          :model="dialogForm"
          :rules="rules"
          size="small"
          inline
          @submit.native.prevent
          style="height: 32px"
        >
          <el-form-item label="规格型号">
            <el-cascader
              v-model="typeIdList"
              :options="options"
              :props="{ value: 'typeId', label: 'typeName' }"
              clearable
              @change="handleChange"
              style="width: 240px"
            />
          </el-form-item>
          <!-- 厂家 -->
          <el-form-item label="生产厂家" prop="supplierId">
            <div>
              <i
                class="el-icon-circle-plus-outline"
                style="color: #13ce66; margin-right: 5px; cursor: pointer"
                @click="openAddress"
              />
              <el-select v-model="dialogForm.supplierId" placeholder="请选择厂家" clearable style="width: 240px">
                <el-option
                  v-for="item in manufacturerSelect"
                  :key="item.id"
                  :label="item.label"
                  :value="item.id"
                ></el-option>
              </el-select>
            </div>
          </el-form-item>
          <!-- 出厂日期 -->
          <el-form-item label="出厂日期" prop="productionDate">
            <el-date-picker
              v-model="dialogForm.productionDate"
              type="date"
              clearable
              placeholder="选择出厂日期"
              value-format="yyyy-MM-dd"
              style="width: 240px"
            />
          </el-form-item>
          <!-- 申请数量 -->
          <el-form-item label="申请数量" prop="applyNum">
            <el-input-number
              v-model="dialogForm.applyNum"
              :min="1"
              :max="9999"
              :controls="false"
              placeholder="请输入申请数量"
              style="width: 240px"
            />
          </el-form-item>
          <el-form-item style="float: right">
            <el-button type="primary" icon="el-icon-plus" :disabled="typeIdList.length == 0" @click="handleAdd"
              >点击填充</el-button
            >
          </el-form-item>
        </el-form>
      </el-card>

      <el-card v-loading="isLoading">
        <el-row :gutter="10" class="mb8" justify="end">
          <el-col :span="24" style="display: flex; justify-content: flex-end">
            <el-button type="primary" :disabled="dialogList.length == 0" @click="submit">确定</el-button>
          </el-col>
        </el-row>
        <el-table :data="dialogList" border stripe highlight-current-row height="546" style="width: 100%">
          <el-table-column type="index" width="55" label="序号" align="center" />
          <el-table-column
            v-for="(column, index) in dialogColumns"
            :width="column.width"
            :show-overflow-tooltip="!column.unShowTooltip"
            :key="index"
            :label="column.label"
            :prop="column.prop"
            align="center"
          >
            <!-- 插槽 -->
            <template #header>
              <span>
                <span v-if="column.required" style="color: red">*</span>
                {{ column.label }}
              </span>
            </template>
            <template v-slot="{ row }">
              <el-select
                v-if="column.prop == 'supplierId'"
                v-model="row.supplierId"
                placeholder="请选择厂家"
                style="width: 150px"
              >
                <el-option
                  v-for="item in manufacturerSelect"
                  :key="item.id"
                  :label="item.label"
                  :value="item.id"
                ></el-option>
              </el-select>
              <el-date-picker
                v-else-if="column.prop == 'productionDate'"
                v-model="row.productionDate"
                type="date"
                clearable
                placeholder="选择出厂日期"
                value-format="yyyy-MM-dd"
                style="width: 150px"
              />
              <el-input
                v-else-if="column.prop == 'toolPrice'"
                v-model="row.toolPrice"
                placeholder="请输入"
                maxlength="9999"
                @input="handlePriceInput(row)"
                style="width: 120px"
              />
              <el-input
                v-else-if="column.prop == 'identifyCode'"
                v-model="row.identifyCode"
                placeholder="请输入"
                maxlength="999"
                style="width: 120px"
              />
              <span v-else-if="column.prop == 'certificates'">
                <span style="color: #00a288; cursor: pointer" @click="handleFileUpload(row, 2)">上传</span>
                <span
                  v-if="row.certificates && row.certificates.length > 0"
                  style="color: #00a288; cursor: pointer; margin-left: 10px"
                  @click="handleView(row, 2)"
                  >查看</span
                >
              </span>
              <span v-else-if="column.prop == 'inspectionReports'">
                <span style="color: #00a288; cursor: pointer" @click="handleFileUpload(row, 3)">上传</span>
                <span
                  v-if="row.inspectionReports && row.inspectionReports.length > 0"
                  style="color: #00a288; cursor: pointer; margin-left: 10px"
                  @click="handleView(row, 3)"
                  >查看</span
                >
              </span>
              <span v-else-if="column.prop == 'purchaseInvoices'">
                <span style="color: #00a288; cursor: pointer" @click="handleFileUpload(row, 4)">上传</span>
                <span
                  v-if="row.purchaseInvoices && row.purchaseInvoices.length > 0"
                  style="color: #00a288; cursor: pointer; margin-left: 10px"
                  @click="handleView(row, 4)"
                  >查看</span
                >
              </span>
              <!-- 其他列默认显示文本 -->
              <span v-else>{{ row[column.prop] }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="{ row, $index }">
              <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete($index)" style="color: red"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </el-dialog>

    <!-- 上传 -->
    <el-dialog :title="uploadTitle" :visible.sync="uploadVisible" width="40%">
      <FileUpload
        v-model="fileList"
        :value="fileList"
        :limit="3"
        :fileSize="10"
        :fileType="['jpg', 'png', 'pdf']"
        @input="handleFileList"
      />

      <span slot="footer" class="dialog-footer">
        <el-button @click="uploadVisible = false">关 闭</el-button>
      </span>
    </el-dialog>
    <!-- 查看 -->
    <el-dialog :title="viewTitle" :visible.sync="viewVisible" width="40%">
      <el-table :data="viewList" fit highlight-current-row style="width: 100%" height="546">
        <el-table-column type="index" width="55" label="序号" align="center" />
        <el-table-column label="附件名称" prop="fileName" align="center">
          <!-- 插槽 -->
          <template v-slot="{ row }">
            <span style="color: #00a288; cursor: pointer" @click="handleFile(row)">{{ row.fileName }}</span>
          </template>
        </el-table-column>
      </el-table>

      <span slot="footer" class="dialog-footer">
        <el-button @click="viewVisible = false">关 闭</el-button>
      </span>
    </el-dialog>
    <!-- 地址 -->
    <el-dialog title="新增" v-if="showHouse" :visible.sync="showHouse" width="55%" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="135px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="统一社会信用代码" prop="supplierCode">
              <el-input v-model="form.supplierCode" placeholder="请输入统一社会信用代码" maxlength="64" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="厂家名称" prop="supplierName">
              <el-input v-model="form.supplierName" placeholder="请输入厂家名称" maxlength="128" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="联系人" prop="contactPerson">
              <el-input v-model="form.contactPerson" placeholder="请输入联系人" maxlength="64" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系电话" prop="contactPhone">
              <el-input v-model="form.contactPhone" placeholder="请输入联系电话" maxlength="11" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="厂家地址" prop="address">
              <el-input v-model="form.address" placeholder="请输入厂家地址" maxlength="255" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="资质/执照编号" prop="qualification">
              <el-input v-model="form.qualification" placeholder="请输入资质信息或执照编号" maxlength="255" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="状态" prop="status">
              <el-select v-model="form.status" placeholder="请选择状态" style="width: 100%">
                <el-option label="启用" :value="1" />
                <el-option label="停用" :value="0" />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="备注" prop="remark">
              <el-input
                type="textarea"
                :rows="6"
                placeholder="请输入备注"
                v-model="form.remark"
                maxlength="255"
                show-word-limit
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="showHouse = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getTreeSelectApi, addApplyCodeApi, addToolApi } from '@/api/toolsManage'
import { getManufacturerSelectApi } from '@/api/EquipmentLedger'
import { addFacturer } from '@/api/ma/supplier'
import FileUpload from '@/components/FileImageUpload'

export default {
  components: { FileUpload },
  data() {
    return {
      isLoading: false,
      dialogTitle: '新增编码工具',
      dialogVisible: false,
      dialogForm: {
        applyId: null,
        typeId: null,
        supplierId: null,
        supplierName: null,
        productionDate: null,
        applyNum: 1,
      },
      rules: {
        applyNum: [{ required: true, message: '请输入申请数量', trigger: 'blur' }],
      },
      typeIdList: [],
      dialogColumns: [
        { label: '工具专业', prop: 'fourthParentName' },
        { label: '施工类型', prop: 'greatGrandparentName' },
        { label: '工具类型', prop: 'grandparentTypeName' },
        { label: '工具名称', prop: 'parentTypeName' },
        { label: '规格型号', prop: 'typeName' },
        { label: '计量单位', prop: 'unitName' },
        { label: '生产厂家', prop: 'supplierId', width: 180, required: true },
        { label: '出厂日期', prop: 'productionDate', width: 180, required: true },
        { label: '资产原值(万元)', prop: 'toolPrice', width: 150, required: true },
        { label: '原始编码', prop: 'identifyCode', width: 150, required: true },
        { label: '合格证', prop: 'certificates', width: 100, required: true },
        { label: '检测证书', prop: 'inspectionReports', width: 100, required: true },
        { label: '发票', prop: 'purchaseInvoices', width: 100, required: true },
      ],
      dialogList: [],
      options: [],
      activeLabels: [],
      lastNode: null,
      manufacturerSelect: [],
      certificates: [], // 合格证
      inspectionReports: [], // 检测证书
      purchaseInvoices: [], // 采购发票
      uploadType: '',
      currentRow: null,
      uploadTitle: '',
      uploadVisible: false,
      fileList: [],
      viewVisible: false,
      viewTitle: '',
      viewList: [],
      showHouse: false,
      form: {},
      // 表单校验
      rules: {
        supplierCode: [{ required: true, message: '统一社会信用代码不能为空', trigger: 'blur' }],
        supplierName: [{ required: true, message: '厂家名称不能为空', trigger: 'blur' }],
        contactPhone: [
          { required: false, message: '请输入联系电话', trigger: 'blur' },
          { pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: '请输入正确的手机号码', trigger: 'blur' },
        ],
        status: [{ required: true, message: '请选择状态', trigger: 'change' }],
      },
    }
  },
  methods: {
    openDialog(applyId) {
      this.dialogForm.applyId = applyId
      this.dialogForm.supplierId = null
      this.dialogForm.productionDate = null
      this.dialogForm.applyNum = 1
      this.typeIdList = []
      this.dialogList = []
      this.dialogVisible = true
      this.getTreeSelect()
      this.getManufacturerSelect()
    },
    async getTreeSelect() {
      try {
        const res = await getTreeSelectApi({ manageType: 0 })
        this.options = res.data
        this.handleTree(this.options)
      } catch (error) {}
    },
    handleTree(tree) {
      for (const node of tree) {
        if (node.level === '5') {
          // 删除 children
          delete node.children
        } else if (node.children && node.children.length > 0) {
          // 继续递归下级
          this.handleTree(node.children)
        }
      }
    },
    handleChange(val) {
      this.dialogForm.typeId = val ? val[val.length - 1] : ''
      this.activeLabels = this.getLabelsFromValuePath(val, this.options)
      this.lastNode = this.findNodeById(this.options, val[val.length - 1])
      console.log('选中的 labels:', this.activeLabels)
    },
    getLabelsFromValuePath(valuePath, options) {
      let labels = []
      let currentLevel = options

      for (const val of valuePath) {
        const node = currentLevel.find((item) => item.typeId === val)
        if (node) {
          labels.push(node.typeName)
          currentLevel = node.children || []
        } else {
          break
        }
      }
      return labels
    },
    findNodeById(tree, id) {
      for (const node of tree) {
        if (node.typeId === id) return node // 找到了就返回
        if (node.children) {
          const result = this.findNodeById(node.children, id)
          if (result) return result // 子节点中找到了
        }
      }
      return null // 没找到
    },
    handleAdd() {
      const typeId = this.typeIdList[this.typeIdList.length - 1]

      for (let i = 0; i < this.dialogForm.applyNum; i++) {
        this.dialogList.unshift({
          applyId: this.dialogForm.applyId,
          typeId,
          fourthParentName: this.activeLabels[0],
          greatGrandparentName: this.activeLabels[1],
          grandparentTypeName: this.activeLabels[2],
          parentTypeName: this.activeLabels[3],
          typeName: this.activeLabels[4],
          unitName: this.lastNode.unitName,
          applyNum: 1,
          supplierId: this.dialogForm.supplierId,
          supplierName: this.dialogForm.supplierName,
          productionDate: this.dialogForm.productionDate,
          toolPrice: null,
          identifyCode: null,
          certificates: [], // 合格证
          inspectionReports: [], // 检测证书
          purchaseInvoices: [], // 采购发票
        })
      }
    },
    handleDelete(index) {
      this.dialogList.splice(index, 1)
      this.$message({
        type: 'success',
        message: '删除成功!',
      })
    },
    // 获取厂家
    async getManufacturerSelect() {
      try {
        const res = await getManufacturerSelectApi()
        this.manufacturerSelect = res.data
      } catch (error) {}
    },
    // 提交
    async submit() {
      try {
        // 循环this.dialogList 校验 厂家 出厂日期 资产原值 原始编码 合格证 检测证书 发票 是否填写
        for (let i = 0; i < this.dialogList.length; i++) {
          const item = this.dialogList[i]
          if (!item.supplierId) {
            this.$message.error(`第${i + 1}行厂家不能为空`)
            return
          }
          if (!item.productionDate) {
            this.$message.error(`第${i + 1}行出厂日期不能为空`)
            return
          }
          if (!item.toolPrice) {
            this.$message.error(`第${i + 1}行资产原值不能为空`)
            return
          }
          if (!item.identifyCode) {
            this.$message.error(`第${i + 1}行原始编码不能为空`)
            return
          }
          if (item.certificates.length == 0) {
            this.$message.error(`第${i + 1}行合格证不能为空`)
            return
          }
          if (item.inspectionReports.length == 0) {
            this.$message.error(`第${i + 1}行检测证书不能为空`)
            return
          }
          if (item.purchaseInvoices.length == 0) {
            this.$message.error(`第${i + 1}行采购发票不能为空`)
            return
          }
        }
        this.isLoading = true
        if (!this.dialogForm.applyId) {
          const res = await addApplyCodeApi()
          this.dialogForm.applyId = res.data.id
          this.dialogList.forEach((item) => {
            item.applyId = res.data.id
          })
        }
        await addToolApi(this.dialogList)
        this.$message({
          type: 'success',
          message: '操作成功!',
        })
        this.dialogVisible = false
        this.$emit('getList', { applyId: this.dialogForm.applyId })
      } catch (error) {
      } finally {
        this.isLoading = false
      }
    },
    openAddress() {
      this.showHouse = true
    },
    submitForm() {
      this.$refs['form'].validate(async (valid) => {
        if (valid) {
          addFacturer(this.form).then((response) => {
            this.$modal.msgSuccess('新增成功')
            this.showHouse = false
            this.getManufacturerSelect()
          })
        }
      })
    },
    handlePriceInput(row) {
      let val = String(row.toolPrice ?? '')

      // 1️⃣ 只保留数字和 .
      val = val.replace(/[^\d.]/g, '')

      // 2️⃣ 只保留第一个小数点
      const dotIndex = val.indexOf('.')
      if (dotIndex !== -1) {
        val = val.slice(0, dotIndex + 1) + val.slice(dotIndex + 1).replace(/\./g, '')
      }
      row.toolPrice = val
    },
    handleFile(row) {
      // 打开文件预览
      window.open(row.fileUrl, '_blank')
    },
    // 查看
    handleView(row, type) {
      if (type == 2) {
        this.viewTitle = '合格证'
        this.viewList = row.certificates || []
      } else if (type == 3) {
        this.viewTitle = '检测证书'
        this.viewList = row.inspectionReports || []
      } else if (type == 4) {
        this.viewTitle = '采购发票'
        this.viewList = row.purchaseInvoices || []
      }
      this.viewVisible = true
    },
    // 上传
    handleFileUpload(row, type) {
      this.uploadType = type
      this.currentRow = row
      if (type == 2) {
        this.uploadTitle = '合格证'
        this.fileList = row.fileList2
      } else if (type == 3) {
        this.uploadTitle = '定期检验报告'
        this.fileList = row.fileList3
      } else if (type == 4) {
        this.uploadTitle = '采购发票'
        this.fileList = row.fileList4
      }
      this.uploadVisible = true
    },
    handleFileList(file) {
      console.log('🚀 ~ file:', file)
      if (this.uploadType == 2) {
        this.currentRow.fileList2 = file
        if (!file) {
          this.currentRow.certificates = []
          return
        }
        this.currentRow.certificates = this.formatFileList(file)
      } else if (this.uploadType == 3) {
        this.currentRow.fileList3 = file
        if (!file) {
          this.currentRow.inspectionReports = []
          return
        }
        this.currentRow.inspectionReports = this.formatFileList(file)
      } else if (this.uploadType == 4) {
        this.currentRow.fileList4 = file
        if (!file) {
          this.currentRow.purchaseInvoices = []
          return
        }
        this.currentRow.purchaseInvoices = this.formatFileList(file)
      }
    },
    formatFileList(file) {
      const arr = file.split(',')
      return arr.map((item) => {
        const parts = item.split('/')
        return {
          fileName: parts[parts.length - 1],
          fileUrl: item,
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped></style>