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

                      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.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.principalName"

                      placeholder="请输入联系人"
                    />
                  </el-form-item>
                </el-col>

                <el-col :span="4">

                  <el-form-item label="">
                    <el-input

                      v-model="query.principalPhone"

                      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="primary" icon="el-icon-download" size="mini" @click="exportData('demo')">导出模板</el-button>

                <!-- <el-button type="success" icon="el-icon-upload2" size="mini">导入</el-button> -->

                <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"
                />
                <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="systemClass" 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)" >上报</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" 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,

        query: {
          keyword: "",

          systemType: "",
          systemClass: "",

          principalName: "",
          principalPhone: "",

        },

        listQuery: {

          currentPage: 1,

          pageSize: 10,
          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: {

      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: 10,
          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",
          }
        } 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;
    }

  }
  </style>