mooho-base-admin-plus 0.1.0

package/src/pages/template/processPage.vue

@@ -0,0 +1,243 @@
+<template>
+  <div>
+    <div class="i-layout-page-header">
+      <PageHeader :title="$route.meta.title" :content="$route.meta.description" hidden-breadcrumb />
+    </div>
+    <Card :bordered="false" dis-hover class="ivu-mt">
+      <view-table ref="table" v-if="page" @create="create">
+        <template #command="{ row }">
+          <Button
+            size="small"
+            v-if="row.application.status != 'Draft' && row.application.status != 'Rejected'"
+            title="详细"
+            type="info"
+            custom-icon="fa fa-file-alt"
+            @click="$refs.showForm.open(row)"
+          ></Button>
+          <Button
+            size="small"
+            v-if="(row.application.status == 'Draft' || row.application.status == 'Rejected') && row.application.applicantID == info.id"
+            title="编辑"
+            type="primary"
+            custom-icon="fa fa-edit"
+            @click="$refs.form.open(row)"
+          ></Button>
+        </template>
+      </view-table>
+    </Card>
+    <modal-form ref="form" v-if="page" @on-after-save="$refs.table.loadData()">
+      <template #footer>
+        <span></span>
+        <Button type="primary" custom-icon="fa fa-cloud-upload-alt" @click="submit">提交</Button>
+        <Button type="primary" custom-icon="fa fa-save" @click="save">保存</Button>
+        <Button
+          type="warning"
+          v-if="$refs.form && $refs.form.data && $refs.form.data.application && $refs.form.data.application.status == 'Rejected'"
+          custom-icon="fa fa-trash-alt"
+          @click="cancel"
+        >
+          撤销
+        </Button>
+        <Button
+          type="info"
+          v-if="$refs.form && $refs.form.data && $refs.form.data.applicationID"
+          custom-icon="fa fa-history"
+          @click="$refs.approvalHistoryTable.open({ processInstID: $refs.form.data.application.processInstID })"
+        >
+          历史
+        </Button>
+      </template>
+    </modal-form>
+    <modal-form ref="showForm" v-if="page" :readonly="page.showViewCode == null" @on-after-save="$refs.table.loadData()">
+      <template #footer>
+        <span></span>
+        <Button
+          type="primary"
+          v-if="
+            $refs.showForm &&
+            $refs.showForm.data &&
+            $refs.showForm.data.application &&
+            $refs.showForm.data.application.processInst &&
+            $refs.showForm.data.application.processInst.isMessageEnable
+          "
+          custom-icon="fa fa-comment-dots"
+          @click="openMessage()"
+        >
+          发表意见
+        </Button>
+        <Button type="info" custom-icon="fa fa-history" @click="$refs.approvalHistoryTable.open({ processInstID: $refs.showForm.data.application.processInstID })">历史</Button>
+      </template>
+    </modal-form>
+    <modal-table ref="approvalHistoryTable" view-code="ApprovalHistoryModal"></modal-table>
+    <Modal v-model="messageOpened" scrollable>
+      <template #header>
+        <div>
+          <span class="title">意见发表</span>
+          <span class="description">Message</span>
+        </div>
+      </template>
+      <div class="ivu-ml-8 ivu-mr-8">
+        <Form ref="messageForm" :model="messageData" label-position="top" label-colon="：" class="ivu-mt" @submit.prevent>
+          <Row :gutter="24" type="flex">
+            <Col v-bind="grid24">
+              <FormItem
+                label="意见内容"
+                key="message"
+                prop="message"
+                :rules="{
+                  required: true,
+                  message: '请输入',
+                  trigger: 'blur,change'
+                }"
+              >
+                <Input type="textarea" :rows="6" v-model="messageData.message" />
+              </FormItem>
+            </Col>
+          </Row>
+        </Form>
+      </div>
+      <template #footer>
+        <Button type="primary" custom-icon="fa fa-check" @click="submitMessage">提交</Button>
+        <Button type="default" custom-icon="fa fa-times" @click="messageOpened = false">关闭</Button>
+      </template>
+    </Modal>
+  </div>
+</template>
+<script>
+  import applicationApi from '../../api/application';
+  import processInstApi from '../../api/processInst';
+  import mixinPage from '../../mixins/page';
+  import { mapActions } from 'vuex';
+
+  export default {
+    // name: this.$route.name,
+    mixins: [mixinPage],
+    components: {},
+    data() {
+      return {
+        applicationType: {},
+        page: {},
+        messageData: {
+          message: null
+        },
+        messageOpened: false
+      };
+    },
+    computed: {},
+    async created() {
+      this.init(this.$route.meta.data.id);
+    },
+    watch: {
+      $route() {
+        if (this.$route.meta.data.id) {
+          this.init(this.$route.meta.data.id);
+        }
+      }
+    },
+    methods: {
+      ...mapActions('admin/viewPage', { loadPage: 'load' }),
+      // 初始化
+      async init(pageID) {
+        let res = await this.loadPage(pageID);
+        this.page = res.customPage;
+
+        this.$refs.table.init(this.page.tableViewCode, () => {
+          this.$refs.table.loadData();
+        });
+
+        if (!!(this.page.formViewCode || '').trim()) {
+          this.$refs.form.init(this.page.formViewCode);
+        }
+
+        if (!!(this.page.formViewCode || '').trim() || !!(this.page.showViewCode || '').trim()) {
+          this.$refs.showForm.init(!(this.page.showViewCode || '').trim() ? this.page.formViewCode : this.page.showViewCode);
+        }
+      },
+      // 创建
+      create() {
+        let application = {
+          status: 'Draft',
+          applicantID: this.info.id,
+          createTime: new Date()
+        };
+
+        this.$refs.form.openDefault({ application });
+      },
+      // 提交
+      async submit() {
+        let isOK = await this.$refs.form.validate();
+
+        if (!isOK) {
+          this.error('有内容不符合要求，请正确填写！');
+        } else {
+          let data = this.$refs.form.getFullData();
+
+          if (!data) {
+            // 表格验证失败
+            return;
+          }
+
+          this.confirm('确定要提交吗？', async () => {
+            await applicationApi.submit(this.page.applicationTypeID, data);
+
+            this.success('提交成功！', () => {
+              this.$refs.table.loadData();
+              this.$refs.form.close();
+            });
+          });
+        }
+      },
+      // 保存
+      async save() {
+        let data = this.$refs.form.getFullData();
+
+        if (!data) {
+          // 表格验证失败
+          return;
+        }
+
+        this.confirm('确定要保存吗？', async () => {
+          let res = await applicationApi.save(this.page.applicationTypeID, data);
+
+          this.success('保存成功！', () => {
+            this.$refs.table.loadData();
+            this.$refs.form.setData(res);
+          });
+        });
+      },
+      // 打开意见输入
+      openMessage() {
+        this.messageData.message = null;
+        this.messageOpened = true;
+      },
+      // 提交意见
+      async submitMessage() {
+        let isOK = await this.$refs.messageForm.validate();
+
+        if (!isOK) {
+          this.error('有内容不符合要求，请正确填写！');
+        } else {
+          this.confirm('确定要发表意见吗？', async () => {
+            await processInstApi.addMessage(this.$refs.showForm.data.application.processInstID, this.messageData.message);
+
+            this.success('操作成功！', () => {
+              this.messageData.message = null;
+              this.messageOpened = false;
+            });
+          });
+        }
+      },
+      // 撤销
+      async cancel() {
+        this.confirm('确定要撤销该申请吗？', async () => {
+          await applicationApi.cancel(this.$refs.form.data.applicationID);
+
+          this.success('操作成功！', () => {
+            this.$refs.table.loadData();
+            this.$refs.form.close();
+          });
+        });
+      }
+    }
+  };
+</script>

