From 7dd0463161703f0ee6c7dde3c150218d376b6f2d Mon Sep 17 00:00:00 2001
From: hujiale <13306077+hujiale9527@user.noreply.gitee.com>
Date: Thu, 24 Oct 2024 18:57:53 +0800
Subject: [PATCH] =?UTF-8?q?=E6=A8=A1=E6=9D=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/dashboard/home/index.vue        |  13 +-
 .../src/views/dashboard/home/register.vue     | 653 +++++++++++-------
 2 files changed, 404 insertions(+), 262 deletions(-)

diff --git a/apps/web-test/src/views/dashboard/home/index.vue b/apps/web-test/src/views/dashboard/home/index.vue
index 89498e88..a5661eac 100644
--- a/apps/web-test/src/views/dashboard/home/index.vue
+++ b/apps/web-test/src/views/dashboard/home/index.vue
@@ -29,7 +29,6 @@ import {
   Form,
   FormItem,
   Input,
-  InputGroup,
   InputSearch,
   Modal,
   Popover,
@@ -500,13 +499,13 @@ const formState = reactive({
             </div>
           </template>
           <template #content>
-            <InputGroup compact>
+            <div class="shop-seach flex items-center">
               <Select v-model:value="shopFlotter">
                 <SelectOption value="1">全部应用磁贴</SelectOption>
                 <SelectOption value="2">Option2</SelectOption>
               </Select>
-              <InputSearch placeholder="" style="width: 200px" />
-            </InputGroup>
+              <InputSearch placeholder="" />
+            </div>
             <div class="shop-box">
               <!-- <CheckboxGroup v-model:value="selectTilseArr" style="width: 100%"> -->
               <Collapse v-model:active-key="activeKeyArr" style="width: 100%">
@@ -870,4 +869,10 @@ const formState = reactive({
     background: white !important;
   }
 }
+
+.shop-seach :deep(button) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
 </style>
diff --git a/apps/web-test/src/views/dashboard/home/register.vue b/apps/web-test/src/views/dashboard/home/register.vue
index 8e0edfac..d3e3599d 100644
--- a/apps/web-test/src/views/dashboard/home/register.vue
+++ b/apps/web-test/src/views/dashboard/home/register.vue
@@ -1,305 +1,442 @@
-<template>
-    <div class="w-[100%] px-2 bg-background mt-3 min-w-[1200px]">
-        <div class="w-[70%] mx-auto pt-3">
-            <Steps :current="nowCurrent" :items="[
-                {
-                    title: '选择业务域',
-                },
-                {
-                    title: '选择磁贴模板',
-                },
-                {
-                    title: '填写磁贴信息',
-                },
-            ]"></Steps>
-        </div>
-        <div class="flex gap-3 mt-3 pb-2 justify-center">
-            <div class="c-item flex flex-col  items-center">
-                <div class="s-t my-3">请选择业务域</div>
-                <Form layout="inline" :wrapperCol="wrapperCol">
-                    <FormItem label="名称">
-                        <Input placeholder="请输入"></Input>
-                    </FormItem>
-                    <FormItem label="编码">
-                        <Input placeholder="请输入"></Input>
-                    </FormItem>
-                    <Button type="primary">查询</Button>
-                </Form>
-                <div class="text-xs flex gap-1">
-                    <InfoCircleFilled />
-                    <div>如果找不到相关业务，请<Button type="link">点击此处</Button>新建</div>
-                </div>
-
-                <vxe-table border ref="tableRef" height="70%" :data="tableData" :radio-config="{ highlight: true }"
-                    @cell-click="cellClickEvent" @radio-change="radioChangeEvent">
-                    <vxe-column type="radio" width="60">
-                        <template #header>
-                            <vxe-button mode="text" @click="clearRadioRowEevnt" :disabled="!selectRow">取消</vxe-button>
-                        </template>
-                    </vxe-column>
-                    <vxe-column field="code" title="业务域编码" width="120"></vxe-column>
-                    <vxe-column field="name" title="业务域名称" width="120"></vxe-column>
-                </vxe-table>
-                <div class="flex justify-end w-[100%] px-3 py-3" v-if="nowCurrent == 0">
-                    <Button type="primary" size="large" shape="circle" @click="selectTemplate(1)">
-                        <template #icon>
-                            <ArrowRightOutlined />
-                        </template>
-                    </Button>
-                </div>
-                <!-- <ArrowLeftOutlined /> -->
-            </div>
-            <div class="c-item flex flex-col  items-center" v-show="nowCurrent >= 1">
-                <div class="s-t my-3">请选择磁贴模板</div>
-                <div class="flex flex-wrap h-[100%] gap-3 justify-center ">
-                    <div class="template-item flex flex-col justify-center gap-1 items-center"
-                        :class="{ 'active': templateNum == index }" v-for="(item, index) in templateList" :key="index"
-                        @click="templateClickNum(index)">
-                        <img :src="'/xbyt/' + item.img" class="w-[70px] h-[70px] object-contain">
-                        <div class="text-xs">{{ item.name }}</div>
-
-                        <div class="active-icon" v-if="templateNum == index">
-                            <CheckCircleFilled style="color: hsl(var(--primary));font-size: 20px;"/>
-                        </div>
-                    </div>
-                    <div class="opacity-0 template-item flex flex-col justify-center gap-1 items-center" style="cursor: default;"
-                        v-if="templateList.length % 3 == 2"></div>
-                    <template v-if="templateList.length % 3 == 1">
-                        <div class="opacity-0 template-item flex flex-col justify-center gap-1 items-center" style="cursor: default;"></div>
-                        <div class="opacity-0 template-item flex flex-col justify-center gap-1 items-center" style="cursor: default;"></div>
-                    </template>
-                </div>
-                <div class="flex justify-between w-[100%] px-3 py-3" v-if="nowCurrent == 1">
-                    <Button type="primary" size="large" shape="circle" @click="selectTemplate(0)">
-                        <template #icon>
-                            <ArrowLeftOutlined />
-                        </template>
-                    </Button>
-                    <Button type="primary" size="large" shape="circle" @click="selectTemplate(2)">
-                        <template #icon>
-                            <ArrowRightOutlined />
-                        </template>
-                    </Button>
-                </div>
-            </div>
-            <div class="c-item flex flex-col  items-center" v-show="nowCurrent >= 2">
-                <div class="s-t my-3">请填写磁贴信息</div>
-                <div class="form-box">
-                    <Form :wrapperCol="{ style: { width: '300px' } }" :labelCol="{ style: { width: '80px' } }">
-                        <FormItem label="业务域" :rules="[{ required: true, message: '请输入业务域' }]">
-                            <Input placeholder="请输入"></Input>
-                        </FormItem>
-                        <FormItem label="适用范围" :rules="[{ required: true, message: '请选择适用范围' }]">
-                            <Select placeholder="请选择"></Select>
-                        </FormItem>
-                        <FormItem label="编码" :rules="[{ required: true, message: '请输入编码' }]">
-                            <Input placeholder="请输入"></Input>
-                        </FormItem>
-                        <FormItem label="标题" :rules="[{ required: true, message: '请输入标题' }]">
-                            <Input placeholder="请输入"></Input>
-                        </FormItem>
-                        <FormItem label="链接地址" :rules="[{ required: true, message: '请输入链接地址' }]">
-                            <Input placeholder="请输入"></Input>
-                        </FormItem>
-                        <FormItem label="数据源">
-                            <Input placeholder="请输入"></Input>
-                        </FormItem>
-                        <FormItem label="磁贴大小">
-                            <div class="flex items-center gap-4">
-                                <div class="flex items-center">
-                                    宽：
-                                    <Select>
-                                        <SelectOption value="1">1</SelectOption>
-                                        <SelectOption value="2">2</SelectOption>
-                                    </Select>
-                                </div>
-                                ×
-                                <div class="flex items-center">
-                                    高：
-                                    <Select>
-                                        <SelectOption value="1">1</SelectOption>
-                                        <SelectOption value="2">2</SelectOption>
-                                    </Select>
-                                </div>
-                            </div>
-                        </FormItem>
-                        <FormItem label="图标" :rules="[{ required: true, message: '请上传图标' }]">
-                            <Input placeholder="请输入"></Input>
-                        </FormItem>
-                        <FormItem label="打开方式">
-                            <Select placeholder="请选择"></Select>
-                        </FormItem>
-                        <FormItem label="作者" :rules="[{ required: true, message: '请输入作者' }]">
-                            <Input placeholder="请输入"></Input>
-                        </FormItem>
-                        <FormItem label="联系方式" :rules="[{ required: true, message: '请输入联系方式' }]">
-                            <div>
-                                <Input placeholder="请输入"></Input>
-                                <Checkbox>经过授权才可使用</Checkbox>
-                            </div>
-                        </FormItem>
-                        <FormItem label="描述">
-                            <Textarea placeholder="请输入"></Textarea>
-                        </FormItem>
-                    </Form>
-                </div>
-                <div class="flex justify-between w-[100%] px-3 py-3" v-if="nowCurrent == 2">
-                    <Button type="primary" size="large" shape="circle" @click="selectTemplate(1)">
-                        <template #icon>
-                            <ArrowLeftOutlined />
-                        </template>
-                    </Button>
-                    <Button type="primary" size="large" shape="circle" @click="selectTemplate(3)">
-                        <template #icon>
-                            <ArrowRightOutlined />
-                        </template>
-                    </Button>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
 <script setup lang="ts">
-import { ref, reactive, watch } from 'vue'
-import { Steps } from 'ant-design-vue';
-import { InfoCircleFilled, ArrowRightOutlined, ArrowLeftOutlined,CheckCircleFilled } from '@ant-design/icons-vue';
-import { type VxeGridProps, VxeUI } from 'vxe-table'
-import { VXETable, type VxeTableInstance, type VxeTableEvents } from 'vxe-table'
+import { ref, watch } from 'vue';
 
-import { Button, Form, FormItem, Input, Select, Card, Pagination, Textarea, Checkbox } from 'ant-design-vue';
 import { preferences } from '@vben/preferences';
 
+import {
+  ArrowLeftOutlined,
+  ArrowRightOutlined,
+  CheckCircleFilled,
+  InfoCircleFilled,
+} from '@ant-design/icons-vue';
+import {
+  Button,
+  Checkbox,
+  Form,
+  FormItem,
+  Input,
+  Select,
+  Steps,
+  Textarea,
+} from 'ant-design-vue';
+import {
+  VXETable,
+  type VxeTableEvents,
+  type VxeTableInstance,
+  VxeUI,
+} from 'vxe-table';
+
 const wrapperCol = { style: { width: '100px' } };
-watch(() => preferences.theme.mode, (n: any) => {
-    VxeUI.setTheme(n)
-},{
+watch(
+  () => preferences.theme.mode,
+  (n: any) => {
+    VxeUI.setTheme(n);
+  },
+  {
     deep: true,
-    immediate: true
-})
+    immediate: true,
+  },
+);
 interface RowVO {
-    code: string
-    name: string
+  code: string;
+  name: string;
 }
 
-const selectRow = ref<RowVO | null>(null)
+const selectRow = ref<null | RowVO>(null);
 
 const tableData = ref<RowVO[]>([
-    { code: "xzczcz", name: "个人工作台" },
-    { code: "xzczcz", name: "综合行政" },
-    { code: "xzczcz", name: "经营管理" },
-    { code: "xzczcz", name: "安全生产" },
-    { code: "xzczcz", name: "勘探开发" },
-    { code: "xzczcz", name: "数据管理" },
-    { code: "xzczcz", name: "中心工作" },
-    { code: "xzczcz", name: "总部系统" },
-    { code: "xzczcz", name: "功能模块" },
-    { code: "xzczcz", name: "工程院系统" },
-])
+  { code: 'xzczcz', name: '个人工作台' },
+  { code: 'xzczcz', name: '综合行政' },
+  { code: 'xzczcz', name: '经营管理' },
+  { code: 'xzczcz', name: '安全生产' },
+  { code: 'xzczcz', name: '勘探开发' },
+  { code: 'xzczcz', name: '数据管理' },
+  { code: 'xzczcz', name: '中心工作' },
+  { code: 'xzczcz', name: '总部系统' },
+  { code: 'xzczcz', name: '功能模块' },
+  { code: 'xzczcz', name: '工程院系统' },
+]);
 
