free-fe-core-modules 0.0.1

package/view/menu/index.vue

@@ -0,0 +1,332 @@
+<template>
+  <div class="admin-menu-mgmt-wrapper full-height q-pa-md">
+    <q-tree
+      :nodes="(data && data.total) ? data.docs : []"
+      ref="menuTree"
+      accordion
+      no-connectors
+      node-key="id"
+      label-key="Label"
+      @lazy-load="loadSubMenus"
+      @update:expanded="onNodeExpanded"
+    >
+      <template v-slot:default-header="prop">
+        <div
+          class="row items-center full-width"
+          style="border-bottom: solid 1px grey;"
+        >
+          <div>
+            {{ prop.node.Label }}
+          </div>
+          <q-space></q-space>
+          <span
+            class="flex justify-start action-buttons"
+            v-if="prop.node.addingNew
+              || (!prop.node.addingNew && !prop.node.isCategory)"
+          >
+            <q-btn
+              v-if="prop.node.addingNew"
+              flat
+              icon="add"
+              @click.stop="addNode(prop.node)"
+            ></q-btn>
+            <q-btn
+              v-if="!prop.node.addingNew && !prop.node.isCategory"
+              flat
+              icon="edit"
+              @click.stop="editNode(prop.node)"
+            ></q-btn>
+            <q-btn
+              v-if="!prop.node.addingNew && !prop.node.isCategory"
+              flat
+              icon="delete"
+              @click.stop="deleteNode(prop.node)"
+            ></q-btn>
+          </span>
+        </div>
+      </template>
+
+      <template v-slot:default-body="prop">
+        <div
+          v-if="prop.node.id === selectedMenuNode.id"
+          class="full-width"
+        >
+          <free-field
+            v-for="(field, fIndex) in menuFields || []"
+            :key="fIndex"
+            :values="editingMenu"
+            :Field="field"
+            :ref="`input_field_validator_${field.Name || field.Label}`"
+          ></free-field>
+
+          <div class="action-btns full-width row justify-center q-gutter-md">
+            <q-btn
+              :label="$t('saveButtonText')"
+              class="btn-primary"
+              @click="onSaveClick"
+            />
+            <q-btn
+              :label="$t('cancelButtonText')"
+              class="btn-secondary"
+              @click="onCancelClick"
+            />
+          </div>
+
+          <sticky-buttons
+            :actions="[
+              {Action: 'cancel', icon:'cancel', Label:$t('cancelButtonText')},
+              {Action: 'save', icon: 'save', Label:$t('saveButtonText')}
+            ]"
+            @click="stickyButtonClicked"
+          ></sticky-buttons>
+        </div>
+      </template>
+    </q-tree>
+  </div>
+</template>
+
+<script>
+import mixins from 'free-fe-mixins';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  name: 'MenuPage',
+  mixins: [mixins.ObjectDataMixin, mixins.InputFieldValidator],
+  props: {
+    addMenu: { type: Function, default: () => { } },
+    editMenu: { type: Function, default: () => { } },
+    deleteMenu: { type: Function, default: () => { } },
+  },
+  data() {
+    return {
+      selectedMenuNode: {},
+      editingMenu: {},
+      menuFields: [],
+    };
+  },
+  watch: {},
+  created() {
+    this.menuFields = this.getModule('core-modules').config.menuFields;
+
+    // add route options
+    for (let i = 0; i < this.menuFields.length; i += 1) {
+      const m = this.menuFields[i];
+
+      if (m.Name === 'Route') {
+        const routeList = [];
+        const generateRouteList = (rs, p = '') => {
+          rs.forEach((r) => {
+            if (!r.path || r.path === '*' || r.path.indexOf(':') >= 0) return;
+
+            const rItem = {
+              Value: `${p}${r.path.startsWith('/') ? '' : '/'}${
+                r.path
+              }`.replace(/\/\//g, '/'),
+            };
+
+            if (r.meta) {
+              rItem.Label = Array.isArray(r.meta)
+                ? r.meta.map((rm) => rm.title).join(' > ')
+                : r.meta;
+            } else {
+              (r.children || []).forEach((rc) => {
+                if (rc.path === '' && rc.meta && !rItem.Label) {
+                  rItem.Label = Array.isArray(rc.meta)
+                    ? rc.meta.map((rm) => rm.title).join(' > ')
+                    : rc.meta;
+                }
+              });
+            }
+
+            rItem.Label = `${rItem.Label || rItem.Value} (${rItem.Value})`;
+
+            routeList.push(rItem);
+
+            if (r.children) {
+              generateRouteList(r.children, rItem.Value);
+            }
+          });
+        };
+
+        generateRouteList(this.ctx.routes);
+
+        m.Options = routeList.sort((a, b) => a.Value - b.Value);
+
+        // add the customize input option
+        m.Options.push({
+          Label: '自定义',
+          Value: 'customize',
+          Extra: [
+            {
+              Name: 'CustomizeRoute',
+              Label: '自定义路径',
+            },
+          ],
+        });
+
+        break;
+      }
+    }
+  },
+  methods: {
+    loadSubMenus({ key, done, node /* , fail */ }) {
+      this.GetData(key, node, node.Category)
+        .then((d) => {
+          if (!d || !d.total || !d.docs) done([]);
+          else {
+            done(d.docs);
+          }
+        })
+        .catch(() => {
+          done([]);
+        });
+    },
+    addNode(n) {
+      if (this.selectedMenuNode && this.selectedMenuNode.id === n.id) {
+        this.selectedMenuNode = {};
+        this.editingMenu = {};
+        this.$refs.menuTree.setExpanded(n.id, false);
+      } else {
+        this.selectedMenuNode = n;
+        this.editingMenu = {
+          Enabled: true,
+          Category: n.Category,
+        };
+      }
+    },
+    editNode(n) {
+      if (this.selectedMenuNode && this.selectedMenuNode.id === n.id) {
+        this.selectedMenuNode = {};
+        this.editingMenu = {};
+        this.$refs.menuTree.setExpanded(n.id, false);
+      } else {
+        this.selectedMenuNode = n;
+        this.editingMenu = { ...n };
+        this.$refs.menuTree.setExpanded(n.id, true);
+      }
+    },
+    deleteNode(n) {
+      if (n.addingNew || !n.id) return;
+
+      this.$MsgDialog({
+        type: '',
+        content: `确认要删除菜单 '${n.Label}' 吗?`,
+        canCancel: true,
+        okText: this.$t('okButtonText'),
+        cancelText: this.$t('cancelButtonText'),
+      })
+        .then(() => {
+          this.deleteMenu(n.id).then((d) => {
+            if (d && d.msg === 'OK') {
+              this.$q.notify(this.$t('notifyDeleted'));
+              this.refreshData();
+            } else {
+              this.$q.notify(this.$t('notifyDeleteFailed'));
+            }
+          });
+        })
+        .catch(() => { });
+    },
+    onSaveClick() {
+      if (!this.validate()) return;
+      if (Object.keys(this.editingMenu) <= 0) return;
+      // if is adding new
+      if (this.selectedMenuNode.addingNew) {
+        this.editingMenu = {
+          lazy: true,
+          Parent: this.selectedMenuNode.Parent,
+          level: this.selectedMenuNode.level,
+          ...this.editingMenu,
+        };
+
+        // fix: the default content for number input will be string!!!!????
+        // convert to number
+        this.editingMenu.Index = Number(this.editingMenu.Index || '0');
+
+        this.addMenu(this.editingMenu).then((r) => {
+          if (r && r.msg === 'OK') {
+            const parent = this.$refs.menuTree.getNodeByKey(this.selectedMenuNode.Parent)
+              || this.$refs.menuTree.getNodeByKey(this.selectedMenuNode.Category);
+
+            if (parent) {
+              parent.children.push(
+                { id: r.data.id, ...this.editingMenu },
+              );
+              parent.children = parent.children.sort(
+                (a, b) => (a ? a.Index : 0) - (b ? b.Index : 0),
+              );
+            } else {
+              this.data.docs.push(
+                { id: r.data.id, ...this.editingMenu },
+              );
+              this.data.docs = this.data.docs.sort(
+                (a, b) => (a ? a.Index : 0) - (b ? b.Index : 0),
+              );
+            }
+          } else {
+            this.$q.notify((r && r.msg) || this.$t('notifyAddFailed'));
+          }
+
+          this.editingMenu = {};
+          this.selectedMenuNode = {};
+        });
+      } else {
+        // editing
+        const updatingMenu = { ...this.editingMenu };
+        delete updatingMenu.children;
+        delete updatingMenu.level;
+        delete updatingMenu.lazy;
+        this.editMenu(updatingMenu).then((r) => {
+          if (r && r.msg === 'OK') {
+            let currentNode = this.$refs.menuTree.getNodeByKey(
+              this.editingMenu.id,
+            );
+            if (currentNode) {
+              currentNode = Object.assign(currentNode, this.editingMenu);
+            }
+
+            // order
+            const parent = this.$refs.menuTree.getNodeByKey(
+              this.selectedMenuNode.Parent,
+            );
+            if (parent) {
+              parent.children = parent.children.sort(
+                (a, b) => (a ? a.Index : 0) - (b ? b.Index : 0),
+              );
+            } else {
+              this.data.docs = this.data.docs.sort(
+                (a, b) => (a ? a.Index : 0) - (b ? b.Index : 0),
+              );
+            }
+          }
+
+          this.editingMenu = {};
+          this.selectedMenuNode = {};
+        });
+      }
+    },
+    onCancelClick() {
+      this.editingMenu = {};
+      this.selectedMenuNode = {};
+    },
+    onNodeExpanded() {
+      this.editingMenu = {};
+      this.selectedMenuNode = {};
+    },
+    stickyButtonClicked(a) {
+      if (!a || !a.Action) return;
+
+      if (a.Action === 'save') {
+        this.onSaveClick();
+      } else if (a.Action === 'cancel') {
+        this.onCancelClick();
+      }
+    },
+  },
+});
+</script>
+
+<style lang="sass" scoped>
+.admin-menu-mgmt-wrapper
+  background: $background
+</style>

