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="4">
                <el-form-item label="">
                  <el-input clearable 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.systemClass" 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="3">
                <el-form-item label="">
                  <el-input v-model="query.principalName" placeholder="请输入联系人"/>
                </el-form-item>
              </el-col>
              <el-col :span="3">
                <el-form-item label="">
                  <el-input v-model="query.principalPhone" placeholder="请输入联系电话"/>
                </el-form-item>
              </el-col>
              <el-col :span="3">
                <el-form-item>
                  <el-button type="primary" icon="el-icon-search" @click="search()" >搜索</el-button>
                  <el-button icon="el-icon-refresh-right" @click="reset()">重置</el-button>
                </el-form-item>
              </el-col>
            </el-form>
            <div class="NCC-common-search-box-right">
              <el-button type="primary" icon="el-icon-download" size="mini" @click="exportData('demo')">导出模板</el-button>
              <el-upload class="uploadXlax" :action="define.APIURl + '/api/Extend/basesysteminfo/Actions/ImportByExcel'" :headers="uploadHeaders" :on-success="uploadSuccess" :show-file-list="false" name="excelfile">
                <div class="avatar-box">
                  <el-button type="info" icon="el-icon-upload" size="mini">导入</el-button>
                </div>
              </el-upload>
              <el-button type="primary" icon="el-icon-download" size="mini" @click="exportData()">导出</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">
                <template slot-scope="scope">{{ scope.row.companyName || scope.row.companyId }}</template>
              </el-table-column>
              <el-table-column show-overflow-tooltip prop="systemName" label="应用名称" align="center"/>
              <el-table-column label="应用类型" prop="systemType" align="left" show-overflow-tooltip>
                <template slot-scope="scope">{{ scope.row.systemType | dynamicTextUP(systemTypeOptions) }}</template>
              </el-table-column>
              <el-table-column label="应用分类" prop="systemClassStr" align="left" show-overflow-tooltip>
                <!-- <template slot-scope="scope">{{ scope.row.systemClass | dynamicTextUP(systemTypeOptions) }}</template> -->
              </el-table-column>
              <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 label="所属区域" prop="areaId" align="left" show-overflow-tooltip>
                <template slot-scope="scope">{{ scope.row.areaId | dynamicText(areaOptions) }}</template>
              </el-table-column>
              <el-table-column label="操作" width="250">
                <!-- 查看，修改，归属地变更，上报 -->
                <template slot-scope="scope">
                  <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="toDetail(scope.row)">查看</el-button>
                  <el-button size="mini" type="text" @click="toChangeArea(scope.row)" >归属地变更</el-button>
                  <el-button size="mini" type="text" @click="toInspection(scope.row)" v-if="!isSHILevel">上报</el-button>
                  <!-- <el-button type="text" style="color: red;" @click="delNew(scope.row)" v-if="isSHILevel">删除</el-button> -->
                </template>
              </el-table-column>
            </NCC-table>
            <pagination :total="total" :page.sync="listQuery.currentPage" :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="city">
              <el-input v-model="areaForm.city" placeholder="请输入市属" maxlength="20"></el-input>
            </el-form-item> -->
            <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" :loading="btnLoading">确 定</el-button>
          </span>
        </el-dialog>
        <InspectionForm v-if="InspectionFormVisible" ref="InspectionForm" @refresh="refresh"/>
        <ChangeRecord v-if="ChangeRecordVisible" ref="ChangeRecord"/>
        <DetailForm v-if="DetailFormVisible" :areaOptions="areaOptions" ref="DetailForm"/>
        <ExportBox v-if="ExportBoxVisible" ref="ExportBox" @download="download"/>
      </div>
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";
import { getList } from "@/api/baseData/info";
import { applnyChageArea } from "@/api/baseData/info";
import infoMixin from "@/mixins/info";
import InspectionForm from "./InspectForm.vue";
import DetailForm from './DetailForm.vue';
import ChangeRecord from "./ChangeRecord.vue";
import ExportBox from "./ExportBox.vue";
import define from '@/utils/define'

