按照新组件改造-服务资源管理- 未完

src/pages/common/basic-page/DataConfig.js

@@ -0,0 +1,161 @@
+/** 服务资源列表页数据项配置 */
+
+// 搜索栏配置
+const conditionForm = [
+    {
+      label: '服务资源名称',
+      name: 'serviceName',
+      op: 'like',
+      value: '',
+      component: 'ElInput',
+      attr: {
+        placeholder: '请输入服务资源名称'
+      }
+    },
+    {
+      label: '服务提供方式',
+      name: 'serviceProvideWay',
+      op: '=',
+      value: '',
+      component: 'DgSelect',
+      attr: {
+        placeholder: '请选择服务提供方式',
+        enum: 'ServiceProvideWayEnum'
+      }
+    },
+    {
+      label: '服务提供应用系统名称',
+      name: 'appName',
+      op: 'like',
+      value: '',
+      component: 'ElInput',
+      attr: {
+        placeholder: '请输入服务提供应用系统名称'
+      }
+    }
+  ];
+  
+  // 页面操作
+  const pageOptList = ['导入', '新增', '同步'];
+  
+  // 表头操作
+  const tableOptList = ['修改', '详情', '删除'];
+  
+  // 列表
+  const tableHeader = [
+    {
+      label: '服务资源标识符',
+      prop: 'serviceCode'
+    },
+    {
+      label: '服务资源名称',
+      prop: 'serviceName'
+    },
+    {
+      label: '服务类型',
+      prop: 'serviceType',
+      enum: 'ServiceResourceTypeEnum'
+    },
+    {
+      label: '是否自用服务',
+      prop: 'mustSelf',
+      enum: 'BooleanEnum'
+    },
+    {
+      label: '服务提供应用系统名称',
+      prop: 'appName'
+    }
+  ];
+  
+  // 表单配置
+  const editForm = [
+    {
+      label: '服务资源标识符',
+      prop: 'serviceCode',
+      component: 'ElInput',
+      value: '',
+      rules: [{ required: true, message: '请输入服务资源标识符', trigger: 'change' }],
+    },
+    {
+      label: '服务类型',
+      prop: 'serviceType',
+      component: 'DgSelect',
+      value: '',
+      rules: [{ required: true, message: '请选择服务类型', trigger: 'change' }],
+      enum: 'ServiceResourceTypeEnum',
+      attr: {
+        enum: 'ServiceResourceTypeEnum'
+      }
+    },
+    {
+      label: '是否自用服务',
+      prop: 'mustSelf',
+      component: 'DgSelect',
+      enum: 'BooleanEnum',
+      value: '',
+      attr: {
+        enum: 'BooleanEnum'
+      }
+    },
+    {
+      label: '服务资源名称',
+      prop: 'serviceName',
+      component: 'ElInput',
+      value: '',
+      rules: [{ required: true, message: '请输入服务资源名称', trigger: 'change' }]
+    },
+    {
+      label: '服务提供方式',
+      prop: 'serviceProvideWay',
+      component: 'DgSelect',
+      value: '',
+      rules: [{ required: true, message: '请选择服务提供方式', trigger: 'change' }],
+      enum: 'ServiceProvideWayEnum',
+      attr: {
+        enum: 'ServiceProvideWayEnum'
+      }
+    },
+    {
+      label: '服务访问地址',
+      prop: 'serviceUrl',
+      component: 'ElInput',
+      value: '',
+      rules: [{ required: true, message: '请输入服务访问地址', trigger: 'change' }],
+      span: 24
+    },
+    {
+      label: '服务提供应用系统名称',
+      prop: 'appCode',
+      component: 'DgSelect',
+      value: '',
+      rules: [{ required: true, message: '请选择服务提供应用系统名称', trigger: 'change' }],
+      attr: {
+        valueName: 'applyCode',
+        labelName: 'applyName',
+        filterable: true,
+        url: "/appsvr/v2/allApps?applyStatus="
+      },
+      // custom: true,
+      span: 24
+    },
+    {
+      label: '应用系统事权单位代码',
+      prop: 'orgCode',
+      component: 'ElInput',
+      value: ''
+    },
+    {
+      label: '服务资源描述',
+      prop: 'remark',
+      component: 'ElInput',
+      attr: {
+        type: 'textarea',
+        rows: 3,
+      },
+      value: '',
+      span: 24
+    }
+  ];
+  
+  export { conditionForm, pageOptList, tableOptList, tableHeader, editForm };
+  

