ConsumSupplier-Platform/src/views/page/qualityManagement-sup/information-filling/index.vue

<template>
  <div>
    <el-alert
      v-if="infoData.stas == 'A' || infoData.stas == 'R'"
      style="margin-bottom: 10px"
      title="请您完成资质填报，并等待通过审核后再进入系统，在此之前您可通过系统查看资质审批进度。"
      type="warning"
      show-icon
      effect="dark"
      :closable="false"
    >
    </el-alert>
    <!-- <div
      class="common-card"
      v-if="infoData.stas == 'B' || infoData.stas == '0'"
    >
      <h3>审批状态</h3>
      <yl-step></yl-step>
    </div> -->
    <el-form
      :model="infoData"
      ref="planForm"
      label-width="150px"
      class="grid-form-class"
    >
      <div class="common-card">
        <h3>工商信息</h3>
        <div class="right-type" style="color: #3c64dc; font-weight: 800">
          {{ $store.state.user.username }}
        </div>
        <div class="form-body">
          <div class="flex-css">
            <el-form-item
              label="统一社会信用代码"
              prop="uscc"
              :rules="rules.required"
            >
              <el-input
                v-if="infoData.stas == 'A' || infoData.stas == 'R'"
                v-model="infoData.uscc"
                placeholder="请输入统一社会信用代码"
              ></el-input>
              <div class="content" v-else>
                {{ infoData.uscc }}
              </div>
            </el-form-item>
            <el-form-item
              label="法定代表人"
              prop="legrepName"
              :rules="rules.required"
            >
              <el-input
                v-if="infoData.stas == 'A' || infoData.stas == 'R'"
                v-model="infoData.legrepName"
                placeholder="请输入法定代表人"
              ></el-input>
              <div class="content" v-else>
                {{ infoData.legrepName }}
              </div>
            </el-form-item>
            <el-form-item
              label="登记状态"
              prop="regStas"
              :rules="rules.required"
            >
              <el-input
                v-if="infoData.stas == 'A' || infoData.stas == 'R'"
                v-model="infoData.regStas"
                placeholder="请输入登记状态"
              ></el-input>
              <div class="content" v-else>
                {{ infoData.regStas }}
              </div>
            </el-form-item>
          </div>
          <div class="flex-css">
            <el-form-item
              label="成立日期"
              prop="estbdat"
              :rules="rules.dateRequired"
            >
              <el-date-picker
                v-if="infoData.stas == 'A' || infoData.stas == 'R'"
                v-model="infoData.estbdat"
                type="date"
                placeholder="请选择成立日期"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
              <div class="content" v-else>
                {{ infoData.estbdat }}
              </div>
            </el-form-item>
            <el-form-item
              label="国标行业"
              prop="natstdIndu"
              :rules="rules.required"
            >
              <el-input
                v-if="infoData.stas == 'A' || infoData.stas == 'R'"
                v-model="infoData.natstdIndu"
                placeholder="请输入国标行业"
              ></el-input>
              <div class="content" v-else>
                {{ infoData.natstdIndu }}
              </div>
            </el-form-item>
            <el-form-item
              label="注册资本"
              prop="regCapt"
              :rules="rules.required"
            >
              <el-input
                v-if="infoData.stas == 'A' || infoData.stas == 'R'"
                v-model="infoData.regCapt"
                placeholder="请输入注册资本"
              ></el-input>
              <div class="content" v-else>
                {{ infoData.regCapt }}
              </div>
            </el-form-item>
          </div>
          <div class="flex-css">
            <el-form-item
              label="实缴资本"
              prop="arrCapt"
              :rules="rules.required"
            >
              <el-input
                v-if="infoData.stas == 'A' || infoData.stas == 'R'"
                v-model="infoData.arrCapt"
                placeholder="请输入实缴资本"
              ></el-input>
              <div class="content" v-else>
                {{ infoData.arrCapt }}
              </div>
            </el-form-item>
            <el-form-item
              label="组织机构代码"
              prop="orgCode"
              :rules="rules.required"
            >
              <el-input
                v-if="infoData.stas == 'A' || infoData.stas == 'R'"
                v-model="infoData.orgCode"
                placeholder="请输入组织机构代码"
              ></el-input>
              <div class="content" v-else>
                {{ infoData.orgCode }}
              </div>
            </el-form-item>
            <el-form-item
              label="工商注册号"
              prop="bizRegno"
              :rules="rules.required"
            >
              <el-input
                v-if="infoData.stas == 'A' || infoData.stas == 'R'"
                v-model="infoData.bizRegno"
                placeholder="请输入工商注册号"
              ></el-input>
              <div class="content" v-else>
                {{ infoData.bizRegno }}
              </div>
            </el-form-item>
          </div>
          <div class="flex-css">
            <el-form-item
              label="纳税人识别号"
              prop="tin"
              :rules="rules.required"
            >
              <el-input
                v-if="infoData.stas == 'A' || infoData.stas == 'R'"
                v-model="infoData.tin"
                placeholder="请输入纳税人识别号"
              ></el-input>
              <div class="content" v-else>
                {{ infoData.tin }}
              </div>
            </el-form-item>
            <el-form-item
              label="企业类型"
              prop="entpType"
              :rules="rules.required"
            >
              <el-input
                v-if="infoData.stas == 'A' || infoData.stas == 'R'"
                v-model="infoData.entpType"
                placeholder="请输入企业类型"
              ></el-input>
              <div class="content" v-else>
                {{ infoData.entpType }}
              </div>
            </el-form-item>
            <el-form-item
              label="营业期限"
              prop="bizDdln"
              :rules="rules.dateRequired"
            >
              <el-date-picker
                v-if="infoData.stas == 'A' || infoData.stas == 'R'"
                v-model="infoData.bizDdln"
                type="datetime"
                placeholder="请选择营业期限"
                value-format="yyyy-MM-dd HH:mm:ss"
              >
              </el-date-picker>
              <div class="content" v-else>
                {{ infoData.bizDdln }}
              </div>
            </el-form-item>
          </div>
          <div class="flex-css">
            <el-form-item
              label="纳税人资质"
              prop="txperCert"
              :rules="rules.required"
            >
              <el-input
                v-if="infoData.stas == 'A' || infoData.stas == 'R'"
                v-model="infoData.txperCert"
                placeholder="请输入纳税人资质"
              ></el-input>
              <div class="content" v-else>
                {{ infoData.txperCert }}
              </div>
            </el-form-item>
            <el-form-item label="所属地区" prop="regn" :rules="rules.required">
              <el-input
                v-if="infoData.stas == 'A' || infoData.stas == 'R'"
                v-model="infoData.regn"
                placeholder="请输入所属地区"
              ></el-input>
              <div class="content" v-else>
                {{ infoData.regn }}
              </div>
            </el-form-item>
            <el-form-item
              label="登记机关"
              prop="regOrg"
              :rules="rules.required"
            >
              <el-input
                v-if="infoData.stas == 'A' || infoData.stas == 'R'"
                v-model="infoData.regOrg"
                placeholder="请输入登记机关"
              ></el-input>
              <div class="content" v-else>
                {{ infoData.regOrg }}
              </div>
            </el-form-item>
          </div>
          <div class="flex-css">
            <el-form-item
              label="注册地址"
              prop="regAddrName"
              :rules="rules.required"
            >
              <el-input
                v-if="infoData.stas == 'A' || infoData.stas == 'R'"
                v-model="infoData.regAddrName"
                placeholder="请输入注册地址"
              ></el-input>
              <div class="content" v-else>
                {{ infoData.regAddrName }}
              </div>
            </el-form-item>
          </div>
          <div class="flex-css">
            <el-form-item
              label="经营范围"
              prop="bizScp"
              :rules="rules.required"
            >
              <el-input
                v-if="infoData.stas == 'A' || infoData.stas == 'R'"
                type="textarea"
                v-model="infoData.bizScp"
                placeholder="请输入经营范围"
              ></el-input>
              <div class="content" v-else>
                {{ infoData.bizScp }}
              </div>
            </el-form-item>
          </div>
        </div>
      </div>
      <div class="common-card">
        <h3>联系人信息</h3>
        <div class="form-body">
          <div class="flex-css">
            <el-form-item
              label="联系人"
              prop="conerName"
              :rules="rules.required"
            >
              <el-input
                v-if="infoData.stas == 'A' || infoData.stas == 'R'"
                v-model="infoData.conerName"
                placeholder="请输入联系人"
              ></el-input>
              <div class="content" v-else>
                {{ infoData.conerName }}
              </div>
            </el-form-item>
            <el-form-item label="职务" prop="duty" :rules="rules.required">
              <el-input
                v-if="infoData.stas == 'A' || infoData.stas == 'R'"
                v-model="infoData.duty"
                placeholder="请输入职务"
              ></el-input>
              <div class="content" v-else>
                {{ infoData.duty }}
              </div>
            </el-form-item>
          </div>
          <div class="flex-css">
            <el-form-item label="联系电话" prop="tel" :rules="rules.phoneNum">
              <el-input
                v-if="infoData.stas == 'A' || infoData.stas == 'R'"
                v-model="infoData.tel"
                placeholder="请输入联系电话"
              ></el-input>
              <div class="content" v-else>
                {{ infoData.tel }}
              </div>
            </el-form-item>
            <el-form-item label="电子邮箱" prop="email" :rules="rules.email">
              <el-input
                v-if="infoData.stas == 'A' || infoData.stas == 'R'"
                v-model="infoData.email"
                placeholder="请输入电子邮箱"
              ></el-input>
              <div class="content" v-else>
                {{ infoData.email }}
              </div>
            </el-form-item>
          </div>
        </div>
      </div>
    </el-form>
    <!--列表-->
    <div class="common-card">
      <h3>经营资质</h3>
      <div class="right-type">
        <el-button
          v-if="infoData.stas == 'A' || infoData.stas == 'R'"
          class="lake-Blue"
          type="primary"
          icon="el-icon-plus"
          @click="handleAddOrEdit('create')"
          >新增
        </el-button>
      </div>
      <el-table
        v-loading="listLoading"
        element-loading-text="加载中"
        :data="infoData.quaList"
        fit
        stripe
        border
      >
        <template slot="empty">
          <img src="@/assets/nopage.png" alt />
          <p>暂无数据</p>
        </template>
        <el-table-column
          fixed
          type="index"
          label="序号"
          width="60"
        ></el-table-column>
        <el-table-column label="证书名称" prop="quaName" />
        <el-table-column label="证书编码" prop="quaCode" width="300" />
        <el-table-column label="发证日期" prop="issuDate" width="150" />
        <el-table-column label="截止日期" prop="endDate" width="150" />
        <el-table-column label="资质文件" prop="fileId" width="150">
          <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" width="150" />
        <el-table-column
          label="操作"
          width="150"
          v-if="infoData.stas == 'A' || infoData.stas == 'R'"
        >
          <template slot-scope="scope">
            <el-button
              class="cyan"
              type="text"
              @click="handleAddOrEdit('update', scope.row, scope.$index)"
              >编辑</el-button
            >
            <el-button class="red" type="text" @click="handleDelete(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div
      class="foot-button"
      v-if="infoData.stas == 'A' || infoData.stas == 'R'"
    >
      <el-button type="success" @click="handleSave" :loading="saveLoad"
        >保存</el-button
      >
      <el-button type="primary" @click="handleSubmit" :loading="submitLoad"
        >提交</el-button
      >
    </div>
    <!--添加/修改-->
    <el-dialog
      v-if="dialogFormVisible"
      :title="textMap[dialogStatus]"
      :visible.sync="dialogFormVisible"
      width="500px"
    >
      <el-form
        ref="dataForm"
        :model="temp"
        label-position="right"
        label-width="80px"
      >
        <el-form-item label="证书名称" prop="quaName" :rules="rules.required">
          <el-input v-model.trim="temp.quaName" />
        </el-form-item>
        <el-form-item label="证书编码" prop="quaCode" :rules="rules.required">
          <el-input
            :disabled="temp.type === 'updt'"
            v-model.trim="temp.quaCode"
          />
        </el-form-item>
        <el-form-item
          label="发证日期"
          prop="issuDate"
          :rules="rules.dateRequired"
        >
          <el-date-picker
            v-model="temp.issuDate"
            type="date"
            :picker-options="pickerStartOptions"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
            @change="timeSartAble"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item
          label="截止日期"
          prop="endDate"
          :rules="rules.dateRequired"
        >
          <el-date-picker
            v-model="temp.endDate"
            type="date"
            :picker-options="pickerEndOptions"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item
          label="资质文件"
          prop="fileId"
          :rules="rules.uploadRequired"
        >
          <yl-upload :fileId="temp.fileId" @getUpload="getUpload">
            <template v-slot:dec
              >只能上传pdf文件</template
            >
          </yl-upload>
        </el-form-item>
        <el-form-item label="备注" prop="memo">
          <el-input v-model.trim="temp.memo" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="commitData()"> 确认 </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import ylStep from "@/components/yl-step";
