antissoft / NetworkInformation

<template>
  <!-- 应用信息 -->
  <div class="SystemInfo item-box common-info-box">
    <div class="item-title">应用信息</div>
    <div class="item-body">
      <div class="NCC-common-layout">
        <div class="NCC-common-layout-center">
          <el-row class="NCC-common-search-box" :gutter="5">
            <el-form @submit.native.prevent size="mini">
              <el-col :span="5">
                <el-form-item label="">
                  <el-input
                    v-model="query.keyword"
                    placeholder="请输入应用名称、企业名称进行查询"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="3">
                <el-form-item label="">
                  <el-select
                    v-model="query.systemType"
                    placeholder="请选择应用类型"
                    clearable
                    @change="handleSystemTypeChange"
                  >
                    <el-option
                      v-for="item in systemTypeOptions"
                      :key="item.Id"
                      :label="item.FullName"
                      :value="item.Id"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="3">
                <el-form-item label="">
                  <el-select
                    v-model="query.proId"
                    placeholder="请选择应用分类"
                    :disabled="!query.systemType"
                    clearable
                  >
                    <el-option
                      v-for="item in systemClassOptions"
                      :key="item.Id"
                      :label="item.ClassName"
                      :value="item.Id"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="">
                  <el-input
                    v-model="query.contactUser"
                    placeholder="请输入联系人"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="">
                  <el-input
                    v-model="query.contactPhone"
                    placeholder="请输入联系电话"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="2">
                <el-form-item>
                  <el-button
                    type="primary"
                    icon="el-icon-search"
                    @click="search()"
                    >搜索</el-button
                  >
                </el-form-item>
              </el-col>
            </el-form>
            <div class="NCC-common-search-box-right">
              <el-button type="success" icon="el-icon-upload2" size="mini"
                >导入</el-button
              >
              <el-button type="primary" icon="el-icon-download" size="mini"
                >导出</el-button
              >
            </div>
          </el-row>
          <div class="NCC-common-layout-main NCC-flex-main">
            <NCC-table v-loading="loading" :data="infoDataList">
              <el-table-column
                show-overflow-tooltip
                prop="companyName"
                label="主体企业"
                align="center"
              />
              <el-table-column
                show-overflow-tooltip
                prop="systemName"
                label="应用名称"
                align="center"
              />
              <el-table-column
                show-overflow-tooltip
                prop="systemType"
                label="应用类型"
                align="center"
              />
              <el-table-column
                show-overflow-tooltip
                prop="systemClass"
                label="应用分类"
                align="center"
              />
              <el-table-column
                show-overflow-tooltip
                prop="contactUser"
                label="联系人"
                align="center"
              />
              <el-table-column
                show-overflow-tooltip
                prop="contactPhone"
                label="联系电话"
                align="center"
              />
              <el-table-column
                prop="areaName"
                label="所属区域"
                align="center"
              />
              <el-table-column label="操作" width="200">
                <!-- 查看，修改，归属地变更，上报 -->
                <template slot-scope="scope">
                  <InfoEditRecord class="btn_dialog" :systemId="scope.row.Id">
                    <el-button size="mini" type="text">查看</el-button>
                  </InfoEditRecord>
                  <infoForm
                    class="btn_dialog"
                    type="edit"
                    :systemId="scope.row.Id"
                    @reInit="search"
                  >
                    <el-button size="mini" type="text">修改</el-button>
                  </infoForm>
                  <el-button
                    size="mini"
                    type="text"
                    @click="toChangeArea(scope.row)"
                    >归属地变更</el-button
                  >
                  <el-button
                    size="mini"
                    type="text"
                    @click="toInspection(scope.row)"
                    >上报</el-button
                  >
                </template>
              </el-table-column>
            </NCC-table>
            <pagination
              :total="total"
              :page.sync="listQuery.pageIndex"
              :limit.sync="listQuery.pageSize"
              @pagination="initList"
            />
          </div>
        </div>
        <el-dialog
          title="归属地变更"
          :visible.sync="areaChangeVisible"
          width="50%"
        >
          <el-form
            :model="areaForm"
            :rules="areaRules"
            ref="areaForm"
            size="small"
            label-width="100px"
            v-loading="areaDialogLoading"
          >
            <el-form-item label="所属区县" prop="areaId">
              <el-radio-group
                v-model="areaForm.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-form-item label="申请内容描述" prop="applnycontent">
              <el-input
                type="textarea"
                v-model="areaForm.applnycontent"
                placeholder="请输入申请内容描述"
                maxlength="300"
              ></el-input>
            </el-form-item>
          </el-form>

          <span slot="footer" class="dialog-footer">
            <el-button @click="areaChangeVisible = false">取 消</el-button>
            <el-button type="primary" @click="areaSubmit">确 定</el-button>
          </span>
        </el-dialog>
        <InspectionForm
          v-if="InspectionFormVisible"
          ref="InspectionForm"
          @refresh="refresh"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { getInfoList } from "@/api/baseData/info";