package/src/pages/template/reportPage.vue

@@ -0,0 +1,66 @@
+<template>
+  <div>
+    <div class="i-layout-page-header">
+      <PageHeader :title="$route.meta.title" :content="$route.meta.description" hidden-breadcrumb />
+    </div>
+    <Card :bordered="false" dis-hover class="ivu-mt">
+      <view-table ref="table" v-if="page" @on-load-data="onLoadData">
+        <template #middle>
+          <div>
+            <view-chart ref="chart"></view-chart>
+          </div>
+        </template>
+      </view-table>
+    </Card>
+  </div>
+</template>
+<script>
+  import mixinPage from '../../mixins/page';
+  import viewChart from '../../components/view/view-chart.vue';
+  import { mapActions } from 'vuex';
+
+  export default {
+    // name: this.$route.name,
+    mixins: [mixinPage],
+    components: { viewChart },
+    data() {
+      return {
+        page: {},
+        tableView: null
+      };
+    },
+    computed: {},
+    created() {
+      this.init(this.$route.meta.data.id);
+    },
+    watch: {
+      $route() {
+        if (this.$route.meta.data.id) {
+          this.init(this.$route.meta.data.id);
+        }
+      }
+    },
+    methods: {
+      ...mapActions('admin/viewPage', { loadPage: 'load' }),
+      ...mapActions('admin/dataView', { loadView: 'load' }),
+      // 初始化
+      async init(pageID) {
+        let res = await this.loadPage(pageID);
+        this.page = res.customPage;
+
+        res = await this.loadView(this.page.tableViewCode);
+        this.tableView = res.dataView;
+
+        this.$refs.table.init(this.page.tableViewCode, () => {
+          this.$refs.table.loadData();
+        });
+
+        this.$refs.chart.initWithTable(this.tableView, this.$refs.table.data);
+      },
+      // 数据加载完成
+      onLoadData() {
+        this.$refs.chart.loadChart(this.$refs.table.data);
+      }
+    }
+  };
+</script>