-const tableRef = ref<VxeTableInstance<RowVO>>()
+const tableRef = ref<VxeTableInstance<RowVO>>();
 
 const cellClickEvent: VxeTableEvents.CellClick<RowVO> = () => {
-    console.log('单元格点击事件')
-}
+  console.log('单元格点击事件');
+};
 
 const radioChangeEvent: VxeTableEvents.RadioChange<RowVO> = ({ row }) => {
-    selectRow.value = row
-    console.log('单选事件')
-}
+  selectRow.value = row;
+  console.log('单选事件');
+};
 
 const setSelectRow = (index: number) => {
-    const $table = tableRef.value
-    if ($table) {
-        $table.setRadioRow(tableData.value[index])
-    }
-}
+  const $table = tableRef.value;
+  if ($table) {
+    $table.setRadioRow(tableData.value[index]);
+  }
+};
 
 const clearRadioRowEevnt = () => {
-    const $table = tableRef.value
-    if ($table) {
-        selectRow.value = null
-        $table.clearRadioRow()
-    }
-}
+  const $table = tableRef.value;
+  if ($table) {
+    selectRow.value = null;
+    $table.clearRadioRow();
+  }
+};
 
 const getRadioEvent = () => {
-    const $table = tableRef.value
-    if ($table) {
-        const currRow = $table.getRadioRecord()
-        VXETable.modal.alert(JSON.stringify(currRow))
-    }
-}
-const templateList = [{
+  const $table = tableRef.value;
+  if ($table) {
+    const currRow = $table.getRadioRecord();
+    VXETable.modal.alert(JSON.stringify(currRow));
+  }
+};
+const templateList = [
+  {
     img: 'AUTO_1612159241967_C车辆调度.png',
-    name: '多媒体'
-}, {
+    name: '多媒体',
+  },
+  {
     img: 'AUTO_1612160044533_C市场管理.png',
-    name: '柱状图'
-}, {
+    name: '柱状图',
+  },
+  {
     img: 'AUTO_1612174485058_C投资共享.png',
-    name: '卡片'
-}, {
+    name: '卡片',
+  },
+  {
     img: 'AUTO_1612175576303_C费用报销.png',
-    name: '自定义'
-}, {
+    name: '自定义',
+  },
+  {
     img: 'AUTO_1612175837663_C设备管理.png',
-    name: '仪表盘'
-}, {
+    name: '仪表盘',
+  },
+  {
     img: 'AUTO_1612176568856_C财务管理.png',
-    name: '折线图'
-}, {
+    name: '折线图',
+  },
+  {
     img: 'AUTO_1612176967032_C土地信息.png',
-    name: '列表'
-}, {
+    name: '列表',
+  },
+  {
     img: 'AUTO_1612236164722_C门户网站.png',
-    name: '数字'
-}, {
+    name: '数字',
+  },
+  {
     img: 'AUTO_1612251274093_C集输防腐.png',
-    name: '饼图'
-}, {
+    name: '饼图',
+  },
+  {
     img: 'AUTO_1612254108987_C新井日报.png',
-    name: '快捷入口'
-}, {
+    name: '快捷入口',
+  },
+  {
     img: 'AUTO_1612254711440_C单井曲线.png',
-    name: '文本'
-}]
+    name: '文本',
+  },
+];
 
