Merge pull request #20 from daichen-daisy/main

feat: add code field to org type, enterprise and branch
decentfox · May 2, 2023 · 1eb5de2 · 1eb5de2
2 parents 832a7a9 + 2211361
commit 1eb5de2
Show file tree

Hide file tree

Showing 9 changed files with 235 additions and 76 deletions.
diff --git a/quasar.config.js b/quasar.config.js
@@ -29,7 +29,7 @@ module.exports = configure(function (/* ctx */) {
     // app boot file (/src/boot)
     // --> boot files are part of "main.js"
     // https://v2.quasar.dev/quasar-cli-vite/boot-files
-    boot: ['axios'],
+    boot: ['axios', 'utils'],
 
     // https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#css
     css: ['app.scss'],

diff --git a/src/boot/utils.ts b/src/boot/utils.ts
@@ -0,0 +1,40 @@
+import { Notify } from 'quasar';
+import { boot } from 'quasar/wrappers';
+
+declare module '@vue/runtime-core' {
+  interface ComponentCustomProperties {
+    $utils: {
+      copyToClipboard: (text: string) => void;
+    };
+  }
+}
+
+export default boot(({ app }) => {
+  app.config.globalProperties.$utils = {
+    async copyToClipboard(text: string) {
+      try {
+        if (!navigator.clipboard) {
+          Notify.create({
+            message: '您的浏览器不支持复制到剪切板',
+            color: 'negative',
+            position: 'top',
+            classes: 'text-caption',
+            timeout: 1000,
+          });
+        } else {
+          await navigator.clipboard.writeText(text);
+          Notify.create({
+            message: '复制成功',
+            color: 'info',
+            textColor: 'primary',
+            position: 'top',
+            classes: 'text-caption',
+            timeout: 1000,
+          });
+        }
+      } catch (e) {
+        throw e;
+      }
+    },
+  };
+});
diff --git a/src/components/OrgTree.vue b/src/components/OrgTree.vue
@@ -19,7 +19,14 @@
           <q-item v-bind="scope.itemProps">
             <q-item-section>
               <div class="row no-wrap" :style="`width: ${width * 0.8}px;`">
-                <q-item-label lines="1">
+                <q-item-label
+                  :class="
+                    selectedOrgType.id === scope.opt.id
+                      ? `text-weight-bold`
+                      : ``
+                  "
+                  lines="1"
+                >
                   {{ scope.opt.name }}
                 </q-item-label>
                 <q-badge
@@ -88,6 +95,25 @@
         @menu-click="startToCreateObject"
       />
     </q-toolbar>
+    <div class="q-pa-xs row">
+      <q-badge
+        align="middle"
+        :label="!selectedOrgType.is_deleted ? '正常' : '停用'"
+        :class="
+          !selectedOrgType.is_deleted ? 'chip-status-on' : 'chip-status-off'
+        "
+        class="q-pa-sm"
+      />
+      <q-badge
+        label="代码：INNER"
+        class="q-pa-sm q-ml-xs bg-secondary text-black-white cursor-pointer"
+        @click="$utils.copyToClipboard(selectedOrgType.name)"
+      >
+        <q-tooltip anchor="bottom left" self="top start">
+          组织类型的唯一标识符，可用于获取组织类型信息。
+        </q-tooltip>
+      </q-badge>
+    </div>
     <q-separator spaced="sm" />
     <q-toolbar class="q-pa-none">
       <q-input
@@ -205,9 +231,7 @@
     <template #form-content>
       <div class="q-gutter-md q-pa-md">
         <div>
-          <q-item-label class="text-caption hint-label">
-            组织类型名称
-          </q-item-label>
+          <field-label name="组织类型名称" required />
           <q-input
             v-model="orgTypeData.name"
             filled
@@ -219,9 +243,23 @@
           />
         </div>
         <div>
-          <q-item-label class="text-caption hint-label">
-            组织类型描述
-          </q-item-label>
+          <field-label
+            name="组织类型 Code"
+            required
+            hint="组织类型的唯一标识符，可用于获取组织类型信息"
+          />
+          <q-input
+            v-model="orgTypeData.code"
+            filled
+            dense
+            placeholder="请填写组织类型代码"
+            hide-bottom-space
+            :error="!!orgTypeFormError.code"
+            :error-message="orgTypeFormError.code"
+          />
+        </div>
+        <div>
+          <field-label name="组织类型描述" />
           <q-input
             v-model="orgTypeData.description"
             filled
@@ -257,10 +295,22 @@
   >
     <template #form-content>
       <div class="q-gutter-md q-pa-md">
-        <q-item-section>
-          <q-item-label class="text-caption hint-label">
-            企业税务信息
-          </q-item-label>
+        <div>
+          <field-label
+            name="企业机构 Code"
+            required
+            hint="企业机构的唯一标识符，同一组织类型下唯一，可用于获取企业信息"
+          />
+          <q-input
+            v-model="newEnterprise.code"
+            filled
+            dense
+            placeholder="请填写企业机构代码"
+            hide-bottom-space
+          />
+        </div>
+        <div>
+          <field-label name="企业税务信息" required />
           <div class="q-gutter-sm">
             <q-input
               v-model="newEnterprise.name"
@@ -274,17 +324,15 @@
               v-model="newEnterprise.taxId"
               filled
               dense
-              placeholder="请填写15、18或20位纳税识别号"
+              placeholder="请填写 15、18 或 20 位纳税识别号"
               hide-bottom-space
               class="col"
             />
           </div>
-        </q-item-section>
-        <q-separator />
-        <q-item-section>
-          <q-item-label class="text-caption hint-label">
-            企业银行信息
-          </q-item-label>
+        </div>
+
+        <div>
+          <field-label name="企业银行信息" />
           <div class="q-gutter-sm">
             <q-input
               v-model="newEnterprise.issuingBank"
@@ -303,12 +351,10 @@
               class="col"
             />
           </div>
-        </q-item-section>
-        <q-separator />
-        <q-item-section>
-          <q-item-label class="text-caption hint-label">
-            企业办公信息
-          </q-item-label>
+        </div>
+
+        <div>
+          <field-label name="企业办公信息" />
           <div class="q-gutter-sm">
             <q-input
               v-model="newEnterprise.contactAddress"
@@ -327,7 +373,7 @@
               class="col"
             />
           </div>
-        </q-item-section>
+        </div>
       </div>
     </template>
   </form-dialog>
@@ -338,20 +384,16 @@
     width="450px"
   >
     <template #form-content>
-      <div class="q-col-gutter-sm q-pa-md">
+      <div class="q-col-gutter-md q-pa-md">
         <div>
-          <q-item-label class="text-caption hint-label">
-            上级部门
-          </q-item-label>
+          <field-label name="所属上级部门" required />
           <tree-select
             :simple="simple"
             :initial-selected-items="editedBranch"
           />
         </div>
         <div>
-          <q-item-label class="text-caption hint-label">
-            部门名称
-          </q-item-label>
+          <field-label name="部门名称" required />
           <q-input
             v-model="newBranch.name"
             filled
@@ -361,9 +403,21 @@
           />
         </div>
         <div>
-          <q-item-label class="text-caption hint-label">
-            部门描述
-          </q-item-label>
+          <field-label
+            name="部门 Code"
+            required
+            hint="部门分支的唯一标识符，同一企业机构下唯一，可用户获取部门信息"
+          />
+          <q-input
+            v-model="newBranch.code"
+            filled
+            dense
+            placeholder="请填写部门代码"
+            hide-bottom-space
+          />
+        </div>
+        <div>
+          <field-label name="部门描述" />
           <q-input
             v-model="newBranch.desc"
             filled
@@ -393,14 +447,15 @@ import {
 import ConfirmDialog from 'components/dialog/ConfirmDialog.vue';
 import FormDialog from 'components/dialog/FormDialog.vue';
 import DropdownButton from 'components/DropdownButton.vue';
+import FieldLabel from 'components/form/FieldLabel.vue';
 import TreeSelect from 'components/form/TreeSelect.vue';
 
 import { FormDialogComponent } from './dialog/type';
 
 export default defineComponent({
   name: 'OrgTree',
 
-  components: { DropdownButton, FormDialog, TreeSelect },
+  components: { DropdownButton, FieldLabel, FormDialog, TreeSelect },
 
   props: {
     simple: {
@@ -425,6 +480,7 @@ export default defineComponent({
       selectedOrgType: ref<OrgTypeOption>({
         id: '',
         name: '',
+        code: '',
         is_deleted: false,
         is_protected: false,
       }),

diff --git a/src/components/form/FieldLabel.vue b/src/components/form/FieldLabel.vue
@@ -0,0 +1,48 @@
+<template>
+  <q-item-label class="text-caption hint-label">
+    {{ name }}
+    <q-icon
+      v-if="required"
+      name="emergency"
+      size="8px"
+      color="negative"
+      style="vertical-align: top"
+    />
+    <q-icon
+      v-if="hint"
+      name="error_outline"
+      size="14px"
+      class="q-ml-xs"
+      style="vertical-align: top"
+    >
+      <q-tooltip anchor="center right" self="center start">
+        {{ hint }}
+      </q-tooltip>
+    </q-icon>
+  </q-item-label>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  name: 'FieldLabel',
+
+  props: {
+    name: {
+      type: String,
+      default: '',
+    },
+    required: {
+      type: Boolean,
+      default: false,
+    },
+    hint: {
+      type: String,
+      default: '',
+    },
+  },
+});
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/css/app.scss b/src/css/app.scss
@@ -63,8 +63,8 @@
 }
 
 .hint-label {
-  opacity: 0.5;
-  padding-left: 0px;
+  color: $grey-7;
+  padding-left: 2px;
   padding-bottom: 8px;
 }
 
@@ -124,10 +124,11 @@
 
 // Dark Mode
 .body--dark {
-  --q-primary: #215ae5;
+  --q-primary: #3c6fef;
   --q-secondary: rgba(255, 255, 255, 0.07);
+  --q-positive: #4ea161;
   --q-negative: #c95b5b;
-  --q-info: #c95b5b;
+  --q-info: #e9effd;
 
   .secondary-btn {
     background-color: rgba(255, 255, 255, 0.07);

diff --git a/src/css/quasar.variables.scss b/src/css/quasar.variables.scss
@@ -12,15 +12,16 @@
 // to match your app's branding.
 // Tip: Use the "Theme Builder" on Quasar's documentation website.
 
+//$primary: #3c6fef;
 $primary: #215ae5;
 $secondary: rgba(0, 0, 0, 0.05);
 $accent: #f5ae1f;
 
 $dark: #333333;
 $dark-page: #333333;
 
-$positive: #21ba45;
-$negative: #c10015;
+$positive: #4ea161;
+$negative: #c95b5b;
 $info: #e9effd;
 $warning: #f2c037;