feat(device,supply,satisfaction): 设备计划改造、耗材采购调整与满意度照片上传

吴羡

4 天以前 137bf2c0666b60cfc0d98b1a9ca7ead860ee4e7c

 src/views/CNAS/externalService/serviceAndSupplyPro/component/Edit.vue

@@ -1,122 +1,120 @@
<template>
  <el-dialog
    v-model="dialogVisible"
    title="添加耗材项目信息"
    width="70%"
    :title="model.id ? '编辑耗材' : '新增耗材'"
    width="1100px"
  >
    <el-form ref="modelForm" :model="model" :rules="rules" label-width="100px">
      <div class="section-title">基本信息</div>
      <el-row :gutter="24">
      <el-col :span="12">
        <el-form-item label="耗材类型" prop="consumablesType">
          <el-select v-model="model.consumablesType" placeholder="请选择耗材类型" size="small" style="width: 100%">
            <el-select v-model="model.consumablesType" placeholder="请选择耗材类型" style="width: 100%">
            <el-option v-for="(v, i) in dict.type.consumables_type" :key="i" :label="v.label" :value="v.value"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="货号">
          <el-input v-model="model.itemNumber" placeholder="请输入货号" size="small"></el-input>
          <el-form-item label="耗材名称">
            <el-input v-model="model.consumablesName" clearable placeholder="请输入耗材名称"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="耗材名称">
          <el-input v-model="model.consumablesName" placeholder="请输入耗材名称" size="small"></el-input>
          <el-form-item label="货号">
            <el-input v-model="model.itemNumber" clearable placeholder="请输入货号"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="规格">
          <el-input v-model="model.specifications" placeholder="请输入规格" size="small"></el-input>
            <el-input v-model="model.specifications" clearable placeholder="请输入规格"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="计量单位">
          <el-input v-model="model.unit" placeholder="请输入计量单位" size="small"></el-input>
            <el-input v-model="model.unit" clearable placeholder="请输入计量单位"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="参考价格">
          <el-input-number v-model="model.referencePrice" :min="0" :precision="2" :step="0.01" placeholder="请输入参考价格"
                           size="small"></el-input-number>
                             controls-position="right" style="width: 100%"></el-input-number>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="存放位置">
          <el-select v-model="model.contentId" placeholder="请选择存放位置" size="small" style="width: 100%">
            <el-option v-for="(v, i) in procurementSuppliesContentOptions" :key="i" :label="v.nodeName"
                       :value="v.id"></el-option>
          </el-select>
            <el-input v-model="model.storageLocation" clearable placeholder="请输入存放位置"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="负责人">
          <el-select v-model="model.personInCharge" placeholder="请选择负责人" size="small" style="width: 100%">
            <el-select v-model="model.personInCharge" placeholder="请选择负责人" style="width: 100%">
            <el-option v-for="(v, i) in userOptions" :key="i" :label="v.name" :value="v.id"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      </el-row>

      <div class="section-title">库存与供应商</div>
      <el-row :gutter="24">
      <el-col :span="12">
        <el-form-item label="库存上限">
          <el-input-number v-model="model.upperLimit" :min="0" :step="1" placeholder="请输入库存上限" size="small"></el-input-number>
            <el-input-number v-model="model.upperLimit" :min="0" :step="1" placeholder="请输入库存上限"
                             controls-position="right" style="width: 100%"></el-input-number>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="库存下限">
          <el-input-number v-model="model.lowerLimit" :min="0" :step="1" placeholder="请输入库存下限" size="small"></el-input-number>
            <el-input-number v-model="model.lowerLimit" :min="0" :step="1" placeholder="请输入库存下限"
                             controls-position="right" style="width: 100%"></el-input-number>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="供应商">
          <el-select v-model="model.supplier" placeholder="请选择供应商" size="small" style="width: 100%">
            <el-select v-model="model.supplier" placeholder="请选择供应商" style="width: 100%">
            <el-option v-for="(v, i) in supplierOptions" :key="i" :label="v.supplierName"
                       :value="v.supplierManagementId"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      </el-row>

      <div class="section-title">图标与附件</div>
      <el-row :gutter="24">
      <el-col :span="24">
        <el-form-item label="耗材图标">
          <div class="rows">
            <el-input v-model="model.consumablesIcon" placeholder="请输入耗材图标" size="small" style="width: 90%;"/>
            <div class="upload-row">
              <el-input v-model="model.consumablesIcon" clearable placeholder="上传后自动填充，也可手动填写"></el-input>
            <el-upload
              ref="upload"
              :action="action"
              :headers="uploadHeader"
              :on-success="onSuccessIcon"
              :show-file-list="false"
              style="float: left; margin: 0 12px 0 20px;"
            >
              <template #trigger><el-button  class="uploadFile" size="small" type="primary">浏览</el-button></template>
                <el-button :icon="$icon('el-icon-upload2')" type="primary" plain>上传</el-button>
            </el-upload>
          </div>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="耗材附件">
          <div class="rows">
            <el-input v-model="model.attachment" placeholder="请输入耗材附件" size="small" style="width: 90%;"/>
            <div class="upload-row">
              <el-input v-model="model.attachment" clearable placeholder="上传后自动填充，也可手动填写"></el-input>
            <el-upload
              ref="upload"
              :action="action"
                :headers="uploadHeader"
              :on-success="onSuccessFile"
              :show-file-list="false"
              :headers="uploadHeader"
              style="float: left; margin: 0 12px 0 20px;"
            >
              <template #trigger><el-button  class="uploadFile" size="small" type="primary">浏览</el-button></template>
                <el-button :icon="$icon('el-icon-upload2')" type="primary" plain>上传</el-button>
            </el-upload>
          </div>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="备注">
          <el-input
            v-model="model.remark"
            :rows="2"
            placeholder="请输入备注"
            size="small"
            type="textarea"
          >
          </el-input>
      </el-row>

      <el-form-item class="remark-item" label-width="0">
        <el-input v-model="model.remark" :rows="4" placeholder="请输入备注" type="textarea"></el-input>
        </el-form-item>
      </el-col>
    </el-form>
    <template #footer><span  class="dialog-footer">
            <el-button @click="resetForm">取 消</el-button>
