ConsumSupplier-Platform/src/views/page/qualityManagement-sup/manufacturer-filling/manufacturerDetail.vue

<template>
  <!-- 供应商采购订单 已出库 -->
  <div class="common-box">
    <div class="common-card">
      <div>
        <h3>生产厂商资质</h3>
        <div class="right-type">
          <el-button
            style="margin-bottom: 10px"
            type="primary"
            @click="handleAdd()"
            >添加资质</el-button
          >
           <el-button
            style="margin-bottom: 10px"
            type="primary"
            @click="goBack()"
            >返回</el-button
          >
        </div>
      </div>
      <el-table
        v-loading="listLoading"
        element-loading-text="加载中"
        :data="tableData"
        fit
        stripe
        border
        :cell-class-name="tableColClassName"
      >
        <template slot="empty">
          <img src="@/assets/nopage.png" alt />
          <p>暂无数据</p>
        </template>
        <el-table-column fixed type="index" label="序号" width="60" />
        <el-table-column label="资质证书信息" prop="quaName"> </el-table-column>
        <el-table-column label="资质证书编号" prop="quaCode" />
        <el-table-column label="发证日期" prop="issuDate" />
        <el-table-column label="截止日期" prop="endDate" />
        <el-table-column label="资质证件" prop="fileId">
          <template slot-scope="scope">
            <yl-upload
              :fileId="scope.row.fileId"
              readonly
              v-if="scope.row.fileId"
            >
            </yl-upload>
          </template>
        </el-table-column>
        <el-table-column label="备注" prop="memo" />
         <el-table-column label="操作" width="100" fixed="right">
        <template slot-scope="scope">
          <el-button type="text" @click="quitData(scope.row)"
            >编辑</el-button
          >
        </template>
      </el-table-column>
      </el-table>
       <el-dialog
      class="addclass"
      width="30%"
      title="资质"
      :visible.sync="dialogFormVisible"
    >
      <el-form label-width="120px" :model="addform" ref="addForm">
        <el-form-item
          label="资质证书信息"
          prop="quaName"
          :rules="rules.required"
        >
          <el-input
            v-model="addform.quaName"
            placeholder="请输入资质证书信息"
            maxlength="50"
          ></el-input>
        </el-form-item>
        <el-form-item label="资质证书编号" prop="quaCode" :rules="rules.required">
          <el-input
            v-model="addform.quaCode"
            placeholder="请输入资质证书编号"
            maxlength="50"
          ></el-input>
        </el-form-item>

        <el-form-item label="发证时间" prop="issuDate" :rules="rules.dateRequired">
          <el-date-picker
            v-model.trim="addform.issuDate"
            type="date"
            :picker-options="TimeOption1"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="截止时间" prop="endDate" :rules="rules.dateRequired">
          <el-date-picker
            v-model.trim="addform.endDate"
            type="date"
            :picker-options="TimeOption"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </el-form-item>
        </el-form-item>
        <el-form-item label="资质证件" prop="fileId" :rules="rules.uploadRequired">
          <yl-upload :fileId="addform.fileId" @getUpload="getUpload" urlName="acco">
            <template v-slot:dec>只能上传pdf文件</template>
          </yl-upload>
          <!-- <yl-upload
                v-else
              :fileId="addform.fileId"
              readonly
            >
            </yl-upload> -->
        </el-form-item>
        <el-form-item label="备注" prop="memo">
          <el-input
            v-model="addform.memo"
            placeholder="请输入备注"
            maxlength="50"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button
          type="primary"
          v-preventReClick
          v-loading="btnLoading"
          @click="handledialog()"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    </div>
  </div>
</template>
<script>
import ylUpload from "@/components/yl-upload";
import rules from "@/utils/rules";
import { insertFacQua } from "@/api/consumCataManage-sup/index";
import { selectFacQua } from "@/api/qualityManagement-sup/information-filling";
export default {
  components: {
    ylUpload,
  },
  data() {
    return {
      tableData: [],
      rules,
      btnLoading: false,
      addform: {
        splerId: "",
        hiCode: "",
        quaName: "",
        quaCode: "",
        issuDate: "",
        endDate: "",
        fileId: "",
        memo: "",
      },
      TimeOption: {
        disabledDate(time) {
          return time.getTime() < Date.now();
        },
      },
      TimeOption1: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      },
      dialogFormVisible: false,
    };
  },
  mounted() {
    let { query } = this.$route;
    if (query.prodEntp) {
      this.updateData();
    }
  },
  methods: {
    //返回主页面
    goBack(){
        this.$router.push({
        name: "ManufacturerFilling",
      });
    },
    //编辑资质
    quitData(row) {
      let newRow = { ...row };
      this.addform = newRow;
      this.dialogFormVisible = true;
    },
    handleAdd() {
      this.dialogFormVisible = true;
      setTimeout(() => {
        this.$refs.addForm.clearValidate();
        this.addform = {
          splerId: "",
          hiCode: "",
          quaName: "",
          quaCode: "",
          issuDate: "",
          endDate: "",
          fileId: "",
          memo: "",
        };
      }, 0);
    },
    getUpload(id) {
      this.addform.fileId = id;
      if (id) {
        this.$refs.addForm.clearValidate("fileId");
      } else {
        this.$refs.addForm.validateField("fileId");
      }
    },
    // 确认
    handledialog() {
      this.$refs["addForm"].validate((valid) => {
        if (valid) {
          this.$confirm("确认提交", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              this.btnLoading = true;
              insertFacQua({
                ...this.addform,
                splerId: this.$store.state.user.orgId,
                prodEntp: this.$route.query.prodEntp,
              })
                .then((response) => {
                  this.$message({
                    message: "提交成功",
                    type: "success",
                  });
                  this.dialogFormVisible = false;
                  this.btnLoading = false;
                  this.$refs.addForm.resetFields();
                  this.updateData();
                })
                .catch(() => {
                  this.loading1 = false;
                  this.$message({
                    message: "提交失败",
                    type: "error",
                  });
                });
            })
            .catch(() => {});
        }
      });
    },
    //更新资质数据
    updateData() {
      let proEpt = this.$route.query.prodEntp;
      selectFacQua({ prodEntp: proEpt }).then((res) => {
        if (res.success == true) {
          if (
            res.data.records[0].facQuaList &&
            res.data.records[0].facQuaList.length > 0
          ) {
          }
          this.tableData = res.data.records[0].facQuaList;
        }
      });
    },
  },
};
</script>

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