添加page-opt混入，抽取基础列表页一些公用的方法，可减少大量相似代码

src/api/sync.js

@@ -8,6 +8,15 @@ import request from "@/utils/request";
 
 const baseUrl = "/syncsvr/v2";
 
+export const appSyncUrl = `${baseUrl}/appSync`;
+
+export function sync(url) {
+    return request({
+        url,
+        method: "get"
+    });
+}
+
 // 应用信息同步
 export function appSync() {
     return request({

src/components/search-bar/index.vue

@@ -47,10 +47,11 @@ export default {
     handleSearch() {
       let condition = {};
       this.form.forEach((item) => {
-        const { name, value, op } = item;
+        const { name, value, op, format } = item;
         condition[name] = {
           value,
-          op
+          op,
+          format
         };
       });
       this.$emit('submitSearch', condition);

src/mixins/page-opt.js

@@ -0,0 +1,132 @@
+import { sync } from '@/api/sync';
+import importFile from '@/components/import';
+import FormDetail from '@/components/form-detail';
+import Form from '@/components/form';
+
+// 搜索、重置
+export const searchOpt = {
+  data() {
+    return {
+      condition: {}
+    };
+  },
+  methods: {
+    /**
+     * 查询
+     */
+    receiveSearch(value) {
+      this.condition = value;
+      this.handleSearch();
+    },
+    handleSearch() {
+      this.$nextTick(() => {
+        this.$refs.table.handleSearch();
+      });
+    }
+  }
+};
+
+// 同步
+export const syncOpt = {
+  methods: {
+    handleSync(url) {
+      sync(url).then(res => {
+        this.$message.success('同步中，若数据量大，可能会存在延迟，请稍后自行刷新！');
+        // this.handleSearch();
+      });
+    }
+  }
+};
+
+// 导入
+export const importOpt = {
+  /**
+   * @description: 导入
+   * @param { 接口地址 } action
+   * @param { 下载模板 } temp
+   * @return {*}
+   */
+  handleImport(action, temp) {
+    const vm = this;
+    const layer = this.$dgLayer({
+      title: '导入',
+      content: importFile,
+      props: {
+        temp,
+        action
+      },
+      on: {
+        success(params) {
+          vm.handleSearch();
+          layer.close(layer.dialogIndex);
+        }
+      },
+      cancel: function(index) {
+        // 关闭对应弹窗的ID
+        layer.close(index);
+        return false;
+      },
+      area: ['550px', '500px']
+    });
+  }
+};
+
+// 详情
+export const detailOpt = {
+  methods: {
+    async handleViewDetail(id, { content = FormDetail, config, labelWidth, area, title = '详情' }) {
+      const detailInfo = await this.getDetail(id);
+      this.$dgLayer({
+        title,
+        content,
+        props: {
+          detailInfo,
+          config,
+          labelWidth
+        },
+        area
+      });
+    }
+  }
+};
+
+// 新增or编辑
+export const addEditOpt = {
+  methods: {
+    /**
+     * @description: 新增or编辑
+     * @param { 标题 } title
+     * @param { 类型，新增还是编辑 } type
+     * @param { 详情数据 } detailInfo
+     * @param { 弹出的表单 } content
+     * @param { 表单配置 } config
+     * @param { 表单文字长度 } labelWidth
+     * @param { 弹框的宽高 } area
+     * @return {*}
+     */
+
+    handleOpenEditForm(
+      title,
+      type,
+      { content = Form, config, labelWidth = '120px', area = ['600px', '500px'], detailInfo = {} }
+    ) {
+      const layer = this.$dgLayer({
+        title,
+        content,
+        props: {
+          detailInfo,
+          type,
+          config,
+          labelWidth
+        },
+        on: {
+          success(form, type) {
+            // 此处处理编辑和新增逻辑
+            this.saveForm(form, type, layer);
+          }
+        },
+        area
+      });
+    }
+  }
+};

src/mixins/transfer-business-tag.js

@@ -1,3 +1,4 @@
+/** 业务域转换 */
 import { getBusinessTagTree } from "@/api/data-auth";
 export default {
     data() {

src/pages/data-auth-module/auth-object-manage/appfun-resource-manage/DataConfig.js

@@ -23,7 +23,7 @@ const conditionForm = [
       code: 'DM_APPLY_STATUS'
     }
   }
-]
+];
 
 // 页面操作
 const pageOptList = ['导入', '新增', '同步'];
@@ -31,6 +31,27 @@ const pageOptList = ['导入', '新增', '同步'];
 // 表头操作
 const tableOptList = ['修改', '详情', '删除', '功能配置'];
 
+// 列表
+const tableHeader = [
+  {
+    label: '应用系统编号',
+    prop: 'applyCode'
+  },
+  {
+    label: '应用系统名称',
+    prop: 'applyName'
+  },
+  {
+    label: '应用英文名称',
+    prop: 'appEnglishName'
+  },
+  {
+    label: '应用系统在用标识',
+    prop: 'applyStatus',
+    code: 'DM_APPLY_STATUS'
+  }
+];
+
 // 表单配置
 const appForm = [
   {
@@ -60,7 +81,7 @@ const appForm = [
     value: '',
     attr: {
       placeholder: '',
-      type:"date"
+      type: 'date'
     },
     dateFormat: 'YYYY-MM-DD'
   },
@@ -136,4 +157,4 @@ const appForm = [
   }
 ];
 
-export { conditionForm, pageOptList, tableOptList, appForm };
+export { conditionForm, pageOptList, tableOptList, tableHeader, appForm };

src/pages/data-auth-module/auth-object-manage/appfun-resource-manage/add-app-form.vue

@@ -1,145 +0,0 @@
-<!--
-新增应用
-@Author: linqian
-@Date: 2021-05-17 16:47
--->
-<template>
-  <dg-row>
-    <el-form ref="form" :model="form" :rules="rules" label-width="180px" v-if="show">
-      <dg-col :span="12">
-        <el-form-item label="应用系统名称：" prop="applyName">
-          <el-input v-model="form.applyName" placeholder="" v-if="!isDetail"></el-input>
-          <span v-else>{{ form.applyName }}</span>
-        </el-form-item>
-        <el-form-item label="应用英文名称：" prop="appEnglishName">
-          <el-input v-model="form.appEnglishName" placeholder="" v-if="!isDetail"></el-input>
-          <span v-else>{{ form.appEnglishName }}</span>
-        </el-form-item>
-        <el-form-item label="上线日期：" prop="lineTime">
-          <dg-date-picker type="date" v-model="form.lineTime" v-if="!isDetail"> </dg-date-picker>
-          <span v-else>{{ form.lineTime | dateFormatter('YYYY-MM-DD') }}</span>
-        </el-form-item>
-        <el-form-item label="应用负责人：" prop="fzr">
-          <el-input v-model="form.fzr" placeholder="" v-if="!isDetail"></el-input>
-          <span v-else>{{ form.fzr }}</span>
-        </el-form-item>
-        <el-form-item label="应用系统管理单位名称：" prop="managerOrgName">
-          <el-input v-model="form.managerOrgName" placeholder="" v-if="!isDetail"></el-input>
-          <span v-else>{{ form.managerOrgName }}</span>
-        </el-form-item>
-      </dg-col>
-      <dg-col :span="12">
-        <el-form-item label="应用系统编号：" prop="applyCode">
-          <el-input v-model="form.applyCode" placeholder="" v-if="!isDetail"></el-input>
-          <span v-else>{{ form.applyCode }}</span>
-        </el-form-item>
-        <el-form-item label="应用系统在用标识：" prop="applyStatus">
-          <dg-select v-model="form.applyStatus" v-if="!isDetail" code="DM_APPLY_STATUS"></dg-select>
-          <!-- <span v-else>{{ form.applyStatus == "1" ? "禁用" : "启用"}}</span> -->
-          <div v-else>
-            <div class="u-detail__text" v-translate="{ code: 'DM_APPLY_STATUS' }">
-              {{ form.applyStatus }}
-            </div>
-          </div>
-        </el-form-item>
-        <el-form-item label="应用系统事权单位代码：" prop="orgCode">
-          <el-input v-model="form.orgCode" placeholder="" v-if="!isDetail"></el-input>
-          <span v-else>{{ form.orgCode }}</span>
-        </el-form-item>
-        <el-form-item label="应用系统运维单位名称：" prop="appOpsDepName">
-          <el-input v-model="form.appOpsDepName" placeholder="" v-if="!isDetail"></el-input>
-          <span v-else>{{ form.appOpsDepName }}</span>
-        </el-form-item>
-      </dg-col>
-      <dg-col :span="24">
-        <el-form-item label="应用系统说明：" prop="managerDescribe">
-          <el-input v-model="form.managerDescribe" placeholder="" type="textarea" :rows="3" v-if="!isDetail"></el-input>
-          <span v-else>{{ form.managerDescribe }}</span>
-        </el-form-item>
-      </dg-col>
-    </el-form>
-  </dg-row>
-</template>
-
-<script>
-import { appRestApi } from '@/api/application';
-export default {
-  props: {
-    id: String,
-    isDetail: {
-      type: Boolean,
-      default: false
-    }
-  },
-  components: {},
-  data() {
-    return {
-      form: {
-        applyName: '',
-        appEnglishName: '',
-        lineTime: '',
-        fzr: '',
-        managerOrgName: '',
-        applyCode: '',
-        applyStatus: '',
-        orgCode: '',
-        appOpsDepName: '',
-        managerDescribe: ''
-      },
-      rules: {
-        applyName: [{ required: true, message: '请输入应用系统名称', trigger: 'change' }],
-        applyCode: [{ required: true, message: '请输入应用系统编号', trigger: 'change' }],
-        appEnglishName: [{ required: true, message: '请输入应用英文名称', trigger: 'change' }],
-        applyStatus: [{ required: true, message: '请选择系统在用标识', trigger: 'change' }]
-      },
-      show: false
-    };
-  },
-  computed: {},
-  methods: {
-    /**
-     * 保存
-     */
-    saveForm() {
-      return new Promise((resolve) => {
-        this.$refs.form.validate((valid) => {
-          if (valid) {
-            const api = this.id ? 'update' : 'save';
-            appRestApi[api](this.form)
-              .then((res) => {
-                this.$message.success('保存成功!');
-                resolve('成功');
-              })
-              .catch((error) => {
-                this.$message.error(error);
-              });
-          }
-        });
-      });
-    },
-    /**
-     * 获取详情
-     */
-    getDetail() {
-      appRestApi.detail(this.id).then((res) => {
-        this.form = res;
-        this.show = true;
-      });
-    }
-  },
-  created() {
-    if (this.id) {
-      if (this.isDetail) {
-        this.rules = {};
-      }
-      this.getDetail();
-    } else {
-      this.show = true;
-    }
-  },
-  mounted() {}
-};
-</script>
-
-<style lang='scss'>
-</style>

src/pages/data-auth-module/auth-object-manage/appfun-resource-manage/app-list.vue

@@ -23,48 +23,29 @@
 </template>
 
 <script>
-import importFile from '@/components/import';
 import { appRestApi } from '@/api/application';
-import { appSync } from '@/api/sync';
 import addFuncForm from './add-func-form';
 import { appImportUrl } from '@/api/import';
+import { appSyncUrl } from '@/api/sync';
+import searchBar from '@/components/search-bar';
 import operateBar from '@/components/operate-bar';
 import basicTable from '@/pages/common/new-table';
-import searchBar from '@/components/search-bar';
-import { conditionForm, pageOptList, tableOptList, appForm } from './DataConfig';
-import Form from '@/components/form';
-import FormDetail from '@/components/form-detail';
-
+import { conditionForm, pageOptList, tableOptList, tableHeader, appForm } from './DataConfig';
+import { searchOpt, importOpt, syncOpt, detailOpt, addEditOpt } from '@/mixins/page-opt';
+const labelWidth = '180px';
+const area = ['900px', '600px'];
 export default {
   components: { operateBar, basicTable, searchBar },
+  mixins: [searchOpt, addEditOpt, detailOpt, importOpt, syncOpt],
   data() {
     return {
-      condition: {},
       conditionForm,
       pageOptList,
       tableOptList,
       // 表格请求路径
       tableUrl: appRestApi.table,
       // 表头
-      tableHeader: [
-        {
-          label: '应用系统编号',
-          prop: 'applyCode'
-        },
-        {
-          label: '应用系统名称',
-          prop: 'applyName'
-        },
-        {
-          label: '应用英文名称',
-          prop: 'appEnglishName'
-        },
-        {
-          label: '应用系统在用标识',
-          prop: 'applyStatus',
-          code: 'DM_APPLY_STATUS'
-        }
-      ]
+      tableHeader
     };
   },
   computed: {},
@@ -72,35 +53,29 @@ export default {
     /**
      * 接收操作事件
      */
-    receviceOpt(type, row) {
+    async receviceOpt(type, row) {
+      const otherParams = {
+        config: appForm,
+        labelWidth,
+        area
+      };
       if (type == '修改') {
-        this.handleEdit(row);
+        const detailInfo = await this.getDetail(row.id);
+        this.handleOpenEditForm('编辑', 'update', { ...otherParams, detailInfo });
+      } else if (type == '新增') {
+        this.handleOpenEditForm('新增', 'add', otherParams);
       } else if (type == '详情') {
-        this.handleViewDetail(row);
+        this.handleViewDetail(row.id, otherParams);
       } else if (type == '删除') {
         this.handleDelete(row);
       } else if (type == '功能配置') {
         this.handleSetFunc(row);
       } else if (type == '导入') {
-        this.handleImport();
-      } else if (type == '新增') {
-        this.handleAdd();
+        this.handleImport(appImportUrl, 'apply');
       } else if (type == '同步') {
-        this.handleSync();
+        this.handleSync(appSyncUrl);
       }
     },
-    /**
-     * 查询
-     */
-    receiveSearch(value) {
-      this.condition = value;
-      this.handleSearch();
-    },
-    handleSearch() {
-      this.$nextTick(() => {
-        this.$refs.table.handleSearch();
-      });
-    },
     /**
      * 删除
      */
@@ -126,61 +101,7 @@ export default {
         area: ['1200px', '750px']
       });
     },
-    /**
-     * 导入
-     */
-    handleImport() {
-      const vm = this;
-      const layer = this.$dgLayer({
-        title: '导入',
-        content: importFile,
-        props: {
-          temp: 'apply',
-          action: appImportUrl
-        },
-        on: {
-          success(params) {
-            vm.handleSearch();
-            layer.close(layer.dialogIndex);
-          }
-        },
-        cancel: function (index) {
-          // 关闭对应弹窗的ID
-          layer.close(index);
-          return false;
-        },
-        area: ['550px', '500px']
-      });
-    },
-    /**
-     * 新增
-     */
-    handleAdd() {
-      this.handleOpenEditForm('新增', 'add');
-    },
-    /**
-     * 编辑
-     */
-    async handleEdit(row) {
-      const content = await this.getDetail(row.id);
-      this.handleOpenEditForm('编辑', 'update', content);
-    },
-    /**
-     * 查看详情
-     */
-    async handleViewDetail(row) {
-      const detailInfo = await this.getDetail(row.id);
-      this.$dgLayer({
-        title: '详情',
-        content: FormDetail,
-        props: {
-          detailInfo,
-          config: appForm,
-          labelWidth: '180px'
-        },
-        area: ['900px', '600px']
-      });
-    },
+
     /**
      * 获取详情
      */
@@ -191,45 +112,23 @@ export default {
         });
       });
     },
-
-    handleOpenEditForm(title, type, detailInfo = {}) {
-      const vm = this;
-      const layer = this.$dgLayer({
-        title,
-        content: Form,
-        props: {
-          detailInfo,
-          type,
-          config: appForm,
-          labelWidth: '180px'
-        },
-        on: {
-          success(form, type) {
-            // 此处处理编辑和新增逻辑
-            const api = type == 'update' ? 'update' : 'save';
-            appRestApi[api](form)
-              .then((res) => {
-                vm.$message.success('保存成功!');
-                layer.close(layer.dialogIndex);
-                vm.handleSearch();
-              })
-              .catch((error) => {
-                vm.$message.error(error);
-              });
-          }
-        },
-        area: ['900px', '600px']
-      });
-    },
-
     /**
-     * 同步
+     * @description: 保存表单
+     * @param { 表单数据 } form
+     * @param { 新增还是编辑 } type
+     * @param { 弹框 } layer
      */
-    handleSync() {
-      appSync().then((res) => {
-        this.$message.success('同步中，若数据量大，可能会存在延迟，请稍后自行刷新！');
-        // this.handleSearch();
-      });
+    saveForm(form, type, layer) {
+      const api = type == 'update' ? 'update' : 'save';
+      appRestApi[api](form)
+        .then((res) => {
+          this.$message.success('保存成功!');
+          layer.close(layer.dialogIndex);
+          this.handleSearch();
+        })
+        .catch((error) => {
+          this.$message.error(error);
+        });
     }
   },
   created() {},

src/pages/data-auth-module/auth-subject-manage/app-prop-manage/detail.vue

@@ -1,71 +0,0 @@
-<!--
- * @Author: Liugh
- * @Date: 2021-05-17 16:22:06
- * @LastEditTime: 2021-05-18 14:47:03
- * @LastEditors: Do not edit
- * @Description: 
--->
-<template>
-    <main class="user-attributes-detail">
-        <el-form ref="ruleForm" :model="data" label-width="160px">
-            <el-row>
-                <!-- TODO 如果需要多个占一行，请使用计算属性，或者方法 -->
-                <el-col
-                    :span="item.value == 'managerDescribe' ? 24 : 12"
-                    v-for="(item, index) in applicationField"
-                    :key="index"
-                >
-                    <el-form-item :label="item.label">
-                        <span>{{ data[item.value] }}</span>
-                    </el-form-item>
-                </el-col>
-            </el-row>
-        </el-form>
-    </main>
-</template>
-
-<script>
-import { applicationField } from "../DataConfig";
-export default {
-    name: "user-attributes-detail", // 组件名称
-    props: {
-        data: {
-            type: Object,
-            default() {
-                return {
-                    applyName: "测试数据中",
-                    applyCode: "测试数据中",
-                    appEnglishName: "测试数据中",
-                    applyStatus: "测试数据中",
-                    lineTime: "测试数据中",
-                    managerOrgCode: "测试数据中",
-                    fzr: "测试数据中",
-                    appOpsDepName: "测试数据中",
-                    managerOrgName: "测试数据中",
-                    managerDescribe: "测试数据中"
-                };
-            }
-        }
-    },
-    data() {
-        // 组件内部参数
-        return {
-            // 参数名称及默认值
-            applicationField
-        };
-    },
-    computed: {}, // 计算属性
-    watch: {}, // 侦听器（扩展的计算属性）
-    components: {}, // 注册局部组件
-    methods: {}, // 内部方法
-    beforeCreate() {}, // 组件创建前
-    created() {}, // 组件创建完成后
-    beforeMount() {}, // 组件挂载前
-    mounted() {}, // 组件挂载完成后
-    beforeUpdate() {}, // 组件更新前
-    updated() {}, // 组件挂载完成后
-    beforeDestroy() {}, // 组件销毁前
-    destroyed() {} // 组件销毁完成后
-};
-</script>
-<style lang="scss" scoped></style>

src/pages/data-auth-module/auth-subject-manage/app-prop-manage/index.vue

@@ -7,191 +7,197 @@
  * @Description: 
 -->
 <template>
-    <main class="application-properties">
-        <el-form ref="ruleForm" inline :model="form">
-            <el-form-item label="应用系统名称">
-                <el-input v-model="form.applyName.value" placeholder="请输入应用系统名称" clearable></el-input>
-            </el-form-item>
-            <el-form-item label="应用系统在用标识">
-                <dg-select
-                    v-model="form.applyStatus.value"
-                    placeholder="请选择应用系统在用标识"
-                    code="DM_APPLY_STATUS"
-                    style="width: 13rem"
-                    clearable
-                >
-                </dg-select>
-            </el-form-item>
-            <!-- <el-form-item label="应用系统事权单位代码">
+  <main class="application-properties">
+    <el-form ref="ruleForm" inline :model="form">
+      <el-form-item label="应用系统名称">
+        <el-input v-model="form.applyName.value" placeholder="请输入应用系统名称" clearable></el-input>
+      </el-form-item>
+      <el-form-item label="应用系统在用标识">
+        <dg-select
+          v-model="form.applyStatus.value"
+          placeholder="请选择应用系统在用标识"
+          code="DM_APPLY_STATUS"
+          style="width: 13rem"
+          clearable
+        >
+        </dg-select>
+      </el-form-item>
+      <!-- <el-form-item label="应用系统事权单位代码">
                 <el-input
                     v-model="form.managerOrgCode.value"
                     placeholder="请输入应用系统事权单位代码"
                     clearable
                 ></el-input>
             </el-form-item> -->
-            <el-form-item label="上线日期">
-                <dg-date-picker
-                    v-model="form.lineTime.value"
-                    type="daterange"
-                    range-separator="至"
-                    start-placeholder="开始日期"
-                    end-placeholder="结束日期"
-                    clearable
-                    value-format="yyyyMMddHHmmss"
-                    :unlink-panels="true"
-                >
-                </dg-date-picker>
-            </el-form-item>
-            <el-form-item>
-                <dg-button type="primary" @click="handleSearch" icon="el-icon-search">查询</dg-button>
-                <dg-button type="primary" @click="handleReset" icon="el-icon-refresh-right">重置</dg-button>
-            </el-form-item>
-            <!-- <el-form-item label="最近同步时间：" style="float: right">
+      <el-form-item label="上线日期">
+        <dg-date-picker
+          v-model="form.lineTime.value"
+          type="daterange"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          clearable
+          value-format="yyyyMMddHHmmss"
+          :unlink-panels="true"
+        >
+        </dg-date-picker>
+      </el-form-item>
+      <el-form-item>
+        <dg-button type="primary" @click="handleSearch" icon="el-icon-search">查询</dg-button>
+        <dg-button type="primary" @click="handleReset" icon="el-icon-refresh-right">重置</dg-button>
+      </el-form-item>
+      <!-- <el-form-item label="最近同步时间：" style="float: right">
                 <span>2021-04-08 12:00:00</span>
             </el-form-item> -->
-        </el-form>
-        <div class="buttonGroup">
-            <dg-button type="primary" @click="handleImport" icon="el-icon-upload2">导入</dg-button>
-            <dg-button type="primary" @click="handleSynchro" icon="el-icon-refresh">同步</dg-button>
-        </div>
+    </el-form>
+    <div class="buttonGroup">
+      <dg-button type="primary" @click="handleImport" icon="el-icon-upload2">导入</dg-button>
+      <dg-button type="primary" @click="handleSynchro" icon="el-icon-refresh">同步</dg-button>
+    </div>
 
-        <Table ref="myTable" :url="tableUrl" :headerData="ApplicationTableData" :condition="form">
-            <dg-table-column label="操作" align="center">
-                <template slot-scope="scope">
-                    <div class="u-table__operation">
-                        <el-tooltip content="详情" effect="dark" placement="top-end">
-                            <i class="el-icon-document" @click="handleViewDetail(scope.row)"></i>
-                        </el-tooltip>
-                    </div>
-                </template>
-            </dg-table-column>
-        </Table>
-    </main>
+    <Table ref="myTable" :url="tableUrl" :headerData="ApplicationTableData" :condition="form">
+      <dg-table-column label="操作" align="center">
+        <template slot-scope="scope">
+          <div class="u-table__operation">
+            <el-tooltip content="详情" effect="dark" placement="top-end">
+              <i class="el-icon-document" @click="handleViewDetail(scope.row)"></i>
+            </el-tooltip>
+          </div>
+        </template>
+      </dg-table-column>
+    </Table>
+  </main>
 </template>
 
 <script>
-import Table from "@/pages/common/table";
-import { ApplicationTableData } from "../DataConfig";
-// import detail from "./detail";
-import detail from "../../auth-object-manage/appfun-resource-manage/add-app-form";
-import importFile from "@/components/import";
-import { appRestApi } from "@/api/application";
-import { appSync } from "@/api/sync";
-import { appImportUrl } from "@/api/import";
+import Table from '@/pages/common/table';
+import { ApplicationTableData } from '../DataConfig';
+import FormDetail from '@/components/form-detail';
+import { appForm } from '@/pages/data-auth-module/auth-object-manage/appfun-resource-manage/DataConfig';
+import importFile from '@/components/import';
+import { appRestApi } from '@/api/application';
+import { appSync } from '@/api/sync';
+import { appImportUrl } from '@/api/import';
 export default {
-    name: "application-properties", // 组件名称
-    props: {
-        // 接收父组件的数据
+  name: 'application-properties', // 组件名称
+  props: {
+    // 接收父组件的数据
+  },
+  data() {
+    // 组件内部参数
+    return {
+      // 参数名称及默认值
+      form: {
+        applyName: {
+          value: '',
+          op: 'like'
+        },
+        applyStatus: {
+          value: '',
+          op: '='
+        },
+        managerOrgCode: {
+          value: '',
+          op: 'like'
+        },
+        lineTime: {
+          value: '',
+          op: 'between',
+          type: 'DATE',
+          format: 'yyyyMMddHHmmss'
+        }
+      },
+      ApplicationTableData,
+      tableUrl: appRestApi.table
+    };
+  },
+  computed: {}, // 计算属性
+  watch: {}, // 侦听器（扩展的计算属性）
+  components: { Table }, // 注册局部组件
+  methods: {
+    /**
+     * @description:表单查询方法
+     */
+    handleSearch() {
+      this.$refs.myTable.handleSearchClick();
     },
-    data() {
-        // 组件内部参数
-        return {
-            // 参数名称及默认值
-            form: {
-                applyName: {
-                    value: "",
-                    op: "like"
-                },
-                applyStatus: {
-                    value: "",
-                    op: "="
-                },
-                managerOrgCode: {
-                    value: "",
-                    op: "like"
-                },
-                lineTime: {
-                    value: "",
-                    op: "between",
-                    type: "DATE",
-                    format: "yyyyMMddHHmmss"
-                }
-            },
-            ApplicationTableData,
-            tableUrl: appRestApi.table
-        };
+    /**
+     * 重置
+     */
+    handleReset() {
+      for (const key in this.form) {
+        this.form[key].value = '';
+      }
     },
-    computed: {}, // 计算属性
-    watch: {}, // 侦听器（扩展的计算属性）
-    components: { Table }, // 注册局部组件
-    methods: {
-        /**
-         * @description:表单查询方法
-         */
-        handleSearch() {
-            this.$refs.myTable.handleSearchClick();
+    /**
+     * @description:导入方法
+     */
+    handleImport() {
+      const vm = this;
+      const layer = this.$dgLayer({
+        title: '导入',
+        content: importFile,
+        props: {
+          temp: 'apply',
+          action: appImportUrl
         },
-        /**
-         * 重置
-         */
-        handleReset() {
-            for (const key in this.form) {
-                this.form[key].value = "";
-            }
+        on: {
+          success(params) {
+            layer.close(layer.dialogIndex);
+          },
+          close() {
+            vm.handleSearch();
+            layer.close(layer.dialogIndex);
+          }
         },
-        /**
-         * @description:导入方法
-         */
-        handleImport() {
-            const vm = this;
-            const layer = this.$dgLayer({
-                title: "导入",
-                content: importFile,
-                props: {
-                    temp: "apply",
-                    action: appImportUrl
-                },
-                on: {
-                    success(params) {
-                        layer.close(layer.dialogIndex);
-                    },
-                    close() {
-                        vm.handleSearch();
-                        layer.close(layer.dialogIndex);
-                    }
-                },
-                cancel: function (index, layero) {
-                    // 关闭对应弹窗的ID
-                    layer.close(index);
-                    return false;
-                },
-                area: ["550px", "500px"]
-            });
+        cancel: function (index, layero) {
+          // 关闭对应弹窗的ID
+          layer.close(index);
+          return false;
         },
-        /**
-         * @description:同步方法，假同步
-         */
-        handleSynchro() {
-            appSync().then((res) => {
-                this.$message.success("同步中，若数据量大，可能会存在延迟，请稍后自行刷新！");
-                this.handleSearch();
-            });
+        area: ['550px', '500px']
+      });
+    },
+    /**
+     * @description:同步方法，假同步
+     */
+    handleSynchro() {
+      appSync().then((res) => {
+        this.$message.success('同步中，若数据量大，可能会存在延迟，请稍后自行刷新！');
+        this.handleSearch();
+      });
+    },
+    /**
+     * @description:详情
+     */
+    async handleViewDetail(row) {
+      const detailInfo = await this.getDetail(row.id);
+      this.$dgLayer({
+        title: '详情',
+        content: FormDetail,
+        props: {
+          detailInfo,
+          config: appForm,
+          labelWidth: '180px'
         },
-        /**
-         * @description:详情
-         */
-        handleViewDetail(row) {
-            const layer = this.$dgLayer({
-                title: "详情",
-                shade: [0.4, "#FFF"],
-                content: detail,
-                props: {
-                    id: row.id,
-                    isDetail: true
-                },
-                on: {
-                    success() {
-                        layer.close(layer.dialogIndex);
-                    }
-                },
-                area: ["800px", "450px"]
-            });
-        }
+        area: ['800px', '600px']
+      });
     },
-    created() {}, // 组件创建完成后
-    mounted() {} // 组件挂载完成后
+    /**
+     * 获取详情
+     */
+    getDetail(id) {
+      return new Promise((resolve) => {
+        appRestApi.detail(id).then((res) => {
+          resolve(res);
+        });
+      });
+    }
+  },
+  created() {}, // 组件创建完成后
+  mounted() {} // 组件挂载完成后
 };
 </script>
 <style lang="scss" scoped>
-@import "../index.scss";
+@import '../index.scss';
 </style>