auth-web/src/pages/application-manage/app-manage/index.vue

/** 应用管理 author:laiyh date:2020-10-28 */
<template>
  <dg-row>
    <dg-col :span="5">
      <tree
        class="u-pm__left"
        title="机构列表"
        :apiName="`getAllorgTree`"
        :params="treeProps"
        @handleGetNode="handleGetNode"
        @submitRootNode="submitRootNode"
      />
    </dg-col>
    <dg-col :span="19">
      <div class="u-right__table">
        <el-form ref="form" class="search-bar" :model="formData" label-position="left" label-suffix="" label-width="75px">
          <dg-row :gutter="12">
            <dg-col :span="6">
              <el-form-item label="应用状态" prop="applyStatus.value">
                <dg-select
                  v-model="formData.applyStatus.value"
                  code="DM_APPLY_STATUS"
                  placeholder="请选择应用状态"
                  filterable
                  clearable
                />
              </el-form-item>
            </dg-col>
            <dg-col :span="6">
              <el-form-item label="应用代码" prop="applyCode.value">
                <el-input
                  v-model="formData.applyCode.value"
                  placeholder="请输入应用代码"
                  clearable
                  @keyup.enter.native="doSearch"
                />
              </el-form-item>
            </dg-col>
            <dg-col :span="6">
              <el-form-item label="承建单位" prop="manufacturerName.value">
                <el-input
                  v-model="formData.manufacturerName.value"
                  placeholder="请输入承建单位"
                  clearable
                  @keyup.enter.native="doSearch"
                />
              </el-form-item>
            </dg-col>
            <dg-col :span="6">
              <dg-button type="primary" icon="el-icon-search" @click="doSearch">查询</dg-button>
              <dg-button icon="el-icon-refresh-right" @click="hanldleReset">重置</dg-button>
            </dg-col>
          </dg-row>
          <dg-row :gutter="12">
            <dg-col :span="6">
              <el-form-item label="业务警种" prop="policeSpecies.value">
                <dg-select
                  v-model="formData.policeSpecies.value"
                  clearable
                  filterable
                  code="T_MD_POLICE_TYPE"
                  placeholder="请选择所属业务警种"
                />
              </el-form-item>
            </dg-col>
            <dg-col :span="6">
              <el-form-item label="应用名称" prop="applyName.value">
                <el-input v-model="formData.applyName.value" placeholder="请输入应用名称" clearable />
              </el-form-item>
            </dg-col>
            <dg-col :span="10">
              <el-form-item label="注册日期" prop="registrationTime.value">
                <dg-date-picker
                  v-model="formData.registrationTime.value"
                  align="right"
                  type="daterange"
                  placeholder="请选择注册日期"
                  :picker-options="pickerOptions"
                  clearable
                  value-format="yyyy-MM-dd"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                />
              </el-form-item>
            </dg-col>
          </dg-row>
        </el-form>
        <!-- 操作栏 -->
        <operate-bar :pageOptList="pageOptList" @submitPageOpt="receviceOpt"></operate-bar>
        <!-- 表格 -->
        <Table ref="myTable" :url="tableUrl" :headerData="titleData" :condition="formData" :lazyLoad="true">
          <dg-table-column fixed="right" label="操作" width="120" align="center">
            <template slot-scope="scope">
              <div class="u-table__operation">
                <el-tooltip
                  v-for="(item, i) in optList"
                  :key="'table' + i"
                  :content="item.tooltip"
                  effect="dark"
                  placement="top-end"
                >
                  <i :class="item.icon" @click="item.on(scope.row)" />
                </el-tooltip>
              </div>
            </template>
          </dg-table-column>
        </Table>
      </div>
    </dg-col>
  </dg-row>
</template>

<script>
import Tree from '@/pages/common/tree';
import Table from '@/pages/common/table';
import { appRestApi, select, getRemoteRource, syncRource } from '@/api/application';
import Editor from './editor';
import Detail from './detail';
import operateBar from '@/components/operate-bar';

const editorArea = ['960px', '680px'];

import { mapGetters } from 'vuex';

