👣 制作团队规范原生模板

kicc-ui/src/assets/styles/index.less

@@ -3,6 +3,7 @@
 @import 'common.less';
 @import 'ant-design/index.less';
 @import 'theme.less';
+@import 'kicc.less';
 
 input:-webkit-autofill {
   -webkit-box-shadow: 0 0 0 1000px white inset !important;

kicc-ui/src/assets/styles/kicc.less

@@ -0,0 +1,29 @@
+/**
+ * @program: kicc-ui
+ * @description: kicc系统相关样式
+ * 在kicc系统中全局调用的样式全部在这里配置
+ * @author: entfrm开发团队-王翔
+ * @create: 2022/4/7
+ */
+
+.table-settings {
+  & > * {
+    margin-right: 12px;
+  }
+
+  svg {
+    width: 1.3em;
+    height: 1.3em;
+  }
+}
+
+.table-title {
+  position: relative;
+  display: flex;
+  padding-left: 7px;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 24px;
+  color: rgba(0, 0, 0, 0.85);
+  cursor: pointer;
+}

kicc-ui/src/components/Table/src/components/settings/index.vue

@@ -62,15 +62,3 @@
     },
   });
 </script>
-<style lang="less">
-  .table-settings {
-    & > * {
-      margin-right: 12px;
-    }
-
-    svg {
-      width: 1.3em;
-      height: 1.3em;
-    }
-  }
-</style>

kicc-ui/src/views/system/config/index.vue

@@ -1,61 +1,167 @@
 <template>
   <div>
-    <BasicTable @register="registerTable"
+    <div :class="[prefixCls, [`${prefixCls}-form-container`]]">
-                @fetch-success="handleSelectionChange"
+      <AForm ref="formElRef"
-                @selection-change="handleSelectionChange"
+             layout="inline"
-    >
+             :colon="false"
-      <template #toolbar>
+             :labelCol="{ style: { width:'50px', 'margin-bottom': '5px' } }"
-        <a-button v-auth="['config_add']"
+             :wrapperCol="{ style: { width: '300px', 'margin-bottom': '5px' } }"
-                  type="primary"
+      >
-                  @click="handleAdd()"
+        <AFormItem label="标题" name="newPassword">
-        >新增参数</a-button>
+          <a-input placeholder="请输入重置密码"/>
-        <a-button v-auth="['config_edit']"
+        </AFormItem>
-                  type="primary"
+        <AFormItem label="姓名"  name="newPassword">
-                  :disabled="state.single"
+          <a-input placeholder="请输入重置密码"/>
-                  @click="handleEdit()"
+        </AFormItem>
-        >修改参数</a-button>
+        <AFormItem label="格式" name="newPassword">
-        <a-button v-auth="['config_del']"
+          <a-input placeholder="请输入重置密码"/>
-                  type="primary"
+        </AFormItem>
-                  :disabled="state.multiple"
+        <AFormItem>
-                  @click="handleDel()"
+          <a-button type="primary"
-        >删除参数</a-button>
+                    class="mr-2">搜索</a-button>
-      </template>
+          <a-button type="primary"
-      <template #action="{ record }">
+                    class="mr-2">重置</a-button>
-        <TableAction :actions="[
+        </AFormItem>
-          {
+      </AForm>
-            label: '编辑',
+      <ATable :dataSource="dataSource" :columns="columns">
-            icon: 'fa6-regular:pen-to-square',
+        <template #title>
-            auth: ['role_edit'],
+          <div style="width: 100%">
-            onClick: handleEdit.bind(null, record)
+            <div class="flex items-center">
-          },
+              <BasicTitle>{{ '参数配置列表' }}</BasicTitle>
-          {
+              <div :class="`${headerPrefixCls}__toolbar`">
-            label: '删除',
+                <a-button type="primary">新增</a-button>
-            icon: 'ant-design:delete-outlined',
+                <a-button type="primary">编辑</a-button>
-            auth: ['role_del'],
+                <Divider type="vertical"/>
-            color: 'error',
+                <div class="table-settings">
-            onClick: handleDel.bind(null, record)
+                  <!--重做-->
-          }]"
+                  <Tooltip placement="top">
-        />
+                    <template #title>
-      </template>
+                      <span>{{ t('common.redo') }}</span>
-    </BasicTable>
+                    </template>
-    <ConfigModal @register="registerModal" @success="handleSuccess"/>
+                    <RedoOutlined @click="() => { console.log(1) }"/>
+                  </Tooltip>
+                  <!--尺寸-->
+                  <Tooltip placement="top">
+                    <template #title>
+                      <span>{{ t('component.table.settingDens') }}</span>
+                    </template>
+                    <Dropdown placement="bottomCenter" :trigger="['click']" :getPopupContainer="getPopupContainer">
+                      <ColumnHeightOutlined />
+                      <template #overlay>
+                        <Menu @click="()=>{console.log(2)}" selectable :selectedKeys="[]">
+                          <MenuItem key="default">
+                            <span>{{ t('component.table.settingDensDefault') }}</span>
+                          </MenuItem>
+                          <MenuItem key="middle">
+                            <span>{{ t('component.table.settingDensMiddle') }}</span>
+                          </MenuItem>
+                          <MenuItem key="small">
+                            <span>{{ t('component.table.settingDensSmall') }}</span>
+                          </MenuItem>
+                        </Menu>
+                      </template>
+                    </Dropdown>
+                  </Tooltip>
+                  <!--全屏-->
+                  <Tooltip placement="top">
+                    <template #title>
+                      <span>{{ t('component.table.settingFullScreen') }}</span>
+                    </template>
+                    <FullscreenOutlined @click="() => {console.log(3)}" />
+                    <!--<FullscreenExitOutlined @click="toggle" v-else />-->
+                  </Tooltip>
+                </div>
+              </div>
+            </div>
+          </div>
+        </template>
+      </ATable>
+    </div>
   </div>
 </template>
 <script lang="ts" setup>
   /**
+   * 提供模板规范代码参考,请尽量保证编写代码风格跟模板规范代码一致
+   * 采用ant-design-vue表格表单组件编写,采用 setup 写法
    * Copyright © 2020-2022 <a href="http://www.entfrm.com/">entfrm</a> All rights reserved.
    * author entfrm开发团队-王翔
    */
