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="success" icon="el-icon-upload2" size="mini">导入</el-button> -->
              <!-- <el-button type="primary" icon="el-icon-download" size="mini" @click="toExport">导出</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="principalName"
                label="联系人"
                align="center"
              />
              <el-table-column
                show-overflow-tooltip
                prop="principalPhone"
                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)">删除</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="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";

export default {
  name: "SystemInfo",
  mixins: [infoMixin],
  components: { InspectionForm, ChangeRecord, DetailForm, ExportBox },
  data() {
    return {
      loading: false,
      query: {
        keyword: "",
        systemType: "",
        systemClass: "",
        principalName: "",
        principalPhone: "",
      },
      listQuery: {
        pageIndex: 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() {},
  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,
      };
      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.loading = false;
      });
    },
    toDetail(row) {
      console.log(row);
      
      this.DetailFormVisible = true;
      this.$nextTick(() => {
        this.$refs.DetailForm.init(row);
      });
    },
    // 上报
    toInspection(row) {
      this.InspectionFormVisible = true;
      this.$nextTick(() => {
        this.$refs.InspectionForm.init(row);
      });
    },
    // 整改清单
    toChangeRecord(row) {
      this.ChangeRecordVisible = true;
      this.$nextTick(() => {
        this.$refs.ChangeRecord.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();
      });
    },
    toExport() {
      let _query = {
        ...this.query,
      };
      let query = {};
      for (let key in _query) {
        if (Array.isArray(_query[key])) {
          query[key] = _query[key].join();
        } else {
          query[key] = _query[key];
        }
      }
      request({
        url: `/Extend/basesysteminfo/Actions/Export`,
        method: "POST",
        data: query,
      }).then((res) => {
        const url = process.env.VUE_APP_BASE_API + 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>