src/pages/common/basic-page/index.vue

@@ -0,0 +1,124 @@
+<!--
+服务资源管理
+@Author: linqian
+@Date: 2021-05-17 13:53
+-->
+<template>
+  <div>
+    <!-- 搜索栏 -->
+    <search-bar :conditionForm="conditionForm" @submitSearch="receiveSearch"></search-bar>
+    <!-- 操作栏 -->
+    <operate-bar :pageOptList="pageOptList" @submitPageOpt="receviceOpt"></operate-bar>
+    <!-- 表格 -->
+    <basic-table
+      ref="table"
+      :tableHeader="tableHeader"
+      :tableUrl="tableUrl"
+      :condition="condition"
+      :tableOptList="tableOptList"
+      @submitTableOpt="receviceOpt"
+    >
+    </basic-table>
+  </div>
+</template>
+
+<script>
+import searchBar from '@/components/search-bar';
+import operateBar from '@/components/operate-bar';
+import basicTable from '@/pages/common/new-table';
+import { conditionForm, pageOptList, tableOptList, tableHeader, editForm } from './DataConfig';
+import { searchOpt, importOpt, syncOpt, detailOpt, addEditOpt } from '@/mixins/page-opt';
+import * as Api from "@/api/ser-resource-manage";
+import { serviceImportUrl } from "@/api/import";
+import { authSerSyncUrl } from "@/api/sync";
+const labelWidth = '180px';
+const area = ['900px', '600px'];
+export default {
+  components: {
+    searchBar,
+    operateBar,
+    basicTable
+  },
+   mixins: [searchOpt, addEditOpt, detailOpt, importOpt, syncOpt],
+  data() {
+    return {
+        conditionForm,
+        pageOptList,
+        tableOptList,
+        tableHeader,
+        tableUrl: Api.tableUrl,
+    };
+  },
+  computed: {},
+  methods: {
+       /**
+     * 接收操作事件
+     */
+    async receviceOpt(type, row) {
+      const otherParams = {
+        config: editForm,
+        labelWidth,
+        area
+      };
+      if (type == '修改') {
+        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.id, otherParams);
+      } else if (type == '删除') {
+        this.handleDelete(row);
+      } else if (type == '导入') {
+        this.handleImport(serviceImportUrl, 'serviceResource');
+      } else if (type == '同步') {
+        this.handleSync(authSerSyncUrl);
+      }
+    },
+      /**
+     * 删除
+     */
+    handleDelete(row) {
+      this.$dgConfirm(`是否确认删除该条应用！`, '提示', {}).then(() => {
+        Api.del(row.id).then((res) => {
+          this.$message.success(res);
+          this.handleSearch();
+        });
+      });
+    },
+       /**
+     * 获取详情
+     */
+    getDetail(id) {
+      return new Promise((resolve) => {
+        Api.detail(id).then((res) => {
+          resolve(res);
+        });
+      });
+    },
+      /**
+     * @description: 保存表单
+     * @param { 表单数据 } form
+     * @param { 新增还是编辑 } type
+     * @param { 弹框 } layer
+     */
+    saveForm(form, type, layer) {
+      const api = type == 'update' ? 'update' : 'save';
+      Api[api](form)
+        .then((res) => {
+          this.$message.success('保存成功!');
+          layer.close(layer.dialogIndex);
+          this.handleSearch();
+        })
+        .catch((error) => {
+          this.$message.error(error);
+        });
+    }
+  },
+  created() {},
+  mounted() {}
+};
+</script>
+
+<style lang='scss'>
+</style>

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

