Jelajahi Sumber

fix: 基础表格demo、选人控件demo

hanxiaohui 5 bulan lalu
induk
melakukan
d60048fabd
2 mengubah file dengan 99 tambahan dan 8 penghapusan
  1. 52 2
      src/views/form-demo/index.vue
  2. 47 6
      src/views/table-demo/index.vue

+ 52 - 2
src/views/form-demo/index.vue

@@ -1,3 +1,53 @@
 <template>
-  <div>1</div>
-</template>
+  <div>
+    <a-form name="form">
+
+      <a-form-item label="组织人员单选选择器" name="userSelector">
+        <OrgUserSelector  v-model:selected-data="userSelector" :multiple="SELECT_MULTIPLE.ONE" />
+      </a-form-item>
+
+      <a-form-item label="组织人员多选选择器" name="userSelectors">
+        <OrgUserSelector v-model:selected-data="userSelectors" :multiple="SELECT_MULTIPLE.MORE" />
+      </a-form-item>
+    </a-form>
+  </div>
+</template>
+
+<script setup>
+  import OrgUserSelector from '/@/components/BsUi/OrgUserSelector/index.vue';
+  import { ref } from 'vue';
+  import { SELECT_MULTIPLE } from '/@/components/BsUi/constant.js';
+  const userSelectors = ref([
+    {
+      name: '韩晓辉0',
+      id: 'eqwifjqiwejf',
+      parentName: '无限畅联',
+      parentId: '1',
+      nodeType: "USER"
+    },
+    {
+      name: '韩晓辉1',
+      id: 'fqioweoiq',
+      parentName: '无限畅联',
+      parentId: '1',
+      nodeType: "USER"
+    },
+    {
+      name: '韩晓辉55',
+      id: 'jfslkf',
+      parentName: '无限畅联',
+      parentId: '1',
+      nodeType: "USER"
+    },
+  ]);
+
+  const userSelector = ref({
+    name: '韩晓辉1',
+    id: '1',
+    parentName: '无限畅联',
+    parentId: '1',
+    nodeType: "USER"
+  });
+
+
+</script>

+ 47 - 6
src/views/table-demo/index.vue

@@ -14,18 +14,18 @@
 
       <template #toolbarTop>
         <a-space>
-          <a-button type="primary" size="small">新增</a-button>
-          <a-button danger size="small">删除</a-button>
+          <a-button type="primary" size="middle">新增</a-button>
+          <a-button danger size="middle">删除</a-button>
         </a-space>
       </template>
 
       <template #toolbarLeft>
         <a-space>
-          <a-button type="primary" size="small" @click="openModal"> 表格选择器弹窗 </a-button>
+          <a-button type="primary" size="middle" @click="openModal"> 表格选择器弹窗 </a-button>
 
-          <a-button type="primary" size="small" @click="openModalBase"> 弹窗 </a-button>
+          <a-button type="primary" size="middle" @click="openModalBase"> 弹窗 </a-button>
 
-          <a-button type="primary" size="small" @click="handleRefreshTable"> 刷新表格事件 </a-button>
+          <a-button type="primary" size="middle" @click="handleRefreshTable"> 刷新表格事件 </a-button>
           <span>累计客户:XXX|黑名单客户:XXX|S级客户 </span>
         </a-space>
       </template>
@@ -47,10 +47,12 @@
 
 <script setup lang="jsx">
   import BsTable, { useBsTable } from '/@/components/BsUi/Table/index.js';
-  import { onMounted, ref } from 'vue';
+  import {h, onMounted, ref} from 'vue';
   import AddOrEditDrawer from '/@/views/table-demo/components/AddOrEditDrawer.vue';
   import DemoTableSelectorModal from '/@/views/table-demo/components/DemoTableSelectorModal.vue';
   import DemoBaseModal from '/@/views/table-demo/components/DemoBaseModal.vue';
+  import { message } from 'ant-design-vue';
+  import {SearchOutlined} from "@ant-design/icons-vue";
 
   const addOrEditDrawerRef = ref(null);
   const demoTableSelectorModal = ref(null);
@@ -85,6 +87,45 @@
   } = useBsTable({
     tableOptions: {
       url: '/api/get-table',
+      toolbarTopConfig: {
+        enable: true,
+        buttons: [
+          {
+            code: 'btn1',
+            title: '新增',
+            props: {
+              type: 'primary',
+              disabled: false,
+              icon: h(SearchOutlined),
+              onClick(event) {
+                message.success('ok');
+              },
+            },
+          },
+          {
+            code: 'btn2',
+            title: '禁用新增',
+            props: {
+              type: 'primary',
+              danger: true,
+              onClick(event) {
+                setValue("toolbarTopConfig.buttons.0.props.disabled", true)
+              },
+            },
+          },
+          {
+            code: 'btn3',
+            title: '解禁新增',
+            props: {
+              type: 'text',
+              danger: true,
+              onClick(event) {
+                setValue("toolbarTopConfig.buttons.0.props.disabled", false)
+              },
+            },
+          },
+        ],
+      },
       gridOptions: {
         loading: false,
         columns: [