package/src/pages/template/viewPage.vue

@@ -0,0 +1,139 @@
+<template>
+  <div>
+    <div class="i-layout-page-header">
+      <PageHeader :title="$route.meta.title" :content="$route.meta.description" hidden-breadcrumb />
+    </div>
+    <Card :bordered="false" dis-hover class="ivu-mt">
+      <view-table
+        ref="table"
+        v-if="page"
+        :createEnable="allow('create')"
+        :removeEnable="allow('remove')"
+        @create="$refs.form.open()"
+        @edit="({ row, index }) => $refs.form.open(row)"
+      >
+        <template #command="{ row }">
+          <Button
+            v-for="item in page.controls"
+            :key="item.id"
+            size="small"
+            :title="item.name"
+            :type="item.colorType.toLowerCase()"
+            :custom-icon="item.icon"
+            @click="controlClick(row, item.targetCode, item.param)"
+          ></Button>
+        </template>
+      </view-table>
+    </Card>
+    <modal-form ref="form" :createEnable="allow('create')" :editEnable="allow('edit')" v-if="page" @on-after-save="$refs.table.loadData()" />
+    <template v-if="inited">
+      <modal-table
+        v-for="table in tables"
+        :key="table.id"
+        :ref="table.code"
+        :view-code="table.dataView.code"
+        @create="param => create(param, table.targetCode)"
+        @edit="({ row, index }) => edit(row, table.targetCode)"
+      >
+        <template command="{ row }">
+          <Button
+            v-for="item in table.controls"
+            :key="item.id"
+            size="small"
+            :title="item.name"
+            :type="item.colorType.toLowerCase()"
+            :custom-icon="item.icon"
+            @click="controlClick(row, item.targetCode, item.param)"
+          ></Button>
+        </template>
+      </modal-table>
+    </template>
+    <template v-if="inited">
+      <modal-form v-for="form in forms" :key="form.id" :ref="form.code" :view-code="form.dataView.code" @on-after-save="aftersave(form.targetCode)" />
+    </template>
+  </div>
+</template>
+<script>
+  import mixinPage from '../../mixins/page';
+  import { mapActions } from 'vuex';
+
+  export default {
+    // name: this.$route.name,
+    mixins: [mixinPage],
+    components: {},
+    data() {
+      return {
+        inited: false,
+        page: {},
+        tables: [],
+        forms: []
+      };
+    },
+    computed: {},
+    mounted() {
+      this.init(this.$route.meta.data.id);
+    },
+    watch: {
+      $route() {
+        if (this.$route.meta.data.id) {
+          this.init(this.$route.meta.data.id);
+        }
+      }
+    },
+    methods: {
+      ...mapActions('admin/viewPage', { loadPage: 'load' }),
+      // 初始化
+      async init(pageID) {
+        let res = await this.loadPage(pageID);
+        this.page = res.customPage;
+
+        this.$refs.table.init(this.page.tableViewCode, () => {
+          this.$refs.table.loadData();
+        });
+
+        if (!!(this.page.formViewCode || '').trim()) {
+          this.$refs.form.init(this.page.formViewCode);
+        }
+
+        this.page.controls = res.customPageControls.filter(item => {
+          return item.customPageComponentID == null;
+        });
+        this.tables = res.customPageComponents.filter(item => {
+          return item.componentType === 'Table';
+        });
+        this.tables.forEach(component => {
+          component.controls = res.customPageControls.filter(item => {
+            return item.customPageComponentID === component.id;
+          });
+        });
+        this.forms = res.customPageComponents.filter(item => {
+          return item.componentType === 'Form';
+        });
+      },
+      // 点击按钮
+      controlClick(data, targetCode, param) {
+        let model = null;
+        if (param) {
+          model = JSON.parse(param);
+          for (let key in model) {
+            model[key] = data[model[key]];
+          }
+        }
+
+        this.$refs[targetCode][0].open(model);
+      },
+      // 点击新增
+      create(param, targetCode) {
+        this.$refs[targetCode][0].openDefault(param);
+      },
+      // 点击修改
+      edit(data, targetCode) {
+        this.$refs[targetCode][0].open(data);
+      },
+      // 新增、修改完成后事件
+      aftersave(targetCode) {
+        this.$refs[targetCode][0].loadData();
+      }
+    }
+  };
+</script>