export default {
  name: 'appMSG',
  components: { Tree, Table, operateBar },
  computed: {
    ...mapGetters(['user'])
  },
  mounted() {},
  data() {
    const that = this;
    return {
      tableUrl: appRestApi.table,
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        }
      },
      treeProps: {
        type: '0'
      },
      formData: {
        registrationTime: { value: '', op: 'between', type: 'DATE', format: 'yyyy-MM-dd' },
        applyStatus: { value: '', op: '=' }, // 应用状态
        applyCode: { value: '', op: 'like' }, // 应用代码
        manufacturerName: { value: '', op: 'like' }, // 承建单位
        policeSpecies: { value: '', op: '=' }, // 所属业务警种
        applyName: { value: '', op: 'like' }, // 应用名称
        orgId: { value: '', op: '=' } // 组织结构
      },
      titleData: [
        { label: '应用名称', prop: 'applyName', width: 120 },
        { label: '应用代码', prop: 'applyCode', width: 120 },
        { label: '应用负责人', prop: 'fzr', width: 120 },
        { label: '应用负责人电话', prop: 'fzrPhone', width: 140 },
        { label: '建设单位负责人', prop: 'jgFzr', width: 140 },
        { label: '建设单位负责人电话', prop: 'jgFzrPhone', width: 180 },
        { label: '所属业务警种', prop: 'policeSpecies', width: 120, code: 'T_MD_POLICE_TYPE' },
        { label: '承建单位', prop: 'manufacturerName', width: 120 },
        { label: '建设单位', prop: 'orgName', width: 120 },
        { label: '注册时间', prop: 'registrationTime', width: 120 }
      ],
      optList: [
        { icon: 'el-icon-edit', tooltip: '修改', on: that.handleEditor },
        { icon: 'el-icon-document', tooltip: '详情', on: that.handleDetail },
        { icon: 'el-icon-delete', tooltip: '删除', on: that.handleDelete }
      ],
      pageOptList: ['新增', '资源获取', '资源同步']
    };
  },
  methods: {
    receviceOpt(opt) {
      if (opt == '新增') {
       this.handleAddDialog();
      } else if (opt == '资源获取') {
        this.handleRemoteResource();
      } else if (opt == '资源获取') {
        this.handleSyncResource();       
      }
    },
    handleGetNode({ id }) {
      const that = this;
      const oldVal = that.formData.orgId.value;
      if (oldVal != id) {
        that.formData.orgId.value = id;
        that.handleSearch();
      }
    },
    // 默认查询跟节点
    submitRootNode({ id, name }) {
      const that = this;
      this.$nextTick(() => {
        that.handleGetNode({ id, name });
      });
    },
    reloadTable() {
      const that = this;
      that.$refs.myTable.$refs.grid.reload();
    },
    handleSearch() {
      this.$refs.myTable.handleSearchClick();
    },
    doSearch() {
      this.formData.orgId.value = '';
      this.handleSearch();
    },
    hanldleReset() {
      const that = this;
      that.formData.orgId.value = '';
      this.$refs.form.resetFields();
    },
    success(message = '操作成功!') {
      const that = this;
      that.$message.success(message);
    },
    fail(message = '操作失败', error) {
      const that = this;
      console.error('[Error]', error);
      that.$message.error(message);
    },
    handleAddDialog() {
      const that = this;
      const layer = that.$dgLayer({
        title: '添加',
        shade: [0.4, '#FFF'],
        content: Editor,
        props: { type: 'create' },
        area: editorArea,
        on: {
          success(bool = false) {
            layer.close(layer.dialogIndex);
            if (bool) {
              that.reloadTable();
            }
          }
        }
      });
    },
    handleEditor({ id }) {
      const that = this;
      appRestApi
        .detail(id)
        .then((res) => {
          const layer = that.$dgLayer({
            title: '修改',
            shade: [0.4, '#FFF'],
            area: editorArea,
            content: Editor,
            props: {
              type: 'update',
              formData: res,
              translateData: [{ value: res.orgId, label: res.orgName }]
            },
            on: {
              success(bool = false) {
                layer.close(layer.dialogIndex);
                if (bool) {
                  that.reloadTable();
                }
              }
            }
          });
        })
        .catch((error) => {
          that.fail('详情获取失败!', error);
        });
    },
    handleDetail({ id }) {
      const that = this;
      appRestApi
        .detail(id)
        .then((res) => {
          const layer = that.$dgLayer({
            title: '详情',
            shade: [0.4, '#FFF'],
            content: Detail,
            props: {
              formData: res,
              translateData: [{ value: res.orgId, label: res.orgName }]
            },
            on: {
              success() {
                layer.close(layer.dialogIndex);
              }
            },
            area: editorArea
          });
        })
        .catch((error) => {
          that.fail('详情获取失败!', error);
        });
    },
    handleDelete({ id }) {
      const that = this;
      that
        .$confirm('是否确认删除？', '提示', {
          distinguishCancelAndClose: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        })
        .then(() => {
          appRestApi
            .del(id)
            .then(() => {
              that.reloadTable();
              that.success('删除成功!');
            })
            .catch((error) => {
              that.fail(error); // 直接提示后端错误信息
            });
        });
    },

    // 获取资源
    handleRemoteResource() {
      const that = this;
      const queryParams = {
        listingAll: true
      };
      getRemoteRource(queryParams)
        .then((res) => {
          that.$message.success('资源获取成功!');
        })
        .catch((err) => {
          that.$message.error(err);
        });
    },
    handleSyncResource() {
      const that = this;
      syncRource()
        .then((res) => {
          that.$message.success('资源同步成功!');
        })
        .catch((err) => {
          that.$message.error(err);
        });
    }
  },
  created() {
    const that = this;
    // select()
    //     .then(res => {
    //         debugger
    //     })
    //     .catch(err => {
    //         that.fail('获取认证因子失败！', err);
    //     })
  }
};
</script>