udi-spms-vue/src/views/purchase/product/supProductEditDialog.vue

<template>
  <div>
    <el-form
      :model="inputQuery"
      :rules="rules"
      ref="inputQuery"
      label-width="150px"
      style="margin-top: -30px"
    >
      <el-card class="el-card">
        <div style="float: right">
          <el-button
            type="primary"
            size="mini"
            icon="search"
            v-if="inputQuery.auditStatus == 0"
            @click="selectProduct()"
          >选入物资字典
          </el-button
          >
          <el-button
            type="primary"
            size="mini"
            icon="search"
            v-if="inputQuery.auditStatus == 0"
            @click="onModifySubmit(0)"
          >草稿保存
          </el-button
          >
          <el-button
            type="primary"
            size="mini"
            icon="search"
            v-if="inputQuery.auditStatus == 0|| inputQuery.auditStatus == 6"
            @click="onModifySubmit(6)"
          >提交审核
          </el-button
          >
          <el-button
            type="primary"
            size="mini"
            icon="search"
            v-if="inputQuery.auditStatus == 4|| inputQuery.auditStatus == 1|| inputQuery.auditStatus == 2"
            @click="onModifySubmit(3)"
          >提交审核
          </el-button
          >
        </div>
        <el-row :gutter="20" class="el-row" type="flex" style="margin-top:50px">
          <el-col :span="10" class="el-col">
            <el-form-item label="所属供应商:" prop="customerId">
              <el-select
                v-model="inputQuery.customerId"
                filterable
                remote
                clearable="true"
                reserve-keyword
                disabled
                placeholder="请选择供应商"
                :remote-method="findMethod"
                :loading="loading"
                style="width: 100%;"
                @change="supChange"
              >
                <el-option
                  v-for="item in fromOptions"
                  :key="item.customerId"
                  :label="item.companyName"
                  :value="item.customerId"
                >
                  <span style="float: left">{{ item.companyName }}</span>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="10" class="el-col">
            <el-form-item label="所属生产企业:" prop="manufacturerIdFk">
              <el-select
                v-model="inputQuery.companyName"
                filterable
                remote
                clearable="true"
                reserve-keyword
                disabled
                placeholder="请选择生产企业"
                :remote-method="findPMMethod"
                :loading="loading"
                style="width: 100%;"
              >
                <el-option
                  v-for="item in fromPMOptions"
                  :key="item.manufacturerId"
                  :label="item.companyName"
                  :value="item.manufacturerId"
                >
                  <span style="float: left">{{ item.companyName }}</span>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20" class="el-row" type="flex">
          <el-col :span="10" class="el-col">
            <el-form-item label="产品通用名称:" prop="recordProductName">
              <el-input
                size="small"
                disabled
                placeholder="请输入内容"
                v-model="inputQuery.recordProductName"
                @input="change()"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10" class="el-col">
            <el-form-item label="注册/备案人名称:" prop="recordPeopleName">
              <el-input
                size="small"
                disabled
                placeholder="请输入内容"
                v-model="inputQuery.recordPeopleName"
                @input="change()"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20" class="el-row" type="flex">
          <el-col :span="10" class="el-col">
            <el-form-item label="产品类别:" prop="hchzsb">
              <el-select
                size="small"
                disabled
                v-model="inputQuery.hchzsb"
                placeholder="产品类别"
                style="width: 100%;"
              >
                <el-option label="耗材" value="耗材"></el-option>
                <el-option label="设备" value="设备"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="10" class="el-col">
            <el-form-item label="器械类别:" prop="qxlb">
              <el-select
                size="small"
                v-model="inputQuery.productType"
                placeholder="器械类别"
                disabled
                style="width: 100%;"
              >
                <el-option label="器械" value="器械"></el-option>
                <el-option label="诊断试剂" value="诊断试剂"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20" class="el-row" type="flex">
          <el-col :span="10" class="el-col">
            <el-form-item label="注册/备案号:" prop="recordCode">
              <el-input
                size="small"
                placeholder="请输入内容"
                v-model="inputQuery.recordCode"
                @input="change()"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10" class="el-col">
            <el-form-item label="器械目录分类编码:" prop="productDirectoryCode">
              <el-input
                size="small"
                placeholder="请输入内容"
                disabled
                v-model="inputQuery.productDirectoryCode"
                @input="change()"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>


        <!--        <el-row :gutter="20" class="el-row" type="flex">-->
        <!--          <el-col :span="10" class="el-col">-->
        <!--            <el-form-item label="产品描述:"  prop="cpms">-->
        <!--              <el-input-->
        <!--                size="small"-->
        <!--                placeholder="请输入内容"-->
        <!--                v-model="inputQuery.cpms"-->
        <!--                @input="change()"-->
        <!--              ></el-input>-->
        <!--            </el-form-item>-->
        <!--          </el-col>-->
        <!--          <el-col :span="10" class="el-col">-->
        <!--            <el-form-item label="规格型号:"  prop="specification">-->
        <!--              <el-input-->
        <!--                size="small"-->
        <!--                type="textarea"-->
        <!--                autosize-->
        <!--                placeholder="请输入内容"-->
        <!--                v-model="inputQuery.specification"-->
        <!--                @input="change()"-->
        <!--              ></el-input>-->
        <!--            </el-form-item>-->
        <!--          </el-col>-->
        <!--        </el-row>-->


        <el-row :gutter="20" class="el-row" type="flex">
          <el-col :span="20" class="el-col">
            <el-form-item label="备注:" prop="remark">
              <el-input
                type="textarea"
                size="small"
                placeholder="请输入内容"
                v-model="inputQuery.remark"
                @input="change()"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>

    </el-form>
    <el-card class="el-card">
      <div style="float:right ">
        <el-button type="primary" size="mini" icon="search" @click="selectCert"
        >选入资质证书
        </el-button
        >
        <el-button
          type="primary"
          size="mini"
          icon="search"
          @click="addCert()"
        >添加资质证书
        </el-button
        >
      </div>
      <el-table v-loading="certLoading" :data="certList" style="width: 100%;margin-top: 40px" border
                highlight-current-row>
        <el-table-column type="index" label="序号" width="50"></el-table-column>
        <el-table-column label="证书名称" prop="name"></el-table-column>
        <el-table-column label="证书编号" prop="code"></el-table-column>
        <el-table-column label="生效期" prop="vailDate"></el-table-column>
        <el-table-column label="失效期" prop="expireDate"></el-table-column>
        <el-table-column label="审核状态" prop="auditStatus" width="120">
          <template slot-scope="scope">
            <el-tag :type="(scope.row.auditStatus) | statusFilterType">
              {{ checkFlag[scope.row.auditStatus] }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="状态" prop="status" width="120">
          <template slot-scope="scope">
            <el-tag :type="(scope.row.status) | statusType">
              {{ statusFlag[scope.row.status] }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="备注" prop="remark"></el-table-column>
        <el-table-column label="操作" width="150">
          <template slot-scope="scope">

            <el-button
              type="text"
              size="small"
              @click.native="addCert(scope.row)"
            >编辑
            </el-button
            >
            <el-button type="text" size="mini" @click.native="showImgViewer(scope.row)">预览</el-button>
            <el-button
              type="text"
              size="small"
              :disabled="scope.row.auditStatus === 1"
              @click.native="deleteCompanyCert(scope.row)"
            >删除
            </el-button
            >
            <el-button
              type="text"
              size="small"
              v-if="scope.row.auditStatus === 2"
              @click.native.stop="rejectInfo(scope.row)"
            >说明
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-image-viewer v-if="imgViewerVisible" style="z-index:9999" :on-close="closeImgViewer"
                       :url-list="imgList"/>
      <pagination
        v-show="certTotal>0"
        :total="certTotal"
        :page.sync="certQuery.page"
        :limit.sync="certQuery.limit"
        @pagination="certHandleCurrentChange"

      ></pagination>

    </el-card>

    <el-dialog
      title="添加资质证书"
      :visible.sync="addCertVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      width="70%"
      v-if="addCertVisible"
      append-to-body
      @close='closeLocalDialog'
    >
      <companyAddCert
        :closeDialog="closeLocalDialog"
        :inputQuery="inputQuery"
        :addType="addType"
        :editTye="editTye"
      ></companyAddCert>
    </el-dialog>
    <el-dialog
      title="选入资质证书"
      :visible.sync="selectCertVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      width="70%"
      v-if="selectCertVisible"
      append-to-body
      @close='closeLocalDialog'
    >
      <supCertSetSelectDialog
        :certType="certType"
        :manufacturerId="manufacturerId"
        :productId="productId"
        :customerId="customerId"
        :closeDialog="closeLocalDialog"
      ></supCertSetSelectDialog>
    </el-dialog>


    <el-dialog
      title="选入物资字典信息"
      :visible.sync="selectSingleProductVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      width="70%"
      v-if="selectSingleProductVisible"
      append-to-body
      @close='closeLocalDialog'
    >
      <companyProducts
        :selectType="selectType"
        :closeSelDialog="closeSelDialog"
      ></companyProducts>
    </el-dialog>

  </div>
</template>

<script>
import {
  getRegistrationInfo,
  addOrModifyRegistration,
  bindProduct
} from "../../../api/purchase/suppliersRegistrationBasic";
import {regionDataPlus} from "element-china-area-data";
import draggable from "vuedraggable";
import {getSupComapnys, previewImage} from '@/api/purchase/supCompany'
import {getCompanyList} from "@/api/purchase/supManufacturer";
import {deleteCompanyCert, filterCompanyCert} from "@/api/purchase/companyCert";
import companyAddCert from "@/views/purchase/cert/supCertAddDialog";
import supCertSetSelectDialog from "@/views/purchase/cert/supCertSetSelectDialog";
import companyProducts from "@/views/purchase/company/companyProducts";
import {getUUID} from "@/utils/strUtil";
import ElImageViewer from "element-ui/packages/image/src/image-viewer"

export default {
  name: "supProductEditDialog",
  props: {
    closeRegistrationDialog: {
      type: Function,
      required: true,
    },
    inputQuery: {
      type: Object,
      required: true,
    },
    editType: {
      type: Object,
      required: true,
    },
    currentManufacturer: {
      type: Object,
      required: true,
    }
  },
  data() {
    return {
      BASE_URL: process.env.VUE_APP_BASE_API,
      fromOptions: [],
      fromPMOptions: [],
      imgViewerVisible: false,
      imgList: [],
      pmQuery: {
        customerId: null,
        companyName: null,
        page: 1,
        limit: 10,
      },
      loading: false,
      classesDisplay: false,
      cuStatus: 0,
      selectedOptions: [],
      selectedOptions2: [],
      options: regionDataPlus,
      rules: {

        customerId: [
          {
            required: true,
            message: "请选择供应商",
            trigger: "change"
          }
        ],


        // manufacturerIdFk: [
        //     {
        //         required: true,
        //         message: "请选择生产企业",
        //         trigger: "change"
        //     }
        // ],

        recordCode: [
          {
            required: true,
            message: "请输入注册/备案号",
            trigger: "blur"
          }
        ],
        recordProductName: [
          {
            required: true,
            message: "请输入注册/备案产品名称",
            trigger: "blur"
          }
        ],
        productManageType: [
          {
            required: true,
            message: "请选择医疗器械管理类别",
            trigger: "change"
          }
        ],
        productType: [
          {
            required: true,
            message: "请选择器械类别",
            trigger: "change"
          }
        ],
        recordPeopleName: [
          {
            required: true,
            message: "请输入注册/备案人名称",
            trigger: "change"
          }
        ],
        // productDirectoryCode: [
        //     {
        //         required: true,
        //         message: "请输入器械目录分类编码",
        //         trigger: "change"
        //     }
        // ],
        specification: [
          {
            required: true,
            message: "请输入规格型号",
            trigger: "change"
          }
        ],
      },
      fileList: [],
      fileList2: [],

      certQuery: {
        customerId: null,
        manufacturerIdFk: null,
        page: 1,
        limit: 20
      },
      certList: [],
      certTotal: 0,
      certLoading: false,
      addCertVisible: false,
      certFileUrl: "",
      addType: "3", //证书类型：1:供应商；2.生产企业；3.产品品种
      checkFlag: {
        0: "草稿",
        1: "已通过",
        2: "已拒绝",
        3: "变更未审核",
        6: "未审核",
      },
      editTye: 1,
      statusFlag: {
        0: "有效",
        1: "失效",
      },
      manufacturerId: null,
      productId: null,
      customerId: null,
      selectCertVisible: false,
      selectSingleProductVisible: false,
      selectType: 1,
      certType: 3,
    };
  },
  created() {
    if (this.editType == 0) {
      this.inputQuery.productId = getUUID("");
      this.inputQuery.customerId = this.currentManufacturer.customerId;
      this.inputQuery.companyName = this.currentManufacturer.companyName;

    } else {
      this.getCompanyCertList();
      this.pmQuery.customerId = this.inputQuery.customerId;
      this.inputQuery.companyName = this.currentManufacturer.companyName;

    }
    this.cuStatus = this.inputQuery.cuStatus;
    this.manufacturerId = this.inputQuery.manufacturerId
    this.productId = this.inputQuery.productId
    this.findMethod();
    this.findPMMethod();
    this.certFileUrl = this.BASE_URL + "/udiwms/image/register/file/getImage?type=image2&name=";

  },
  components: {
    draggable, companyAddCert, supCertSetSelectDialog, companyProducts, ElImageViewer
  },
  methods: {
    onModifySubmit(val) {
      if (val != 0) {
        if (this.cuStatus != 1) {
          this.$message.error("生产企业未通过审核不能提交！");
          return;
        }
      }
      if(val==3){
        this.$confirm( "已审核通过，是否需要重新提交变更", {
          confirmButtonText: "确定",
          type: "warning",
          showCancelButton: false,
        })
          .then(() => {
            this.$refs['inputQuery'].validate(valid => {
              if (valid) {
                // this.inputQuery.auditStatus = val;


                let formData = JSON.parse(JSON.stringify(this.inputQuery));
                formData.manufacturerIdFk = this.manufacturerId;
                formData.auditStatus = val;
                this.loading = true;
                let urlName = this.editType == 0 ? 'add' : 'update';
                addOrModifyRegistration(formData, urlName).then(response => {
                  this.loading = false;
                  if (response.code === 20000) {
                    this.closeRegistrationDialog(true);
                    this.$message.success("保存成功");
                  } else {
                    this.$message.error(response.message);
                  }
                });
              } else {
                return false;
              }
            });
          });
      }else{
        this.$refs['inputQuery'].validate(valid => {
          if (valid) {
            // this.inputQuery.auditStatus = val;


            let formData = JSON.parse(JSON.stringify(this.inputQuery));
            formData.manufacturerIdFk = this.manufacturerId;
            formData.auditStatus = val;
            this.loading = true;
            let urlName = this.editType == 0 ? 'add' : 'update';
            addOrModifyRegistration(formData, urlName).then(response => {
              this.loading = false;
              if (response.code === 20000) {
                this.closeRegistrationDialog(true);
                this.$message.success("保存成功");
              } else {
                this.$message.error(response.message);
              }
            });
          } else {
            return false;
          }
        });
      }
    },
    toViewCompanyCert(row) {
      window.open(this.certFileUrl + row.filePath);
    },
    rejectInfo(row) {
      this.$confirm(row.auditComment, "拒绝说明", {
        confirmButtonText: "确定",
        type: "warning",
        showCancelButton: false,
      })
        .then(() => {
        });

    },
    findMethod(query) {
      this.fromOptions = [];
      let cQuery = {
        companyName: query,
      };
      getSupComapnys(cQuery)
        .then((response) => {
          this.loading = false;
          this.fromOptions = response.data.list || [];
        })
        .catch(() => {
          this.loading = false;
        });
    },
    supChange(val) {
      this.pmQuery.customerId = val;
      this.findPMMethod();
    },
    findPMMethod(key) {
      this.fromPMOptions = [];
      this.pmQuery.companyName = key;
      getCompanyList(this.pmQuery)
        .then((response) => {
          this.loading = false;
          this.fromPMOptions = response.data.list || [];
          this.total = response.data.total || 0;
        })
        .catch(() => {
          this.loading = false;
          this.fromPMOptions = [];
          this.total = 0;
        });
    },
    closeLocalDialog() {
      this.addCertVisible = false;
      this.selectCertVisible = false;
      this.getCompanyCertList();
    },
    isAssetTypeAnImage(ext) {
      return [
        'png', 'jpg', 'jpeg', 'bmp', 'gif', 'webp', 'psd', 'svg', 'tiff'].indexOf(ext.toLowerCase()) !== -1;
    },
    showImgViewer(row) {
        this.certFileUrl = this.BASE_URL + "/udiwms/image/register/file/getImage?type=image2&name=";
        this.imgList = [];
        previewImage({imageUrl: row.filePath, certFileUrl: this.certFileUrl}).then(response => {
          if (response.code === 20000) {
            this.imgList=response.data;
          }
        });
        this.imgViewerVisible = true;
        const m = (e) => {
          e.preventDefault()
        };
        document.body.style.overflow = 'hidden';
        document.addEventListener("touchmove", m, false); // 禁止页面滑动
    },
    closeImgViewer() {
      this.imgViewerVisible = false;
      const m = (e) => {
        e.preventDefault()
      };
      document.body.style.overflow = 'auto';
      document.removeEventListener("touchmove", m, true);
    },

    closeSelDialog(val) {
      if (val != null) {
        let query = {
          productId: this.inputQuery.productId,
          relIdFk: val,
          manufacturerId: this.inputQuery.manufacturerIdFk,
          customerId: this.inputQuery.customerId,
          companyName: this.inputQuery.companyName,
          auditStatus: this.inputQuery.auditStatus

        };
        bindProduct(query).then(response => {
          this.loading = false;
          if (response.code === 20000) {
            this.inputQuery = response.data;
            this.selectSingleProductVisible = false;
          } else {
            this.$message.error(response.message);
          }
        });
      }
    },

    addCert(row) {
      if (this.$isNotBlank(row)) {
        this.formName = 2
        this.inputQuery.formData = row;
        this.editTye = 2;
      } else {
        this.formName = 1;
        this.editTye = 1;
        this.inputQuery.formData = {};
      }
      this.addCertVisible = true;
    },

    selectCert() {
      this.customerId = this.inputQuery.customerId;
      this.selectCertVisible = true;
    },

    deleteCompanyCert(row) {
      this.$confirm("是否删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.certLoading = true;
        let tquery = {
          id: row.id,
          filePath: row.filePath,
        };
        deleteCompanyCert(tquery)
          .then((response) => {
            this.certLoading = false;
            if (response.code === 20000) {
              this.getCompanyCertList();
              this.$message({
                type: "success",
                message: "删除成功！",
              });
            } else {
              this.$message.error(response.message);
            }
          })
          .catch(() => {
            this.certLoading = false;
          });
      }).catch(() => {
      });
    },
    certHandleCurrentChange(val) {
      this.certQuery.page = val.page;
      this.getCompanyCertList();
    },
    getCompanyCertList() {
      this.certLoading = true;
      this.certQuery.customerId = this.inputQuery.customerId;
      this.certQuery.manufacturerIdFk = this.inputQuery.manufacturerIdFk;
      this.certQuery.productIdFk = this.inputQuery.productId;
      filterCompanyCert(this.certQuery)
        .then((response) => {
          this.certLoading = false;
          this.certList = response.data.list || [];
          this.certTotal = response.data.total
        })
        .catch(() => {
          this.certLoading = false;
          this.certList = [];
        });
    },


    selectProduct() {
      this.selectSingleProductVisible = true;
    },
  },
  filters: {
    statusFilterType(status) {
      const statusMap = {
        0: "warning",
        1: "success",
        2: "danger",
        6: "warning",
      };
      return statusMap[status];
    },
  },

};
</script>
<style>
.itemTag {
  float: left;
  text-align: left;
  margin-top: 10px;
  width: 120px;
}

.text {
  width: 100%;
  font-size: 13px;
  font-family: "Microsoft YaHei";
}

.el-card {
  margin-right: 20px;
  margin-top: 15px;
  /*transition: all .5s;*/
}

.el-row {
  display: flex;
  flex-wrap: wrap;
}

.el-col {
  border-radius: 4px;
  flex-wrap: wrap;
}
</style>