-let nowCurrent = ref(0);
-let selectTemplate = (index: number) => {
-    nowCurrent.value = index
-}
+const nowCurrent = ref(0);
+const selectTemplate = (index: number) => {
+  nowCurrent.value = index;
+};
 
-let templateNum = ref(0);
-let templateClickNum = (index: number) => {
-    templateNum.value = index
-}
+const templateNum = ref(0);
+const templateClickNum = (index: number) => {
+  templateNum.value = index;
+};
 </script>
+<template>
+  <div class="bg-background mt-3 w-[100%] min-w-[1200px] px-2">
+    <div class="mx-auto w-[70%] pt-3">
+      <Steps
+        :current="nowCurrent"
+        :items="[
+          {
+            title: '选择业务域',
+          },
+          {
+            title: '选择磁贴模板',
+          },
+          {
+            title: '填写磁贴信息',
+          },
+        ]"
+      />
+    </div>
+    <div class="mt-3 flex justify-center gap-3 pb-2">
+      <div class="c-item flex flex-col items-center">
+        <div class="s-t my-3">请选择业务域</div>
+        <Form :wrapper-col="wrapperCol" layout="inline">
+          <FormItem label="名称">
+            <Input placeholder="请输入" />
+          </FormItem>
+          <FormItem label="编码">
+            <Input placeholder="请输入" />
+          </FormItem>
+          <Button type="primary">查询</Button>
+        </Form>
+        <div class="flex gap-1 text-xs">
+          <InfoCircleFilled />
+          <div>
+            如果找不到相关业务，请<Button type="link">点击此处</Button>新建
+          </div>
+        </div>
+
+        <vxe-table
+          ref="tableRef"
+          :data="tableData"
+          :radio-config="{ highlight: true }"
+          border
+          height="70%"
+          @cell-click="cellClickEvent"
+          @radio-change="radioChangeEvent"
+        >
+          <vxe-column type="radio" width="60">
+            <template #header>
+              <vxe-button
+                :disabled="!selectRow"
+                mode="text"
+                @click="clearRadioRowEevnt"
+              >
+                取消
+              </vxe-button>
+            </template>
+          </vxe-column>
+          <vxe-column field="code" title="业务域编码" width="120" />
+          <vxe-column field="name" title="业务域名称" width="120" />
+        </vxe-table>
+        <div
+          v-if="nowCurrent == 0"
+          class="next-box flex w-[100%] justify-end px-3 py-3"
+        >
+          <Button
+            shape="circle"
+            size="large"
+            type="primary"
+            @click="selectTemplate(1)"
+          >
+            <template #icon>
+              <ArrowRightOutlined />
+            </template>
+          </Button>
+        </div>
+        <!-- <ArrowLeftOutlined /> -->
+      </div>
+      <div v-show="nowCurrent >= 1" class="c-item flex flex-col items-center">
+        <div class="s-t my-3">请选择磁贴模板</div>
+        <div class="flex h-[100%] flex-wrap justify-center gap-3">
+          <div
+            v-for="(item, index) in templateList"
+            :key="index"
+            :class="{ active: templateNum == index }"
+            class="template-item flex flex-col items-center justify-center gap-1"
+            @click="templateClickNum(index)"
+          >
+            <img
+              :src="`/xbyt/${item.img}`"
+              class="h-[70px] w-[70px] object-contain"
+            />
+            <div class="text-xs">{{ item.name }}</div>
+
+            <div v-if="templateNum == index" class="active-icon">
+              <CheckCircleFilled
+                style="color: hsl(var(--primary)); font-size: 20px"
+              />
+            </div>
+          </div>
+          <div
+            v-if="templateList.length % 3 == 2"
+            class="template-item flex flex-col items-center justify-center gap-1 opacity-0"
+            style="cursor: default"
+          ></div>
+          <template v-if="templateList.length % 3 == 1">
+            <div
+              class="template-item flex flex-col items-center justify-center gap-1 opacity-0"
+              style="cursor: default"
+            ></div>
+            <div
+              class="template-item flex flex-col items-center justify-center gap-1 opacity-0"
+              style="cursor: default"
+            ></div>
+          </template>
+        </div>
+        <div
+          v-if="nowCurrent == 1"
+          class="next-box flex w-[100%] justify-between px-3 py-3"
+        >
+          <Button
+            shape="circle"
+            size="large"
+            type="primary"
+            @click="selectTemplate(0)"
+          >
+            <template #icon>
+              <ArrowLeftOutlined />
+            </template>
+          </Button>
+          <Button
+            shape="circle"
+            size="large"
+            type="primary"
+            @click="selectTemplate(2)"
+          >
+            <template #icon>
+              <ArrowRightOutlined />
+            </template>
+          </Button>
+        </div>
+      </div>
+      <div v-show="nowCurrent >= 2" class="c-item flex flex-col items-center">
+        <div class="s-t my-3">请填写磁贴信息</div>
+        <div class="form-box">
+          <Form
+            :label-col="{ style: { width: '80px' } }"
+            :wrapper-col="{ style: { width: '300px' } }"
+          >
+            <FormItem
+              :rules="[{ required: true, message: '请输入业务域' }]"
+              label="业务域"
+            >
+              <Input placeholder="请输入" />
+            </FormItem>
+            <FormItem
+              :rules="[{ required: true, message: '请选择适用范围' }]"
+              label="适用范围"
+            >
+              <Select placeholder="请选择" />
+            </FormItem>
+            <FormItem
+              :rules="[{ required: true, message: '请输入编码' }]"
+              label="编码"
+            >
+              <Input placeholder="请输入" />
+            </FormItem>
+            <FormItem
+              :rules="[{ required: true, message: '请输入标题' }]"
+              label="标题"
+            >
+              <Input placeholder="请输入" />
+            </FormItem>
+            <FormItem
+              :rules="[{ required: true, message: '请输入链接地址' }]"
+              label="链接地址"
+            >
+              <Input placeholder="请输入" />
+            </FormItem>
+            <FormItem label="数据源">
+              <Input placeholder="请输入" />
+            </FormItem>
+            <FormItem label="磁贴大小">
+              <div class="flex items-center gap-4">
+                <div class="flex items-center">
+                  宽：
+                  <Select>
+                    <SelectOption value="1">1</SelectOption>
+                    <SelectOption value="2">2</SelectOption>
+                  </Select>
+                </div>
+                ×
+                <div class="flex items-center">
+                  高：
+                  <Select>
+                    <SelectOption value="1">1</SelectOption>
+                    <SelectOption value="2">2</SelectOption>
+                  </Select>
+                </div>
+              </div>
+            </FormItem>
+            <FormItem
+              :rules="[{ required: true, message: '请上传图标' }]"
+              label="图标"
+            >
+              <Input placeholder="请输入" />
+            </FormItem>
+            <FormItem label="打开方式">
+              <Select placeholder="请选择" />
+            </FormItem>
+            <FormItem
+              :rules="[{ required: true, message: '请输入作者' }]"
+              label="作者"
+            >
+              <Input placeholder="请输入" />
+            </FormItem>
+            <FormItem
+              :rules="[{ required: true, message: '请输入联系方式' }]"
+              label="联系方式"
+            >
+              <div>
+                <Input placeholder="请输入" />
+                <Checkbox>经过授权才可使用</Checkbox>
+              </div>
+            </FormItem>
+            <FormItem label="描述">
+              <Textarea placeholder="请输入" />
+            </FormItem>
+          </Form>
+        </div>
+        <div
+          v-if="nowCurrent == 2"
+          class="next-box flex w-[100%] justify-between px-3 py-3"
+        >
+          <Button
+            shape="circle"
+            size="large"
+            type="primary"
+            @click="selectTemplate(1)"
+          >
+            <template #icon>
+              <ArrowLeftOutlined />
+            </template>
+          </Button>
+          <Button
+            shape="circle"
+            size="large"
+            type="primary"
+            @click="selectTemplate(3)"
+          >
+            <template #icon>
+              <ArrowRightOutlined />
+            </template>
+          </Button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
 <style scoped lang="scss">
 .c-item {
-    border: 1px solid #ccc;
-    flex: .3333;
-    height: calc(100vh - 150px);
+  border: 1px solid #ccc;
+  flex: 0.3333;
+  height: calc(100vh - 150px);
 }
 
 .template-item {
-    border: 1px solid #ccc;
-    width: 30%;
-    cursor: pointer;
-    position: relative;
+  border: 1px solid #ccc;
+  width: 30%;
+  cursor: pointer;
+  position: relative;
 
-    .active-icon {
-        position: absolute;
-        right: 3px;
-        top: 3px;
-    }
+  .active-icon {
+    position: absolute;
+    right: 3px;
+    top: 3px;
+  }
 
-    &.active {
-        border: 1px solid hsl(var(--primary));
-    }
+  &.active {
+    border: 1px solid hsl(var(--primary));
+  }
 }
 
 .form-box {
-    max-height: 90%;
-    overflow-y: auto;
+  max-height: 90%;
+  overflow-y: auto;
 }
-</style>
\ No newline at end of file
+
+.next-box :deep(button) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+</style>