export default {
  name: "SystemInfo",
  mixins: [infoMixin],
  components: { InspectionForm, ChangeRecord, DetailForm, ExportBox },
  data() {
    return {
      loading: false,
      uploadHeaders: { Authorization: this.$store.getters.token },
      query: {
        keyword: "",
        systemType: "",
        systemClass: "",
        principalName: "",
        principalPhone: "",
      },
      listQuery: {
        currentPage: 1,
        pageSize: 20,
        sort: "desc",
        sidx: "",
      },
      total: 0,
      infoDataList: [],

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

      // 上报
      InspectionFormVisible: false,
      ChangeRecordVisible: false,
      btnLoading: false,

      // 详情
      DetailFormVisible: false,

      // 导出
      ExportBoxVisible: false,
      columnList: [
        { prop: "companyName", label: "主体企业" },
        { prop: "systemName", label: "应用名称" },
        { prop: "systemType", label: "应用类型" },
        { prop: "systemClass", label: "系统类型" },
        { prop: "principalName", label: "联系人" },
        { prop: "principalPhone", label: "联系电话" },
        { prop: "areaId", label: "所属区域" },
      ],
    };
  },
  
  created() {
    this.initSystemTypeList();
    this.initAreaTypeList();
    this.initList();
  },
  mounted() {},
  computed: {
    isSHILevel() {
      // 判断角色是否为‘市级办公室’
      return this.$store.state.user.islader;
    },
  },
  watch: {
    $route: {
      handler: function (route) {
        this.query.keyword = route.query.keyword || "";
        this.initList();
      },
      immediate: true,
    },
  },
  methods: {
    uploadSuccess(response, file, fileList) {
        this.$message({
          showClose: true,
          message: response.msg,
          type: response.code == 200 ? 'success' : 'error',
          close: () => {
            response.code == 200 && this.initData();
          }
        });
    },
    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 = {
        currentPage: 1,
        pageSize: 20,
        sort: "desc",
        sidx: "",
      };
      this.initList();
    },
    initList() {
      this.loading = true;
      let query = {
        ...this.listQuery,
        ...this.query,
      };
      getList(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,
        //       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.total = data.pagination.total;
        this.infoDataList = data.list;
        this.loading = false;
      });
    },
    toDetail(row) {
      this.DetailFormVisible = true;
      this.$nextTick(() => {
        this.$refs.DetailForm.init(row);
      });
    },
    // 上报
    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;
      this.btnLoading = true;
      applnyChageArea({
        id: this.activeSystemId,
        toChangeIntoId: this.areaForm.areaId,
        applnycontent: this.areaForm.applnycontent,
      }).then((res) => {
        this.btnLoading = false;
        this.areaChangeVisible = false;
        this.$message({
          message: res.msg,
          type: 'success'
        });
        this.initList();
      });
    },
    exportData(type) {
      let obj = {};
      if(type) {
        obj = {
          url: '/Extend/basesysteminfo/Actions/GenerateImportTemplate',
          method: "GET",
          responseType: 'blob',
        }
      } else {
        obj ={
          url: '/Extend/basesysteminfo/Actions/Export',
          method: "POST",
          data: this.query,
        }
      };
      request(obj).then((res) => {
        if(type) {
          const blob = new Blob([res], {type: 'application/json'});
          const url = window.URL.createObjectURL(blob);
          let link = document.createElement('a');
          link.style.display = 'none';
          link.href = url;
          link.download = '应用信息模板.xlsx';
          link.click();
        } else {
          if(res.code != 200) return;
          const url = define.APIURl + res.data.url;
          const link = document.createElement("a");
          link.href = url;
          link.download = res.data.name;
          link.click();
        }
      })
    },
    download(data) {
      let query = { ...data, ...this.listQuery, ...this.query };
      request({
        url: `/Extend/BasePrincipalResponsibility/Actions/Export`,
        method: "GET",
        data: query,
      }).then((res) => {
        if (!res.data.url) return;
        window.location.href = this.define.comUrl + res.data.url;
        this.$refs.ExportBox.visible = false;
        this.ExportBoxVisible = false;
      });
    },

    delNew(row) {
      this.$confirm('此操作将永久删除该系统, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let res = await request({
          url: `/Extend/basesysteminfo/${row.id}`,
          method: "DELETE",
        });
        this.$message({
          message: res.msg,
          type: 'success'
        });
        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;
  }
}
.uploadXlax {
  display: inline-block;
  margin: 0 8px;
}
</style>