package/view/mourning/mourning.vue

@@ -0,0 +1,45 @@
+<template>
+  <span></span>
+</template>
+
+<script>
+import useMourningStore from '../../stores/mourning';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  name: 'mourningNode',
+  mounted() {
+    const mourningStore = useMourningStore();
+
+    this.getRequest('mourning').then((d) => {
+      let inMourning = false;
+      if (d && d.data && d.data.mourning) {
+        inMourning = true;
+      }
+      mourningStore.mourning = inMourning;
+
+      let classes = this.$root.$el.className.split(' ').filter((c) => !!c);
+
+      if (inMourning) {
+        classes.push('mourning-site');
+      } else {
+        // remove
+        classes = classes.filter((c) => c.trim() !== 'mourning-site');
+      }
+
+      this.$root.$el.className = classes.join(' ');
+    });
+  },
+});
+</script>
+
+<style lang="sass">
+.mourning-site
+  -webkit-filter: grayscale(100%)
+  -moz-filter: grayscale(100%)
+  -ms-filter: grayscale(100%)
+  -o-filter: grayscale(100%)
+  filter: grayscale(100%)
+  filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)
+  filter: gray
+</style>

package/view/system/index.vue

@@ -0,0 +1,149 @@
+<template>
+  <div>
+    <q-stepper
+      class="step-left flow-step system-config-wrapper"
+      v-if="data && data.StepsDefinition && data.StepsDefinition.length"
+      v-model="currentStep"
+      animated
+      header-nav
+    >
+      <q-step
+        v-for="(step, index) in data.StepsDefinition"
+        :key="index"
+        :name="step.Index"
+        :title="step.Name"
+        :caption="step.Description"
+        :icon="step.Icon"
+        :prefix="index + 1"
+      >
+        <div
+          v-if="step.Actions && step.Actions.length"
+          class="flow-action-buttons"
+        >
+          <span
+            v-for="(action, aIndex) in step.Actions || []"
+            :key="aIndex"
+          >
+            <q-btn
+              :class="`q-ma-md flow-action-btn-${action.Action || 'unknown'}`"
+              v-if="!Array.isArray(action) && buttonsVisible(action)"
+              :label="action.Label"
+              :icon="action.Icon"
+              @click="permformActions(action)"
+            ></q-btn>
+            <q-btn-group
+              v-if="Array.isArray(action)"
+              push
+              class="q-ma-sm"
+            >
+              <span
+                v-for="(subAction, saIndex) in action"
+                :key="saIndex"
+                :class="saIndex < action.length - 1 ? 'q-mr-sm' : ''"
+              >
+                <q-btn
+                  v-if="buttonsVisible(subAction)"
+                  :label="subAction.Label"
+                  :icon="subAction.Icon"
+                  @click="permformActions(subAction)"
+                  :class="`flow-action-btn-${subAction.Action
+                      || 'unknown'} ${((subAction.Value === data.Status)
+                    || (subAction.Value === data.Enabled)) ?
+                    ' selected': ''}`"
+                ></q-btn>
+              </span>
+            </q-btn-group>
+          </span>
+        </div>
+
+        <div class="flow-step-input-fields">
+          <free-field
+            v-for="(field, fIndex) in step.Fields || []"
+            :key="fIndex"
+            :values="field"
+            :Field="configField(field)"
+            @input="fieldChanged(field)"
+          ></free-field>
+        </div>
+      </q-step>
+    </q-stepper>
+
+    <sticky-buttons
+      :actions="[{Action: 'save', icon: 'save', Label:$t('saveButtonText')}]"
+      @click="permformActions"
+      :fab="false"
+    ></sticky-buttons>
+  </div>
+</template>
+
+<script>
+import mixins from 'free-fe-mixins';
+import { updateConfig } from '../../router/system/api';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  name: 'SystemConfigPage',
+  mixins: [mixins.ObjectDataMixin],
+  props: {
+    buttonsVisible: { type: Function, default: () => true },
+  },
+  data() {
+    return {
+      currentStep: 1,
+      changedFields: [],
+      Actions: {
+        save: (a, that) => {
+          if (!that.changedFields.length) return;
+
+          const updateFuncs = [];
+
+          that.changedFields.forEach((f) => {
+            updateFuncs.push(updateConfig({ id: f.id, Value: f.Value }));
+          });
+
+          if (updateFuncs.length) {
+            Promise.all(updateFuncs).then((vs) => {
+              const failed = vs.find((v) => !v || v.msg !== 'OK');
+              if (failed) {
+                that.$q.notify(that.$t('notifySaveFailed'));
+              } else {
+                that.$q.notify(that.$t('notifySaved'));
+              }
+            });
+          }
+        },
+      },
+    };
+  },
+  computed: {
+    configField() {
+      return (field) => ({ ...field, ...field.Field });
+    },
+  },
+  methods: {
+    permformActions(a) {
+      if (!a.Action) return;
+
+      if (
+        this.Actions[a.Action]
+        && typeof this.Actions[a.Action] === 'function'
+      ) {
+        this.Actions[a.Action](a, this);
+      } else {
+        this.$q.notify(`(${a.Action})${this.$t('notifyActionNotExist')}`);
+      }
+    },
+    fieldChanged(field) {
+      if (!field) return;
+      const existCF = this.changedFields.find((cf) => cf.id === field.id);
+      if (!existCF) {
+        this.changedFields.push({ id: field.id, Value: field.Value });
+      } else {
+        // exists
+        existCF.Value = field.Value;
+      }
+    },
+  },
+  beforeUnmount() { },
+});
+</script>