import { applnyChageArea } from "@/api/baseData/info";
import infoMixin from "@/mixins/info";
import InspectionForm from "./InspectForm.vue";

export default {
  name: "SystemInfo",
  mixins: [infoMixin],
  components: {
    InspectionForm,
  },
  data() {
    return {
      loading: false,
      query: {
        keyword: "",
        systemType: "",
        systemClass: "",
        contactUser: "",
        contactPhone: "",
      },
      listQuery: {
        pageIndex: 1,
        pageSize: 10,
        sort: "desc",
        sidx: "",
      },
      total: 0,
      infoDataList: [],

      //   归属地变更
      areaChangeVisible: false,
      areaDialogLoading: false,
      activeAreaId: "",
      areaForm: {
        areaId: "",
        applnycontent: "",
      },
      areaRules: {
        areaId: {
          required: true,
          message: "请输入所属区县",
          trigger: "change",
        },
      },
      activeSystemId: "",

      // 上报
      InspectionFormVisible: false,
    };
  },
  created() {
    this.initList();
    this.initSystemTypeList();
  },
  mounted() {},
  watch: {
    $route: {
      handler: function (route) {
        this.query.keyword = route.query.keyword || "";
        this.initList();
      },
      immediate: true,
    },
  },
  methods: {
    handleSystemTypeChange(val) {
      this.query.systemClass = "";
      this.initSystemClassList(val);
    },

    reset() {
      for (let key in this.query) {
        this.query[key] = undefined;
      }
      this.listQuery = {
        currentPage: 1,
        pageSize: 20,
        sort: "desc",
        sidx: "",
      };
      this.initList();
    },
    search() {
      this.listQuery = {
        pageIndex: 1,
        pageSize: 10,
        sort: "desc",
        sidx: "",
      };
      this.initList();
    },
    initList() {
      this.loading = true;
      let query = {
        ...this.listQuery,
        ...this.query,
      };
      getInfoList(query).then(({ data }) => {
        let list = [];
        data.list.length &&
          data.list.forEach((v) => {
            let obj = {
              companyName: v.compayInfo.CompanyName,
              systemName: v.SysytemInfo.SystemName,
              systemType: v.SysytemInfo.SystemType,
              systemClass: v.SysytemInfo.SystemClass,
              areaName: v.SysytemInfo.AreaName,
              areaId: v.SysytemInfo.AreaId,
              principalName: v.SysytemInfo.PrincipalName,
              principalPhone: v.SysytemInfo.PrincipalPhone,
              Id: v.SysytemInfo.Id,
            };
            list.push(obj);
          });
        this.infoDataList = list;
        this.total = data.totalCount;
        this.loading = false;
      });
    },
    // 上报
    toInspection(row) {
      this.InspectionFormVisible = true;
      this.$nextTick(() => {
        this.$refs.InspectionForm.init(row);
      });
    },
    refresh(isrRefresh) {
      this.InspectionFormVisible = false;
      if (isrRefresh) this.reset();
    },
    async toChangeArea(row) {
      this.areaChangeVisible = true;
      this.areaDialogLoading = true;
      this.activeAreaId = row.areaId;
      this.areaForm.areaId = row.areaId;
      this.activeSystemId = row.Id;
      await this.initAreaTypeList();
      this.areaDialogLoading = false;
    },
    areaSubmit() {
      if (this.activeAreaId == this.areaForm.areaId) return;
      applnyChageArea({
        id: this.activeSystemId,
        toChangeIntoId: this.areaForm.areaId,
        applnycontent: this.areaForm.applnycontent,
      }).then((res) => {
        this.areaChangeVisible = false;
        this.initList();
      });
    },
  },
};
</script>
<style scoped lang="scss">
.common-info-box {
  :deep(.el-table__body-wrapper.is-scrolling-none) {
    height: calc(100% - 47px);
    overflow-y: scroll;
  }
  .item-body {
    height: calc(100% - 35px);
  }
}
</style>