@@ -0,0 +1,160 @@
+/** 服务资源列表页数据项配置 */
+
+// 搜索栏配置
+const conditionForm = [
+  {
+    label: '服务资源名称',
+    name: 'serviceName',
+    op: 'like',
+    value: '',
+    component: 'ElInput',
+    attr: {
+      placeholder: '请输入服务资源名称'
+    }
+  },
+  {
+    label: '服务提供方式',
+    name: 'serviceProvideWay',
+    op: '=',
+    value: '',
+    component: 'DgSelect',
+    attr: {
+      placeholder: '请选择服务提供方式',
+      enum: 'ServiceProvideWayEnum'
+    }
+  },
+  {
+    label: '服务提供应用系统名称',
+    name: 'appName',
+    op: 'like',
+    value: '',
+    component: 'ElInput',
+    attr: {
+      placeholder: '请输入服务提供应用系统名称'
+    }
+  }
+];
+
+// 页面操作
+const pageOptList = ['导入', '新增', '同步'];
+
+// 表头操作
+const tableOptList = ['修改', '详情', '删除'];
+
+// 列表
+const tableHeader = [
+  {
+    label: '服务资源标识符',
+    prop: 'serviceCode'
+  },
+  {
+    label: '服务资源名称',
+    prop: 'serviceName'
+  },
+  {
+    label: '服务类型',
+    prop: 'serviceType',
+    enum: 'ServiceResourceTypeEnum'
+  },
+  {
+    label: '是否自用服务',
+    prop: 'mustSelf',
+    enum: 'BooleanEnum'
+  },
+  {
+    label: '服务提供应用系统名称',
+    prop: 'appName'
+  }
+];
+
+// 表单配置
+const editForm = [
+  {
+    label: '服务资源标识符',
+    prop: 'serviceCode',
+    component: 'ElInput',
+    value: '',
+    rules: [{ required: true, message: '请输入服务资源标识符', trigger: 'change' }],
+  },
+  {
+    label: '服务类型',
+    prop: 'serviceType',
+    component: 'DgSelect',
+    value: '',
+    rules: [{ required: true, message: '请选择服务类型', trigger: 'change' }],
+    enum: 'ServiceResourceTypeEnum',
+    attr: {
+      enum: 'ServiceResourceTypeEnum'
+    }
+  },
+  {
+    label: '是否自用服务',
+    prop: 'mustSelf',
+    component: 'DgSelect',
+    enum: 'BooleanEnum',
+    value: '',
+    attr: {
+      enum: 'BooleanEnum'
+    }
+  },
+  {
+    label: '服务资源名称',
+    prop: 'serviceName',
+    component: 'ElInput',
+    value: '',
+    rules: [{ required: true, message: '请输入服务资源名称', trigger: 'change' }]
+  },
+  {
+    label: '服务提供方式',
+    prop: 'serviceProvideWay',
+    component: 'DgSelect',
+    value: '',
+    rules: [{ required: true, message: '请选择服务提供方式', trigger: 'change' }],
+    enum: 'ServiceProvideWayEnum',
+    attr: {
+      enum: 'ServiceProvideWayEnum'
+    }
+  },
+  {
+    label: '服务访问地址',
+    prop: 'serviceUrl',
+    component: 'ElInput',
+    value: '',
+    rules: [{ required: true, message: '请输入服务访问地址', trigger: 'change' }],
+    span: 24
+  },
+  {
+    label: '服务提供应用系统名称',
+    prop: 'appCode',
+    component: 'DgSelect',
+    value: '',
+    rules: [{ required: true, message: '请选择服务提供应用系统名称', trigger: 'change' }],
+    attr: {
+      valueName: 'applyCode',
+      labelName: 'applyName',
+      filterable: true,
+      url: "/appsvr/v2/allApps?applyStatus="
+    },
+    custom: true,
+    span: 24
+  },
+  {
+    label: '应用系统事权单位代码',
+    prop: 'orgCode',
+    component: 'ElInput',
+    value: ''
+  },
+  {
+    label: '服务资源描述',
+    prop: 'remark',
+    component: 'ElInput',
+    attr: {
+      type: 'textarea',
+      rows: 3,
+    },
+    value: '',
+    span: 24
+  }
+];
+
+export { conditionForm, pageOptList, tableOptList, tableHeader, editForm };

src/pages/data-auth-module/auth-object-manage/service-resource-manage/edit-form.vue

