antissoft / NetworkInformation

  <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

                    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 @refresh="initCompanyList"/>

              </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="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="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="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" v-show="isFilings">
               <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" v-show="isFilings">
              <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="24" v-show="infoForm.systemType == '576280043370579205'">

              <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" v-show="isFilings">
              <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" v-show="isFilings">

                <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>

            <!-- APP增加字段“安装次数” -->
            <el-col :span="12" v-show="infoForm.systemType == '576280004254500101'">
              <el-form-item label="安装次数" prop="systemDownloadVolume">
                <el-input-number
                  v-model="infoForm.systemDownloadVolume"
                  placeholder="请输入安装次数"
                  :min="0"
                  :precision="0"
                  controls-position="right"
                  style="width: 100%;"
                ></el-input-number>

              </el-form-item>
            </el-col>

            <el-col :span="12" v-show="infoForm.systemType == '576280043370579205' || infoForm.systemType == '576280085330396421'">
              <el-form-item label="月活" prop="MAU">
                <el-input-number
                  v-model="infoForm.MAU"
                  placeholder="请输入月活"
                  :min="0"
                  :precision="0"
                  controls-position="right"
                  style="width: 100%;"
                ></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="12" v-show="infoForm.systemType == '580634746028033285'">
              <el-form-item label="粉丝量" prop="followerCount">
                <el-input-number
                  v-model="infoForm.followerCount"
                  placeholder="请输入粉丝量"
                  :min="0"
                  :precision="0"
                  controls-position="right"
                  style="width: 100%;"
                ></el-input-number>

              </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"

                  :disabled="!isSHILevel"

                >
                  <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-col :span="24">

              <el-form-item label="所属外协" prop="externalAssistanceId">
                <el-radio-group
                  v-model="infoForm.externalAssistanceId"
                  placeholder="请选择所属外协"
                  style="line-height: 22px"
                >
                  <el-radio v-for="v in communicationOutOptions" :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="visible = false">取消</el-button>

          <el-button type="primary" @click="confirm" :loading="btnLoading">确认</el-button>

        </span>
      </el-dialog>
    </div>
  </template>
  
  <script>

  import { getCompanyInfoById } from "@/api/baseData/company";
  import { uploader } from "@/api/common";

  import { addSystem, updataSystem, getSystemDetail } from "@/api/baseData/info";

  import request from "@/utils/request";

  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,

        isDetail: false,

        infoForm_loading: false,
        infoForm: {
          companyId: "", // 主体企业
          systemType: "", // 系统类型
          systemName: "", // 系统名称
          systemClass: "", // 系统分类
          systemRecordNumber: "",
          recordLicense: "",
          platform: "",
          domain: "",
          systemDownloadVolume: "",
          version: "",
          principalName: "",
          principalPhone: "",
          officeAddress: "",

          areaId: "",

          specialRecordType: '',
          specialRecordContent: '',
          specialRecordNumber: '',
          specialRecordTime: '',

          systemIconModel: '',

          MAU: '',
          followerCount: 0,

          externalAssistanceId: '',

        },
        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: [],

        communicationOutOptions: [],

        areaOptions: [],

        btnLoading: false,

        isFilings: false,

      };
    },

    computed: {
      organizeId() {
        return this.$store.state.user.userInfo.organizeId;
      },
      isSHILevel() {
        // 判断角色是否为‘市级办公室’
        return this.$store.state.user.islader;
      },
    },

    watch: {},
    mounted() {},
    created() {},
    methods: {

      handleAvatarSuccess(response, file, fileList) {
        if(response.code != 200) return;

        this.infoForm.systemIconModel = {
          fileId: response.data.name,
          name: file.name,
          url: response.data.url,
        };

        this.$forceUpdate();
        this.$message({
          showClose: true,
          message: response.code == 200 ? '文件上传成功' : '文件上传失败',
          type: response.code == 200 ? 'success' : 'error',
        });
      },

      // 请求公司列表
      async initCompanyList() {

        request({
          url: `/Extend/basecomapnyinfo/GetNoPagingList`,
          method: "GET",
        }).then(({data}) => {
          this.companyOptions = data;
        })

      },
      async companyChange(val) {
        // 公司信息
        let { data } = await getCompanyInfoById(val);

        if(!data) {
          this.companyInfo = {};
          this.isShowCompanyInfo = false;
          this.infoForm.officeAddress = '';
          this.infoForm.principalName = '';
          this.infoForm.principalPhone = '';
          this.infoForm.areaId = '';
        } else {
          this.companyInfo = data;
          this.isShowCompanyInfo = true;
          this.infoForm.officeAddress = data.address;
          this.infoForm.principalName = data.contactUser;
          this.infoForm.principalPhone = data.contactPhone;
          this.infoForm.areaId = data.areaId;
        };

      },

      // 文件上传--------------------
      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.initCommunicationOutOptions();

        await this.initAreaTypeList();

        await this.initSpecialRecordTypeOption();

        !this.isSHILevel && (this.infoForm.areaId = this.organizeId);

        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.systemClass);

        data.companyId && await this.companyChange(data.companyId);

        this.$forceUpdate();
      },

      handleSystemTypeChange(val) {

        this.isFilings = Boolean(val != '580634746028033285');

        this.infoForm.systemClass = this.infoForm.systemClass || '';
        this.infoForm.systemDownloadVolume = this.infoForm.systemDownloadVolume || '';
        this.infoForm.MAU = this.infoForm.MAU || '';
        this.infoForm.followerCount = this.infoForm.followerCount || '';

        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>