spms-vue/src/views/purchase/supProductAudit.vue

<template>
  <div>

    <el-card class="el-card">
      <el-form :inline="true" :model="registrationQuery" class="query-form" size="mini">
        <el-row style="width: 100%">
          <el-form-item class="query-form-item">
            <el-input
                v-model="registrationQuery.recordProductName" clearable="true"
                placeholder="产品名称"
            ></el-input>
          </el-form-item>
          <el-form-item class="query-form-item">
            <el-input
                v-model="registrationQuery.recordCode" clearable="true"
                placeholder="注册备案号"
            ></el-input>
          </el-form-item>
          <el-form-item class="query-form-item">
            <el-input
                v-model="registrationQuery.recordPeopleName" clearable="true"
                placeholder="注册备案人"
            ></el-input>
          </el-form-item>

          <el-form-item class="query-form-item">
            <el-select
                v-model="registrationQuery.customerId"
                filterable
                remote
                clearable="true"
                reserve-keyword
                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-form-item class="query-form-item">
            <el-select
                v-model="registrationQuery.manufacturerIdFk"
                filterable
                remote
                clearable="true"
                reserve-keyword
                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-form-item>
            <el-button-group>
              <el-button
                  type="primary"
                  icon="el-icon-refresh"
                  @click="onReset2"
              ></el-button>
              <el-button type="primary" icon="search" @click="onSubmit2"
              >查询
              </el-button
              >
            </el-button-group>
          </el-form-item>

        </el-row>
      </el-form>
      <el-table v-loading="registrationLoading"
                :data="registrationList"
                style="width: 100%">
        <el-table-column type="index" label="序号" width="50"></el-table-column>
        <el-table-column label="注册/备案产品名称" prop="recordProductName" show-overflow-tooltip></el-table-column>
        <el-table-column label="注册/备案号" prop="recordCode" show-overflow-tooltip></el-table-column>
        <el-table-column label="注册/备案人名称" prop="recordPeopleName" show-overflow-tooltip></el-table-column>
        <el-table-column label="生产企业" prop="manufacturerName" show-overflow-tooltip></el-table-column>
        <el-table-column label="所属供应商" prop="supName" show-overflow-tooltip></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="操作" fixed="right" width="120">
          <template slot-scope="scope">
            <el-button
                type="text"
                size="small"
                @click.native.stop="registrationDialog(scope.row)"
            >审核
            </el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          :page-size="registrationQuery.limit"
          @current-change="certHandleCurrentChange"
          layout="prev, pager, next"
          :total="certTotal"
      >
      </el-pagination>
    </el-card>
    <el-dialog
        title="注册/备案凭证编辑"
        :visible.sync="registrationVisible"
        width="80%"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        v-if="registrationVisible"
        @close='closeDialog'
    >
      <suppliersRegistrationBasic
          :closeRegistrationDialog="closeDialog"
          :inputQuery="inputQuery"
          :editType="editType"
      ></suppliersRegistrationBasic>
    </el-dialog>
  </div>
</template>

<script>
import {getRegistrationList, deleteRegistration} from "../../api/purchase/suppliersRegistrationBasic";
import suppliersRegistrationBasic from "./supProductAuditDialog";
import {getSupComapnys} from "@/api/purchase/supCompany";
import {getCompanyList} from "@/api/purchase/supManufacturer";

export default {
  data() {
    return {
      loading: false,
      fromOptions: [],
      fromPMOptions: [],
      value: "",
      total: 0,
      checkFlag: {
        0: "未提交",
        1: "已通过",
        2: "已拒绝",
        6: "未审核",
      },
      list: [],
      registrationVisible: false,
      enterpriseId: "",
      registrationQuery: {
        customerId: null,
        manufacturerIdFk: null,
        auditStatus: "21",
        recordProductName: "",
        recordCode: "",
        recordPeopleName: "",
        page: 1,
        limit: 20
      },
      registrationList: [],
      certTotal: 0,
      registrationLoading: false,
      registrationId: "",
      fileUrl: "",

      pmQuery: {
        customerId: null,
        companyName: null,
        page: 1,
        limit: 10,
      },
      inputQuery: {},
      editType: 0,
    };
  },
  filters: {
    statusFilterType(status) {
      const statusMap = {
        0: "warning",
        1: "success",
        2: "danger",
        6: "warning",
      };
      return statusMap[status];
    },
    statusFilterName(status) {
      const statusMap = {
        0: "禁用",
        1: "正常",
        2: "未验证",
      };
      return statusMap[status];
    },
  },
  methods: {
    onReset2() {
      this.registrationQuery = {
        customerId: null,
        manufacturerIdFk: null,
        recordProductName: "",
        recordCode: "",
        recordPeopleName: "",
        auditStatus: "21",
        page: 1,
        limit: 20
      };
      this.getRegistrationList();
    },
    onSubmit2() {
      this.getRegistrationList();
    },
    registrationDialog(row) {
      this.registrationId = row.id;
      this.inputQuery = row;
      this.editType = 2;
      this.registrationVisible = true;
    },
    deleteRegistration(row) {
      this.$confirm("是否删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.certLoading = true;
        let tQuery = {
          id: row.id,
          filePath: row.filePath,
          filePath2: row.instructions,
        };
        deleteRegistration(tQuery)
            .then((response) => {
              this.certLoading = false;
              if (response.code === 20000) {
                this.getRegistrationList();
                this.$message({
                  type: "success",
                  message: "删除成功！",
                });
              } else {
                this.$message.error(response.message);
              }
            })
            .catch(() => {
              this.certLoading = false;
            });
      }).catch(() => {
      });
    },
    closeDialog() {
      this.registrationVisible = false;
      this.enterpriseId = null;
      this.registrationId = null;
      this.getList();
      this.registrationList = [];
    },
    getRegistrationList() {
      this.registrationLoading = true;
      getRegistrationList(this.registrationQuery)
          .then((response) => {
            this.registrationLoading = false;
            this.registrationList = response.data.list || [];
          })
          .catch(() => {
            this.registrationLoading = false;
            this.registrationList = [];
          });
    },


    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;
          });
    }
    ,

    certHandleCurrentChange(val) {
      this.registrationQuery.page = val;
      this.registrationList();
    }
  },
  components: {
    suppliersRegistrationBasic,
  },
  mounted() {
  },
  created() {
    this.findMethod();
    this.getRegistrationList();
  },
};
</script>