package/src/plugins/auth/index.js

@@ -0,0 +1,21 @@
+/**
+ * @description 鉴权指令
+ * 当传入的权限当前用户没有时，会移除该组件
+ * 用例：<Tag v-auth="['admin']">text</Tag>
+ * */
+import store from '../../store';
+import { includeArray } from '../../libs/system';
+
+export default {
+  inserted(el, binding) {
+    const { value } = binding;
+    const access = store.state.admin.user.info.access;
+
+    if (value && value instanceof Array && value.length && access && access.length) {
+      const isPermission = includeArray(value, access);
+      if (!isPermission) {
+        el.parentNode && el.parentNode.removeChild(el);
+      }
+    }
+  }
+};

package/src/plugins/error/index.js

@@ -0,0 +1,31 @@
+import { nextTick } from 'vue';
+import store from '../../store';
+import util from '../../libs/util';
+
+export default {
+  install(app) {
+    app.config.errorHandler = function (error, instance, info) {
+      nextTick(() => {
+        // store 追加 log
+        store.dispatch('admin/log/push', {
+          message: `${info}: ${error.message}`,
+          type: 'error',
+          meta: {
+            error
+            // instance
+          }
+        });
+        // 只在开发模式下打印 log
+        if (process.env.NODE_ENV === 'development') {
+          util.log.capsule('Admin Plus', 'ErrorHandler', 'error');
+          util.log.error('>>>>>> 错误信息 >>>>>>');
+          console.log(info);
+          util.log.error('>>>>>> Vue 实例 >>>>>>');
+          console.log(instance);
+          util.log.error('>>>>>> Error >>>>>>');
+          console.log(error);
+        }
+      });
+    };
+  }
+};

package/src/plugins/index.js

@@ -0,0 +1,24 @@
+/**
+ * 插件
+ * */
+
+// 错误捕获
+import pluginError from './error';
+// 日志插件
+//import pluginLog from './log';
+// 鉴权指令
+import directiveAuth from './auth';
+// 对话框
+import sweetalert2 from './sweetalert2';
+
+export default {
+  async install(app) {
+    // 插件
+    app.use(pluginError);
+    //app.use(pluginLog);
+    app.use(sweetalert2);
+
+    // 指令
+    app.directive('auth', directiveAuth);
+  }
+};

package/src/plugins/sweetalert2/index.js

@@ -0,0 +1,20 @@
+import sweetalert2 from 'sweetalert2';
+
+import 'sweetalert2/dist/sweetalert2.min.css';
+
+export default {
+  install: app => {
+    // sweetalert2 的设置默认配置的方法
+    const swal = sweetalert2.mixin({
+      confirmButtonText: '确定',
+      confirmButtonColor: '#2d8cf0',
+      cancelButtonText: '取消'
+    });
+
+    // 添加全局方法
+    //Vue.swal = swal;
+
+    // 添加实例方法
+    app.config.globalProperties.$swal = swal;
+  }
+};