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 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

                      size="mini"
                      type="text"
                      @click="toChangeRecord(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"/>

        </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";

  import DetailForm from './DetailForm.vue';

  import ChangeRecord from "./ChangeRecord.vue";

  export default {
    name: "SystemInfo",
    mixins: [infoMixin],

    components: { InspectionForm, ChangeRecord, DetailForm },

    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: {

          city: '',

          areaId: "",
          applnycontent: "",
        },
        areaRules: {
          areaId: {

            required: true,
            message: "请输入所属区县",
            trigger: "change",
          },

        },
        activeSystemId: "",

  
        // 上报
        InspectionFormVisible: false,

        ChangeRecordVisible: false,
        btnLoading: false,

  
        // 详情
        DetailFormVisible: false,

      };
    },
    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,
        };
        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,

                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();
        });
      },

    },
  };
  </script>
  <style scoped lang="scss">
  .common-info-box {
    :deep(.el-table__body-wrapper.is-scrolling-none) {
      height: calc(100% - 47px);
      overflow-y: scroll;
    }

  }
  </style>