import ylUpload from "@/components/yl-upload";
import {
  getUserSplerInfoB,
  saveSplerInfo,
  submitSplerInfo
} from "@/api/qualityManagement-sup/information-filling";
import rules from "@/utils/rules";
export default {
  components: { ylUpload, ylStep },
  data() {
    return {
      saveLoad: false,
      submitLoad: false,
      rules,
      infoData: { quaList: [] },
      listLoading: false,
      planForm: {},
      dialogStatus: "",
      textMap: {
        update: "编辑",
        create: "添加"
      },
      pickerEndOptions: {
        disabledDate: date => {
          return date.getTime() < Date.now() - 24 * 60 * 60 * 1000;
        }
      },
      pickerStartOptions: {
        disabledDate: date => {
          return date.getTime() > Date.now() - 24 * 60 * 60 * 1000;
        }
      },
      dialogFormVisible: false,
      temp: {
        quaName: "",
        quaCode: "",
        issuDate: "",
        endDate: "",
        fileId: "",
        type: "",
        memo: ""
      }
    };
  },
  created() {
    this.getData();
  },
  methods: {
    //发证日期改变触发
    timeSartAble(tim) {},
    getUpload(id) {
      this.temp.fileId = id;
      if (id) {
        this.$refs.dataForm.clearValidate("fileId");
      } else {
        this.$refs.dataForm.validateField("fileId");
      }
    },
    //获取列表数据
    getData() {
      this.listLoading = true;

      getUserSplerInfoB()
        .then(response => {
          this.infoData = response.data;
          this.listLoading = false;
        })
        .catch(err => {
          this.listLoading = false;
        });
    },
    // 新增
    handleAddOrEdit(type, row, index) {
      if (type === "update") {
        this.temp = {
          index: index,
          quaName: row.quaName,
          quaCode: row.quaCode,
          issuDate: row.issuDate,
          endDate: row.endDate,
          fileId: row.fileId,
          type: "updt"
        };
      } else {
        this.temp = {
          quaName: "",
          quaCode: "",
          issuDate: "",
          endDate: "",
          fileId: "",
          type: "add"
        };
      }

      this.dialogStatus = type;
      this.dialogFormVisible = true;
      this.$nextTick(() => {
        this.$refs["dataForm"].clearValidate();
      });
    },

    //添加提交
    commitData() {
      if (this.temp.issuDate > this.temp.endDate) {
        this.$message({
          message: "发证日期不能大于截止日期",
          type: "warning"
        });
        return false;
      }
      if (this.temp.issuDate == this.temp.endDate) {
        this.$message({
          message: "发证日期不能等于截止日期",
          type: "warning"
        });
        return false;
      }
      if (this.temp.type === "add") {
        let flag = false;
        if (
          this.infoData &&
          this.infoData.quaList &&
          this.infoData.quaList.length > 0
        ) {
          this.infoData.quaList.forEach(item => {
            if (item.quaCode === this.temp.quaCode) {
              flag = true;
            }
          });
          if (flag) {
            this.$message({
              message: "证书编码不能为空且不能重复",
              type: "warning"
            });
            return false;
          }
        }
      }

      this.$refs["dataForm"].validate(valid => {
        if (valid) {
          if (this.temp.type === "add") {
            this.infoData.quaList.push(this.temp);
            this.$message.success("操作成功");
          } else {
            this.$set(this.infoData.quaList, this.temp.index, this.temp);
            this.$message.success("操作成功");
          }
          this.dialogFormVisible = false;
        }
      });
    },

    // 信息保存
    handleSave() {
      this.$refs["planForm"].validate(valid => {
        if (valid) {
          this.$confirm("确认保存", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
            .then(() => {
              this.saveLoad = true;
              saveSplerInfo(this.infoData)
                .then(response => {
                  this.$message({
                    message: "保存成功",
                    type: "success"
                  });
                  this.saveLoad = false;
                })
                .catch(() => {
                  this.saveLoad = false;
                });
            })
            .catch(() => {});
        }
      });
    },

    // 整体提交
    handleSubmit() {
      this.$refs["planForm"].validate(valid => {
        if (valid) {
          this.$confirm("确认提交", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
            .then(() => {
              this.submitLoad = true;
              submitSplerInfo(this.infoData)
                .then(response => {
                  this.$message({
                    message: "提交成功",
                    type: "success"
                  });
                  this.submitLoad = false;
                  this.getData();
                })
                .catch(() => {
                  this.submitLoad = false;
                });
            })
            .catch(() => {});
        }
      });
    },

    //删除
    handleDelete(row, status) {
      const index = this.infoData.quaList.indexOf(row);
      this.infoData.quaList.splice(index, 1);
    }
  }
};
</script>

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