@@ -130,7 +128,6 @@
  addProcurementSuppliesList,
  updateProcurementSuppliesList,
  selectSupplierManagementAll,
  getProcurementSuppliesContentsNodeNames,
  selectUserCondition
} from '@/api/cnas/externalService/serviceAndSupplyPro/serviceAndSupplyPro'
export default {
@@ -142,7 +139,6 @@
        consumablesIcon: undefined,
        attachment: undefined,
      },
      procurementSuppliesContentOptions: [],
      userOptions: [],
      supplierOptions: [],
      rules: {
@@ -163,7 +159,6 @@
    }
  },
  mounted() {
    this.findProcurementSuppliesContentOptions()
    this.findUserOptions()
    this.findSupplierOptions()
  },
@@ -178,16 +173,10 @@
        console.log("row", row)
        this.model = row
      } else {
        this.model = {}
        // 新增时挂在当前左树选中的目录节点下，存放位置改为手动填写
        this.model = { contentId: this.contentsId }
      }
      this.dialogVisible = true
    },
    findProcurementSuppliesContentOptions() {
      getProcurementSuppliesContentsNodeNames().then(res => {
        if (res.code === 200) {
          this.procurementSuppliesContentOptions = res.data
        }
      })
    },
    findUserOptions() {
      selectUserCondition().then(res => {
@@ -212,6 +201,11 @@
    submit() {
      this.$refs.modelForm.validate((valid) => {
        if (valid) {
          // 新增的耗材挂在左侧选中的目录节点下，未选节点会保存成列表里看不到的数据
          if (!this.model.id && !this.contentsId) {
            this.$message.warning('请先在左侧选择耗材目录节点')
            return
          }
          if (this.model.id) {
            updateProcurementSuppliesList(this.model).then(res => {
              if (res.code === 200) {
@@ -238,15 +232,45 @@
  margin: 6vh auto 50px !important;
}
:deep(.el-dialog__body) {
  max-height: 42em;
  max-height: 70vh;
  overflow-y: auto;
  padding: 24px 32px;
}
.rows {
  width: 100%;
.section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 15px;
  font-weight: 600;
  color: var(--lims-text);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--lims-divider);
  margin: 8px 0 20px;
}
:deep(.el-form-item__content) {
  line-height: 39px;
.section-title:not(:first-child) {
  margin-top: 28px;
}
.section-title::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 15px;
  border-radius: 2px;
  background: var(--el-color-primary);
  margin-right: 8px;
}
.upload-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}
.upload-row .el-input {
  flex: 1;
}
:deep(.el-form-item) {
  margin-bottom: 20px;
}
.remark-item {
  margin-top: 28px;
}
</style>