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>