@@ -0,0 +1,64 @@
+
+<template>
+  <div>
+    <edit-form :config="config" :labelWidth="labelWidth" :type="type" :detailInfo="detailInfo">
+      <template #appCode="{ value, item }">
+        <dg-select
+          :data="apps"
+          v-model="appCode"
+          placeholder=""
+          :value="value"
+          @change="handleChange"
+          value-name="applyCode"
+          label-name="applyName"
+          filterable
+        ></dg-select>
+      </template>
+    </edit-form>
+  </div>
+</template>
+
+<script>
+import editForm from '@/components/form';
+export default {
+  props: {
+    config: {
+      type: Array,
+      default: () => []
+    },
+    labelWidth: {
+      type: String,
+      default: '100px'
+    },
+    // 类型，add || update
+    type: String,
+    // 详情
+    detailInfo: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  components: {
+    editForm
+  },
+  data() {
+    return {
+        apps: [{
+            applyCode: "11",
+            applyName: "111"
+        }],
+        appCode: ""
+    };
+  },
+  computed: {},
+  methods: {
+      handleChange(val) {
+      }
+  },
+  created() {},
+  mounted() {}
+};
+</script>
+
+<style lang='scss'>
+</style>

src/pages/data-auth-module/auth-object-manage/service-resource-manage/test.vue

@@ -0,0 +1,125 @@
+<!--
+服务资源管理
+@Author: linqian
+@Date: 2021-05-17 13:53
+-->
+<template>
+  <div>
+    <!-- 搜索栏 -->
+    <search-bar :conditionForm="conditionForm" @submitSearch="receiveSearch"></search-bar>
+    <!-- 操作栏 -->
+    <operate-bar :pageOptList="pageOptList" @submitPageOpt="receviceOpt"></operate-bar>
+    <!-- 表格 -->
+    <basic-table
+      ref="table"
+      :tableHeader="tableHeader"
+      :tableUrl="tableUrl"
+      :condition="condition"
+      :tableOptList="tableOptList"
+      @submitTableOpt="receviceOpt"
+    >
+    </basic-table>
+  </div>
+</template>
+
+<script>
+import searchBar from '@/components/search-bar';
+import operateBar from '@/components/operate-bar';
+import basicTable from '@/pages/common/new-table';
+import { conditionForm, pageOptList, tableOptList, tableHeader, editForm } from './DataConfig';
+import { searchOpt, importOpt, syncOpt, detailOpt, addEditOpt } from '@/mixins/page-opt';
+import * as Api from "@/api/ser-resource-manage";
+import { serviceImportUrl } from "@/api/import";
+import { authSerSyncUrl } from "@/api/sync";
+import editFormLayer from "./edit-form.vue"
+const labelWidth = '180px';
+const area = ['900px', '600px'];
+export default {
+  components: {
+    searchBar,
+    operateBar,
+    basicTable
+  },
+   mixins: [searchOpt, addEditOpt, detailOpt, importOpt, syncOpt],
+  data() {
+    return {
+        conditionForm,
+        pageOptList,
+        tableOptList,
+        tableHeader,
+        tableUrl: Api.tableUrl,
+    };
+  },
+  computed: {},
+  methods: {
+       /**
+     * 接收操作事件
+     */
+    async receviceOpt(type, row) {
+      const otherParams = {
+        config: editForm,
+        labelWidth,
+        area
+      };
+      if (type == '修改') {
+        const detailInfo = await this.getDetail(row.id);
+        this.handleOpenEditForm('编辑', 'update', { ...otherParams, detailInfo });
+      } else if (type == '新增') {
+        this.handleOpenEditForm('新增', 'add', {...otherParams, content: editFormLayer });
+      } else if (type == '详情') {
+        this.handleViewDetail(row.id, otherParams);
+      } else if (type == '删除') {
+        this.handleDelete(row);
+      } else if (type == '导入') {
+        this.handleImport(serviceImportUrl, 'serviceResource');
+      } else if (type == '同步') {
+        this.handleSync(authSerSyncUrl);
+      }
+    },
+      /**
+     * 删除
+     */
+    handleDelete(row) {
+      this.$dgConfirm(`是否确认删除该条应用！`, '提示', {}).then(() => {
+        Api.del(row.id).then((res) => {
+          this.$message.success(res);
+          this.handleSearch();
+        });
+      });
+    },
+       /**
+     * 获取详情
+     */
+    getDetail(id) {
+      return new Promise((resolve) => {
+        Api.detail(id).then((res) => {
+          resolve(res);
+        });
+      });
+    },
+      /**
+     * @description: 保存表单
+     * @param { 表单数据 } form
+     * @param { 新增还是编辑 } type
+     * @param { 弹框 } layer
+     */
+    saveForm(form, type, layer) {
+      const api = type == 'update' ? 'update' : 'save';
+      Api[api](form)
+        .then((res) => {
+          this.$message.success('保存成功!');
+          layer.close(layer.dialogIndex);
+          this.handleSearch();
+        })
+        .catch((error) => {
+          this.$message.error(error);
+        });
+    }
+  },
+  created() {},
+  mounted() {}
+};
+</script>
+
+<style lang='scss'>
+</style>