src/components/InfoForm/index.vue

<template>
  <div class="infoFormDialog">
    <div class="userSelect-input" @click="openDialog">
      <slot></slot>
    </div>
    <el-dialog
      :title="`${type == 'add' ? '新增' : '修改'}信息`"
      :close-on-click-modal="false"
      :visible.sync="visible"
      lock-scroll
      append-to-body
      width="80%"
      top="10vh"
      :modal-append-to-body="false"
      class="NCC-dialog NCC-dialog_center dialog-box"
      destroy-on-close
    >
      <div class="NCC-dialog-content">
        <el-form
        :model="infoForm"
        :rules="infoRules"
        ref="infoForm"
        size="small"
        v-loading="infoForm_loading"
        label-width="100px"
      >
        <el-row :gutter="20" style="margin: unset;">
          <el-col :span="24">
            <el-col :span="12">
              <el-form-item label="运营主体" prop="companyId">
                <el-select
                  v-model="infoForm.companyId"
                  placeholder="请选择运营主体"
                  clearable
                  v-loadMore="nextCompanyList"
                  style="width: 100%"
                  @change="companyChange"
                >
                  <el-option
                    v-for="item in companyOptions"
                    :key="item.id"
                    :label="item.companyName"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <companyForm />
            </el-col>
          </el-col>
          <el-col :span="24" v-if="isShowCompanyInfo">
            <div class="company-info">
              <div class="company-info-items">
                <div :span="12">
                  运营主体归属：{{ companyInfo.areaName || "--" }}
                </div>
                <div :span="12">
                  联系人：{{ companyInfo.contactUser || "--" }}
                </div>
                <div :span="12">
                  运营主体地址：{{ companyInfo.address || "--" }}
                </div>
              </div>
              <div class="company-info-items">
                <div :span="12">
                  社会信用代码：{{ companyInfo.socialCreditAgency || "--" }}
                </div>
                <div :span="12">
                  联系电话：{{ companyInfo.contactPhone || "--" }}
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="24">
            <el-form-item label="应用类型" prop="systemType">
              <el-radio-group v-model="infoForm.systemType">
                <el-radio
                  v-for="v in systemTypeOptions"
                  :key="v.Id"
                  :label="v.Id"
                  @change="handleSystemTypeChange"
                  >{{ v.FullName }}</el-radio
                >
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="24" v-show="isFilings">
            <el-col :span="12">
               <el-form-item label="特殊备案类型" prop="specialRecordType">
                <el-select v-model="infoForm.specialRecordType" placeholder="请选择特殊备案类型" style="width: 100%;">
                  <el-option v-for="v in specialRecordTypeOption" :key="v.id" :label="v.fullName" :value="v.id" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="特殊备案内容" prop="specialRecordContent">
                <el-input
                  v-model="infoForm.specialRecordContent"
                  placeholder="请输入"
                  show-word-limit
                  :style="{ width: '100%' }"
                  type="textarea"
                  :autosize="{ minRows: 4, maxRows: 4 }"
                >
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="特殊备案号" prop="specialRecordNumber">
                <el-input
                  v-model="infoForm.specialRecordNumber"
                  placeholder="请输入特殊备案号"
                  maxlength="200"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="特殊备案时间" prop="specialRecordTime">
                <el-date-picker
                  v-model="infoForm.specialRecordTime"
                  type="date"
                  placeholder="特殊备案时间"
                  style="width: 100%;">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-col>
          <el-col :span="12">
            <el-form-item label="应用名称" prop="systemName">
              <el-input
                v-model="infoForm.systemName"
                placeholder="请输入系统名称"
                maxlength="50"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="应用分类" prop="systemClass">
              <el-select
                v-model="infoForm.systemClass"
                placeholder="请选择系统分类"
                :disabled="!infoForm.systemType"
                style="width: 100%"
              >
                <el-option
                  v-for="item in systemClassOptions"
                  :key="item.Id"
                  :label="item.ClassName"
                  :value="item.Id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="备案许可证" prop="recordLicense">
              <el-input
                v-model="infoForm.recordLicense"
                placeholder="请输入备案许可证"
                maxlength="200"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="归属平台" prop="platform">
              <el-input
                v-model="infoForm.platform"
                placeholder="请输入归属平台"
                maxlength="200"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="域名" prop="domain">
              <el-input
                v-model="infoForm.domain"
                placeholder="请输入域名"
                maxlength="200"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="下载量" prop="systemDownloadVolume">
              <el-input
                v-model.number="infoForm.systemDownloadVolume"
                maxlength="200"
                placeholder="请输入下载量"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="版本" prop="version">
              <el-input
                v-model="infoForm.version"
                maxlength="200"
                placeholder="请输入版本"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="负责人姓名" prop="principalName">
              <el-input
                v-model="infoForm.principalName"
                maxlength="50"
                placeholder="请输入负责人姓名"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="负责人电话" prop="principalPhone">
              <el-input
                v-model="infoForm.principalPhone"
                maxlength="20"
                placeholder="请输入负责人电话"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="办公地址" prop="officeAddress">
              <el-input
                v-model="infoForm.officeAddress"
                maxlength="200"
                placeholder="请输入办公地址"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24" class="icom-box">
            <el-form-item label="应用图标" prop="systemIcon">
              <el-upload
                class="avatar-uploader"
                :action="define.APIURl + '/api/file/Uploader/annex'"
                :headers="uploadHeaders"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                accept="image/*"
                >
                <img v-if="infoForm.systemIconModel" :src="define.comUrl + infoForm.systemIconModel.url" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="所属区县" prop="areaId">
              <el-radio-group
                v-model="infoForm.areaId"
                placeholder="请选择所属区县"
                style="line-height: 22px"
              >
                <el-radio v-for="v in areaOptions" :key="v.id" :label="v.id">{{
                  v.fullName
                }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="confirm" :loading="btnLoading">确认</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { getCompanyInfoList, getCompanyInfoById } from "@/api/baseData/company";
import { getSystemTypeList, uploader } from "@/api/common";
import { getSystemClassSelect } from "@/api/baseData/systemClass";
import { getAreaSelect } from "@/api/baseData/area";
import { addSystem, updataSystem, getSystemDetail } from "@/api/baseData/info";
import infoMixin from "@/mixins/info";
export default {
  name: "infoForm",
  mixins: [infoMixin],
  props: {
    type: {
      type: String,
      default: "add",
    },
    systemId: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      uploadHeaders: { Authorization: this.$store.getters.token },
      visible: false,
      infoForm_loading: false,
      infoForm: {
        companyId: "", // 主体企业
        systemType: "", // 系统类型
        systemName: "", // 系统名称
        systemClass: "", // 系统分类
        systemRecordNumber: "",
        recordLicense: "",
        platform: "",
        domain: "",
        systemDownloadVolume: "",
        version: "",
        principalName: "",
        principalPhone: "",
        officeAddress: "",
        areaId: "",
        specialRecordType: '',
        specialRecordContent: '',
        specialRecordNumber: '',
        specialRecordTime: '',
        systemIconModel: '',
      },
      infoRules: {
        systemName: {
          required: true,
          message: "请输入系统名称",
          trigger: "blur",
        },
        systemClass: {
          required: true,
          message: "请输入系统分类",
          trigger: "blur",
        },
        systemType: {
          required: true,
          message: "请输入系统类型",
          trigger: "blur",
        },
        companyId: {
          required: true,
          message: "请输入主体企业",
          trigger: "blur",
        },
        areaId: {
          required: true,
          message: "请输入所属区县",
          trigger: "blur",
        },
        pincipalPhone: {
          pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
          message: "请输入正确的手机号码",
          trigger: "blur",
        },
      },
      value: "",
      companyOptions: [],
      listQuery_company: {
        pageIndex: 1,
        pageSize: 10,
      },
      total_company: 0,
      isShowCompanyInfo: false,
      companyInfo: {},
      systemTypeOptions: [],
      systemClassOptions: [],
      specialRecordTypeOption: [],
      areaOptions: [],
      btnLoading: false,
      isFilings: false,
    };
  },
  watch: {},
  mounted() {},
  created() {},
  methods: {
    handleAvatarSuccess(response, file, fileList) {
      if(response.code != 200) return;
      this.infoForm.systemIconModel = response.data;
      this.$forceUpdate();
      this.$message({
        showClose: true,
        message: response.code == 200 ? '文件上传成功' : '文件上传失败',
        type: response.code == 200 ? 'success' : 'error',
      });
    },
    // 请求公司列表
    async initCompanyList() {
      let { data } = await getCompanyInfoList(this.listQuery_company);
      this.companyOptions = [...this.companyOptions, ...data.list];
      this.total_company = data.pagination.total;
    },
    // 无限下拉
    nextCompanyList() {
      if (this.total_company != 0 && this.total_company == this.companyOptions.length) return;
      this.listQuery_company.pageIndex++;
      this.initCompanyList();
    },
    async companyChange(val) {
      // 公司信息
      let { data } = await getCompanyInfoById(val);
      if(!data) return;
      this.companyInfo = data;
      this.isShowCompanyInfo = true;
    },
    // 文件上传--------------------
    httpRequest(file) {
      uploader({
        type: 1,
        file: file.file,
      }).then((res) => {
        console.log(res, "上传成功");
      });
    },
    // 文件上传--------------------
    reset() {
      for (let key in this.infoForm) {
        this.infoForm[key] = undefined;
      }
      this.companyOptions = [];
      this.listQuery_company = {
        pageIndex: 1,
        pageSize: 10,
      };
      this.total_company = 0;
      this.companyInfo = {};
      this.isShowCompanyInfo = false;
    },
    close() {
      this.visible = false;
    },
    async openDialog() {
      this.visible = true;
      this.isFilings = false;
      this.reset();
      this.infoForm_loading = true;
      await this.initCompanyList();
      await this.initSystemTypeList();
      await this.initAreaTypeList();
      await this.initSpecialRecordTypeOption();
      this.type == "edit" && (await this.initForm());
      this.infoForm_loading = false;
    },
    async initForm() {
      let { data } = await getSystemDetail(this.systemId);
      this.infoForm = data;
      this.handleSystemTypeChange(data.systemType);
      data.companyId && await this.companyChange(data.companyId);
      this.$forceUpdate();
    },
    handleSystemTypeChange(val) {
      this.isFilings = Boolean(val != '580634746028033285');
      this.infoForm.systemClass = "";
      this.initSystemClassList(val);
    },
    async confirm() {
      console.log(this.infoForm);
      this.$refs["infoForm"].validate((valid) => {
        if (valid) {
          this.btnLoading = true;
          switch (this.type) {
            case "add":
              addSystem(this.infoForm).then((res) => {
                this.$message({
                  message: "恭喜你，新增成功",
                  type: "success",
                });
                this.btnLoading = false;
                this.$emit('reInit');
                this.close();
              }).catch(() => { this.btnLoading = false });
              break;
            case "edit":
              this.infoForm.id = this.systemId;
              updataSystem(this.infoForm).then((res) => {
                this.$message({
                  message: "恭喜你，修改成功",
                  type: "success",
                });
                this.btnLoading = false;
                this.$emit('reInit');
                this.close();
              }).catch(() => { this.btnLoading = false });;
              break;
            default:
              break;
          }
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.company-info {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  background: rgba(187, 187, 187, 0.23);
  margin-left: 80px;
  padding: 10px 20px;
  border-radius: 10px;
  width: 50%;
  margin-bottom: 10px;
  .company-info-items {
    width: 50%;
    div {
      line-height: 20px;
    }
  }
}
.icom-box {
  :deep(.avatar-uploader .el-upload) {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    &:hover {
      border-color: #409eff;
    }
    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 100px;
      height: 100px;
      line-height: 100px;
      text-align: center;
    }
    .avatar {
      width: 100px;
      height: 100px;
      display: block;
    }
  }
}
</style>