antissoft / NetworkInformation

<template>
  <div class="infoForm">
    <div class="userSelect-input" @click="openDialog">
      <slot></slot>
    </div>
    <el-dialog
      title="修改信息"
      :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
    >
      <el-row :gutter="20">
        <el-col :span="14">
          <el-form
            :model="infoForm"
            :rules="infoRules"
            ref="infoForm"
            size="small"
            label-width="100px"
            :disabled="true"
            v-loading="infoForm_loading"
          >
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="系统类型" prop="systemType">
                  <el-input
                    v-model="infoForm.systemTypeName"
                    placeholder="--"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="系统名称" prop="systemName">
                  <el-input
                    v-model="infoForm.systemName"
                    placeholder="--"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="系统分类" prop="systemClass">
                  <el-input
                    v-model="infoForm.systemClassName"
                    placeholder="--"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="备案许可证" prop="recordLicense">
                  <el-input
                    v-model="infoForm.recordLicense"
                    placeholder="--"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="归属平台" prop="platform">
                  <el-input
                    v-model="infoForm.platform"
                    placeholder="--"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="域名" prop="domain">
                  <el-input
                    v-model="infoForm.domain"
                    placeholder="--"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="下载量" prop="systemDownloadVolume">
                  <el-input
                    v-model.number="infoForm.systemDownloadVolume"
                    placeholder="--"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="版本" prop="version">
                  <el-input
                    v-model="infoForm.version"
                    placeholder="--"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="负责人姓名" prop="principalName">
                  <el-input
                    v-model="infoForm.principalName"
                    placeholder="--"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="负责人电话" prop="principalPhone">
                  <el-input
                    v-model="infoForm.principalPhone"
                    placeholder="--"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="办公地址" prop="officeAddress">
                  <el-input
                    v-model="infoForm.officeAddress"
                    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="#"
                    :show-file-list="false"
                    :limit="1"
                    :multiple="false"
                    :http-request="httpRequest"
                  >
                    <img
                      v-if="infoForm.systemIcon"
                      :src="infoForm.systemIcon"
                      class="avatar"
                    />
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="所属区县" prop="areaId">
                  <el-input
                    v-model="infoForm.areaName"
                    placeholder="--"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="主体企业" prop="companyId">
                  <el-input
                    v-model="infoForm.companyName"
                    placeholder="--"
                  ></el-input>
                </el-form-item>
              </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-row>
          </el-form>
        </el-col>
        <el-col :span="10">
          <el-col :span="24"> 修改记录： </el-col>
          <el-col :span="24">
            <el-timeline v-loading="record_loading" style="max-height: 570px; overflow-y: scroll">
              <template v-if="updataRecordList.length">
                <el-timeline-item
                  placement="top"
                  v-for="v in updataRecordList"
                  :key="v.id"
                >
                  <el-card>
                    <h4 v-if="v.content">
                      <!-- <p v-for="(item, index) in v.updataList" :key="index">
                        将“{{ item.PropertyName }}”从“{{
                          item.OldValue
                        }}”改为“{{ item.NewValue }}”
                      </p> -->
                      <p v-for="(item, index) in v.changeRecord" :key="index">{{ item }}</p>
                    </h4>
                    <h4 v-else>
                      <p>{{ v.describe }}</p>
                    </h4>
                    <p>{{ v.creatorUserId }} 提交于 {{ v.updataTime }}</p>
                  </el-card>
                </el-timeline-item>
              </template>
              <el-empty v-else description="暂无修改记录"></el-empty>
            </el-timeline>
          </el-col>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取消</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 { getSystemDetail, getUpdataRecord } 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 {
      visible: false,
      infoForm_loading: false,
      activeNames: [],
      infoForm: {
        companyId: "", // 主体企业
        systemType: "", // 系统类型
        systemName: "", // 系统名称
        systemClass: "", // 系统分类
        systemRecordNumber: "",
        recordLicense: "",
        platform: "",
        domain: "",
        systemDownloadVolume: "",
        version: "",
        principalName: "",
        principalPhone: "",
        officeAddress: "",
        systemIcon: "",
        areaId: "",
        systemClassName: '',
      },
      infoRules: {},
      value: "",
      companyOptions: [],
      listQuery_company: {
        pageIndex: 1,
        pageSize: 10,
      },
      total_company: 0,
      isShowCompanyInfo: false,
      companyInfo: {},
      systemTypeOptions: [],
      systemClassOptions: [],
      areaOptions: [],
      updataRecordList: [],
      record_loading: true,
    };
  },
  watch: {},
  mounted() {},
  created() {},
  methods: {
    // 请求公司列表
    async initCompanyList() {
      let { data } = await getCompanyInfoList(this.listQuery_company);
      this.companyOptions = [...this.companyOptions, ...data.list];
      this.total_company = data.pagination.total;
    },
    // 无限下拉
    nextCompanyList() {
      if (total_company == this.listQuery_company.length) return;
      this.listQuery_company.pageIndex++;
      this.initCompanyList();
    },
    async companyChange(val) {
      // 公司信息
      let { data } = await getCompanyInfoById(val);
      this.infoForm.companyName = data.companyName;
      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.reset();
      this.visible = true;
      this.infoForm_loading = true;
      await this.initCompanyList();
      await this.initSystemTypeList();
      await this.initAreaTypeList();
      await this.initForm();
      await this.initUpdataRecord();
      this.infoForm_loading = false;
    },
    async initUpdataRecord() {
      this.record_loading = true;
      await getUpdataRecord({
        id: this.systemId,
        pageIndex: 1,
        pageSize: 10,
      }).then(({ data }) => {
        data.list.forEach((item) => {
          let date = new Date(item.creatorTime * 1000);
          item.updataTime = this.$m(date).format("YYYY-MM-DD HH:mm:ss");
          item.updataList = JSON.parse(item.content);
          item.changeRecord = item.content ? JSON.parse(item.describe) : item.describe;
        });
        this.updataRecordList = data.list;
        this.record_loading = false;
      });
    },
    async initForm() {
      let { data } = await getSystemDetail(this.systemId);
      data.systemTypeName = this.systemTypeOptions.find(v => v.Id == data.systemType).FullName;
      data.areaName = this.areaOptions.find(v => v.id == data.areaId).fullName;
      this.infoForm = data;
      this.initSystemClassList(data.systemType);
      await this.companyChange(data.companyId);
      this.$nextTick(() => {
        this.infoForm.systemClassName = this.systemClassOptions.find(v => v.Id == this.infoForm.systemClass).ClassName;
        this.$forceUpdate();
      })
    },
  },
};
</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: 80%;
  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>