-  import { BasicTable, useTable, TableAction } from '/@/components/Table';
+  import { BasicTitle } from '/@/components/Basic';
+  import { RedoOutlined, ColumnHeightOutlined, FullscreenOutlined, FullscreenExitOutlined } from '@ant-design/icons-vue';
+  import { computed, ComputedRef, ref, useSlots } from 'vue';
+  import { Table, Form, Row, Col, Divider, Tooltip, Dropdown, Menu  } from 'ant-design-vue';
+  const  MenuItem = Menu.Item;
+  import { default as TableTitle } from '/@/components/Table/src/components/TableTitle.vue';
+  import {
+    BasicTable,
+    useTable,
+    TableAction,
+    InnerHandlers,
+    ColumnChangeParam,
+    BasicTableProps,
+  } from '/@/components/Table';
+  import { getPopupContainer } from '/@/utils';
   //import { list, remove } from '/@/api/platform/system/controller/config';
   import ConfigModal from './ConfigModal.vue';
-  import { columns, searchFormSchema } from './config.data';
+  import { searchFormSchema } from './config.data';
   import { useMessage } from '/@/hooks/web/useMessage';
-  import { reactive, toRaw } from 'vue';
+  import {reactive, toRaw, unref} from 'vue';
   import {useModal} from "/@/components/Modal";
+  import {useDesign} from "/@/hooks/web/useDesign";
+  import { t } from '/@/hooks/web/useI18n';
+  import { createFormContext } from "/@/components/Form/src/hooks/useFormContext";
+  import {useTableHeader} from "/@/components/Table/src/hooks/useTableHeader";
+  import {basicProps} from "/@/components/Table/src/props";
 
   const { createConfirm } = useMessage();
   const { createMessage } = useMessage();
+  const { prefixCls } = useDesign('basic-table');
+  const { prefixCls: headerPrefixCls } = useDesign('basic-table-header');
+
+  const ATable = Table;
+  const AForm = Form;
+  const AFormItem = Form.Item;
+  const ACol = Col;
+  const ARow = Row;
+
+  const handlers: InnerHandlers = {
+    onColumnsChange: (data: ColumnChangeParam[]) => {
+      console.log(1111);
+    },
+  };
+
+  const dataSource = [
+        {
+          key: '1',
+          name: '胡彦斌',
+          age: 32,
+          address: '西湖区湖底公园1号',
+        },
+        {
+          key: '2',
+          name: '胡彦祖',
+          age: 42,
+          address: '西湖区湖底公园1号',
+        },
+      ];
+
+  const columns = [
+        {
+          title: '姓名',
+          dataIndex: 'name',
+          key: 'name',
+        },
+        {
+          title: '年龄',
+          dataIndex: 'age',
+          key: 'age',
+        },
+        {
+          title: '住址',
+          dataIndex: 'address',
+          key: 'address',
+        },
+      ];
 
   const state = reactive({
     // 选中数组