主题库优化访问速度，样式重写

src/views/adweb/theme/AdwebThemeList.vue

@@ -1,235 +1,643 @@
 <template>
-  <div class="p-2">
-    <!--查询区域-->
-    <div class="jeecg-basic-table-form-container">
-      <a-form ref="formRef" @keyup.enter.native="searchQuery" :model="queryParam" :label-col="labelCol" :wrapper-col="wrapperCol">
-        <a-row :gutter="24">
-        </a-row>
-      </a-form>
-    </div>
-    <!--引用表格-->
-<!--    <AdwebThemeCList></AdwebThemeCList>-->
-    <BasicTable @register="registerTable" :rowSelection="rowSelection">
-      <!--插槽:table标题-->
-      <template #tableTitle>
-        <a-button type="primary" @click="handleAdd" preIcon="ant-design:plus-outlined"> 新增</a-button>
-        <a-button  type="primary" preIcon="ant-design:export-outlined" @click="onExportXls"> 导出</a-button>
-        <j-upload-button  type="primary" preIcon="ant-design:import-outlined" @click="onImportXls">导入</j-upload-button>
-        <a-dropdown v-if="selectedRowKeys.length > 0">
-          <template #overlay>
-            <a-menu>
-              <a-menu-item key="1" @click="batchHandleDelete">
-                <Icon icon="ant-design:delete-outlined"></Icon>
-                删除
-              </a-menu-item>
-            </a-menu>
-          </template>
-          <a-button>批量操作
-            <Icon icon="mdi:chevron-down"></Icon>
-          </a-button>
-        </a-dropdown>
-        <!-- 高级查询 -->
-        <super-query :config="superQueryConfig" @search="handleSuperQuery" />
-      </template>
-      <!--操作栏-->
-      <template #action="{ record }">
-        <TableAction :actions="getTableAction(record)" :dropDownActions="getDropDownAction(record)"/>
-      </template>
-      <template v-slot:bodyCell="{ column, record, index, text }">
-      </template>
-    </BasicTable>
-    <!-- 表单区域 -->
-    <AdwebThemeModal ref="registerModal" @success="handleSuccess"></AdwebThemeModal>
-  </div>
+  <a-row>
+    <a-col class="theme-wrap">
+      <a-col class="tag-wrap" />
+      <a-list
+        :grid="{ gutter: 16, column: 4 }"
+        :data-source="dataSource"
+        :loading="loading"
+        class="j-table-force-nowrap template_list"
+        :style="{ height: '100%' }"
+      >
+        <template #renderItem="{ item }">
+          <a-list-item>
+            <a-card :title="item.name" class="text-center">
+              <div class="item" @mouseover="hoverThis">
+                <div class="Pic">
+                  <a class="img">
+                    <img v-if="checkUrl(item.images)" :key="item.code" :alt="item.name" :src="domainUrl + '/sys/common/static/' + item.images" />
+                    <img v-else alt="item.name" />
+                  </a>
+                  <template v-if="item.putaway == 1 && item.externalTemplate != 1 && item.developmentStatus != 1">
+                    <div class="Content">
+                      <a-button class="fl" block @click="visit(item)">模板预览</a-button>
+                      <a-button type="primary" block class="fr" @click="createSite(item)">创建站点</a-button>
+                    </div>
+                  </template>
+                  <template
+                    v-else-if="
+                      item.putaway == 1 &&
+                      item.developmentStatus == 1 &&
+                      item.siteType == 3 &&
+                      (item.externalTemplateUrl == null || item.externalTemplateUrl == '')
+                    "
+                  >
+                    <div class="Content">
+                      <a-button type="primary" block @click="visitImage(item)">模板预览</a-button>
+                    </div>
+                  </template>
+                  <template
+                    v-else-if="
+                      item.putaway == 1 &&
+                      item.developmentStatus == 1 &&
+                      item.siteType == 3 &&
+                      item.externalTemplateUrl != null &&
+                      item.externalTemplateUrl != ''
+                    "
+                  >
+                    <div class="Content">
+                      <a-button type="primary" block @click="visitOut(item)">模板预览</a-button>
+                    </div>
+                  </template>
+                  <template v-else-if="item.putaway == 1 && item.externalTemplate == 1 && item.externalTemplateUrl != null">
+                    <div class="Content">
+                      <a-button type="primary" block @click="visitOut(item)">模板预览</a-button>
+                    </div>
+                  </template>
+                  <template
+                    v-else-if="
+                      item.putaway == 1 && item.externalTemplate == 1 && (item.externalTemplateUrl == null || item.externalTemplateUrl == '')
+                    "
+                  >
+                    <div class="Content">
+                      <a-button type="dashed" block>bb敬请期待</a-button>
+                    </div>
+                  </template>
+                  <template v-else-if="item.putaway == 1 && item.developmentStatus == 1 && item.siteType == 3">
+                    <div class="Content">
+                      <a-button type="dashed" block>{{ item.externalTemplateUrl }}敬请期待 {{ item.siteType }}</a-button>
+                    </div>
+                  </template>
+                </div>
+                <div class="clear"></div>
+              </div>
+            </a-card>
+          </a-list-item>
+        </template>
+      </a-list>
+      <a-modal
+        v-model:open="modalVisible"
+        :title="modalTitle"
+        centered
+        :confirm-loading="confirmLoading"
+        @ok="handleOk"
+        @cancel="handleCancel"
+        :closable="false"
+        :keyboard="false"
+        :maskClosable="false"
+        width="50%"
+        :ok-button-props="okBtnStatus"
+        :cancel-button-props="cancelBtnStatus"
+        :okText="okText"
+        :cancelText="cancelText"
+      >
+        <template v-if="showCreateSite">
+          <a-spin :spinning="spinning" :tip="tipTitle">
+            <a-form ref="createSiteFormsRef" :model="createSiteForm" :rules="createSiteFormRules" :label-col="labelCol" :wrapper-col="wrapperCol">
+              <a-form-item>
+                我们将为您新建站点，稍后请移至“站群管理”对网站内容进行编辑<br />
+                在建站完成后，需要您将域名解析到指定的CNAME将网站发布上线<br />
+                您可在“站群管理”中查看建站进度和CNAME
+              </a-form-item>
+              <a-form-item name="name" label="用户名称" prop="uid">
+                <a-select v-model:value="createSiteForm.uid" show-search :filter-option="filterOption" placeholder="请选择用户名称">
+                  <a-select-option v-for="user in userList" :key="user.id" :value="user.id">
+                    {{ user.realname }}
+                  </a-select-option>
+                </a-select>
+              </a-form-item>
+              <a-form-item name="name" label="站点名称" prop="name">
+                <a-input v-model:value="createSiteForm.name" placeholder="请输入站点名称" />
+              </a-form-item>
+              <a-form-item name="languageCode" label="站点语言" prop="languageCode">
+                <j-search-select placeholder="请选择站点语言" v-model:value="createSiteForm.languageCode" dict="adweb_language" />
+              </a-form-item>
+              <a-form-item name="planId" label="营销方案" prop="planId">
+                <a-row :gutter="8">
+                  <a-col :span="21">
+                    <j-search-select placeholder="请选择营销方案" v-model:value="createSiteForm.planId" dict="subscribe_plan,plan_name,id,status=1" />
+                  </a-col>
+                  <a-col :span="3">
+                    <router-link :to="{ path: '/deliver/serp/seoMarketPlan/list', query: { from: 'themeList' } }">
+                      <a-button type="primary" block>新增</a-button>
+                    </router-link>
+                  </a-col>
+                </a-row>
+              </a-form-item>
+
+              <a-form-item label="赠送天数" prop="giveDay" v-show="createSiteForm.planId !== undefined">
+                <a-input-number :min="0" :max="1000" style="width: 100%" placeholder="赠送天数" v-model="createSiteForm.giveDay" />
+              </a-form-item>
+              <a-form-item label="补偿天数" prop="compensateDay" v-show="createSiteForm.planId !== undefined">
+                <a-input-number :min="0" :max="1000" style="width: 100%" placeholder="补偿天数" v-model="createSiteForm.compensateDay" />
+              </a-form-item>
+            </a-form>
+          </a-spin>
+        </template>
+
+        <template v-if="showResult">
+          <a-result status="success" title="站点创建完成!" />
+        </template>
+      </a-modal>
+      <a-modal v-model:open="visible" width="80%" @cancel="visitImageCancel" :footer="null" class="self_buy_modal">
+        <template #title>
+          <div>
+            <div>
+              <p class="ant-modal-title">
+                模板预览
+                <template
+                  v-if="
+                    (userRole.indexOf('admin') > -1 ||
+                      userRole.indexOf('adweb_admin') > -1 ||
+                      userRole.indexOf('adweb_seo_manager') > -1 ||
+                      userRole.indexOf('adweb_site_manager') > -1) &&
+                    modelText != null &&
+                    modelText != ''
+                  "
+                >
+                  <a :href="modelText" target="_blank" style="font-size: 14px; text-decoration: underline"><span>购买链接</span></a>
+                </template>
+              </p>
+            </div>
+          </div>
+        </template>
+
+        <img alt="example" style="width: 100%" :src="theImage" />
+      </a-modal>
+    </a-col>
+  </a-row>
 </template>
 
-<script lang="ts" name="adweb-adwebTheme" setup>
-  import { ref, reactive } from 'vue';
-  import { BasicTable, useTable, TableAction } from '/@/components/Table';
-  import { useListPage } from '/@/hooks/system/useListPage';
-  import { columns, superQuerySchema } from './AdwebTheme.data';
-  import { list, deleteOne, batchDelete, getImportUrl, getExportUrl } from './AdwebTheme.api';
-  import { downloadFile } from '/@/utils/common/renderUtils';
-  import AdwebThemeModal from './components/AdwebThemeModal.vue'
-  import { useUserStore } from '/@/store/modules/user';
-  import AdwebThemeCList from './components/AdwebThemeCList.vue'
-
-  const formRef = ref();
-  const queryParam = reactive<any>({});
-  const toggleSearchStatus = ref<boolean>(false);
-  const registerModal = ref();
-  const userStore = useUserStore();
-  //注册table数据
-  const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
-    tableProps: {
-      title: 'adweb主题库',
-      api: list,
-      columns,
-      canResize:false,
-      useSearchForm: false,
-      actionColumn: {
-        width: 120,
-        fixed: 'right',
-      },
-      beforeFetch: (params) => {
-        return Object.assign(params, queryParam);
-      },
+<script lang="ts" setup name="AdwebThemeCList">
+  import '/@/assets/less/TableExpand.less';
+  import '/@/assets/less/common.less';
+
+  import Qs from 'qs';
+  import { getAction, postAction } from '/@/api/manage/manage';
+  import $ from 'jquery';
+
+  import { onMounted, reactive, ref } from 'vue';
+  import { useMessage } from '@/hooks/web/useMessage';
+  import JSearchSelect from '@/components/Form/src/jeecg/components/JSearchSelect.vue';
+
+  const description = ref('adweb_theme管理页面');
+
+  const columns = reactive([
+    {
+      title: '站点名称',
+      align: 'left',
+      dataIndex: 'name',
     },
-    exportConfig: {
-      name: "adweb主题库",
-      url: getExportUrl,
-      params: queryParam,
+    {
+      title: '图片路径',
+      align: 'left',
+      dataIndex: 'images',
+      scopedSlots: { customRender: 'imgSlot' },
     },
-	  importConfig: {
-	    url: getImportUrl,
-	    success: handleSuccess
-	  },
+  ]);
+
+  const url = reactive({
+    list: '/adweb/adwebTheme/list',
+    delete: '/adweb/adwebThemeC/delete',
+    deleteBatch: '/adweb/adwebThemeC/deleteBatch',
+    createSiteUrl: 'siteManage/createSite',
+    addSiteLanguageUrl: 'siteManage/addSiteLanguage',
+    getTemplateTagsUrl: '/adweb/adwebThemeC/getTemplateTags',
+    wpSiteCreateUrl: 'wpWebSite/addWebsite',
+    getAdwebVipUrl: 'adweb/adwebSiteManage/getAdwebVip',
   });
-  const [registerTable, { reload, collapseAll, updateTableDataRecord, findTableDataRecord, getDataSource }, { rowSelection, selectedRowKeys }] = tableContext;
-  const labelCol = reactive({
-    xs:24,
-    sm:4,
-    xl:6,
-    xxl:4
+
+  const dictOptions = reactive({});
+
+  const createSiteFormsRef = ref();
+  const superFieldList = reactive([]);
+  const domainUrl = ref(window._CONFIG.domianURL);
+  const modalVisible = ref(false);
+  const modalTitle = ref('');
+  const userRole = ref('');
+
+  const confirmLoading = ref(false);
+  const showCreateSite = ref(false);
+  const createSiteForm = reactive({
+    uid: undefined,
+    source: '',
+    name: '',
+    languageCode: 'en',
+    parentCode: '',
+    planId: undefined,
+    giveDay: 0,
+    compensateDay: 0,
+  });
+
+  const createSiteFormRules = reactive({
+    uid: [{ required: true, message: '请选择用户名称', trigger: 'blur' }],
+    name: [{ required: true, message: '请输入站点名称', trigger: 'blur' }],
+    languageCode: [{ required: true, message: '站点语言不能为空', trigger: 'change' }],
+    planId: [{ required: true, message: '请选择营销方案', trigger: 'blur' }],
   });
-  const wrapperCol = reactive({
-    xs: 24,
-    sm: 20,
+
+  const showResult = ref(false);
+  const spinning = ref(false);
+  const tipTitle = ref('');
+  const labelCol = reactive({ span: 3 });
+  const wrapperCol = reactive({ span: 21 });
+  const modalStatus = ref(false);
+  const okBtnStatus = reactive({});
+  const okText = ref('');
+  const cancelText = ref('');
+  const modelText = ref('');
+  const theImage = ref('');
+  const cancelBtnStatus = reactive({});
+  const templateTag = reactive([]);
+  const ins = ref(0);
+  let dataSource = reactive([]);
+  const loading = ref(false);
+  const isHeight = ref($(window).height() - 59 - 52 - 12 - 62 - 12 - 93);
+  const siteCreating = ref(false);
+  const isWpSiteCreate = ref(false);
+  const wpTemplateData = reactive({
+    name: '',
+    tempId: '',
+    domain: '',
+    uid: '',
   });
+  let userList = reactive([{ id: '', realname: '' }]);
+  const visible = ref(false);
+  const { createMessage, createConfirm } = useMessage();
 
-  // 高级查询配置
-  const superQueryConfig = reactive(superQuerySchema);
+  onMounted(() => {
+    getTemplateList();
+  });
 
-  /**
-   * 高级查询事件
-   */
-  function handleSuperQuery(params) {
-    Object.keys(params).map((k) => {
-      queryParam[k] = params[k];
-    });
-    searchQuery();
+  function checkUrl(val) {
+    if (val != null) {
+      if (val.substr(0, 7).toLowerCase() == 'http://' || val.substr(0, 8).toLowerCase() == 'https://') {
+        return false;
+      } else {
+        return true;
+      }
+    } else {
+      return false;
+    }
+  }
+
+  function hoverThis() {
+    $('.item').hover(
+      function () {
+        if ($(this).height() >= $(this).find('.Pic img').height()) {
+          return;
+        } else {
+          $(this)
+            .find('.Pic img')
+            .stop()
+            .animate({ top: $(this).height() - $(this).find('.Pic img').height() }, 5000);
+        }
+      },
+      function () {
+        $(this).find('.Pic img').stop().animate({ top: 0 }, 'fast');
+      }
+    );
+  }
+  //预览
+  function visit(data) {
+    if (data.domain != null && data.domain != '') {
+      return window.open(data.domain, '_blank');
+    } else {
+      visitImage(data);
+    }
   }
 
-  /**
-   * 新增事件
-   */
-  function handleAdd() {
-    registerModal.value.disableSubmit = false;
-    registerModal.value.add();
+  function visitImage(data) {
+    visible.value = true;
+    modelText.value = data.buyLinks;
+    theImage.value = domainUrl.value + '/sys/common/static/' + data.images;
   }
 
-  /**
-   * 编辑事件
-   */
-  function handleEdit(record: Recordable) {
-    registerModal.value.disableSubmit = false;
-    registerModal.value.edit(record);
+  function visitImageCancel() {
+    this.visible = false;
+    this.modelText = '';
+    this.theImage = '';
   }
 
-  /**
-   * 详情
-   */
-  function handleDetail(record: Recordable) {
-    registerModal.value.disableSubmit = true;
-    registerModal.value.edit(record);
+  function visitOut(data) {
+    if (data.externalTemplateUrl != null && data.externalTemplateUrl != '') {
+      return window.open(data.externalTemplateUrl, '_blank');
+    } else {
+      this.visitImage(data);
+    }
   }
 
-  /**
-   * 删除事件
-   */
-  async function handleDelete(record) {
-    await deleteOne({ id: record.id }, handleSuccess);
+  function cleanAllFormData() {
+    confirmLoading.value = false;
+    templateInfo = {};
+    spinning.value = false;
+    tipTitle.value = '';
+    modalVisible.value = false;
+    modalTitle.value = '';
+    modalCopyTemplateStatus = false;
+    copyTemplateForm = {
+      name: '',
+    };
+    showCreateSite.value = false;
+    createSiteForm = {
+      uid: undefined,
+      languageCode: 'en',
+      source: '',
+      name: '',
+      parentCode: '',
+      planId: undefined,
+      giveDay: 0,
+      compensateDay: 0,
+    };
+    showResult.value = false;
+    okBtnStatus = {};
+    cancelBtnStatus = {};
+    ins.value = 0;
+    loading.value = false;
   }
 
-  /**
-   * 批量删除事件
-   */
-  async function batchHandleDelete() {
-    await batchDelete({ ids: selectedRowKeys.value }, handleSuccess);
+  //创建站点
+  function createSite(item) {
+    getUserList();
+    if (item.siteType === 3) {
+      isWpSiteCreate.value = true;
+      wpTemplateData.tempId = item.id;
+    } else {
+      createSiteForm.source = item.source;
+      createSiteForm.parentCode = item.code;
+      createSiteForm.id = item.id;
+      createSiteForm.languageCode = 'en';
+    }
+    modalVisible.value = true;
+    modalTitle.value = '创建站点';
+    showCreateSite.value = true;
+    okText.value = '确定';
+    cancelText.value = '取消';
   }
 
-  /**
-   * 成功回调
-   */
-  function handleSuccess() {
-    (selectedRowKeys.value = []) && reload();
+  function createSiteData() {
+    confirmLoading.value = false;
+    spinning.value = true;
+    tipTitle.value = '正在创建站点';
+    let createSiteUrl = `${url.createSiteUrl}`;
+    okBtnStatus = { props: { disabled: true } };
+    cancelBtnStatus = { props: { disabled: true } };
+    postAction(createSiteUrl, Qs.stringify(createSiteForm), 1000 * 60 * 5)
+      .then(function (res) {
+        spinning.value = false;
+        tipTitle.value = '';
+        if (res.code == 200) {
+          showCreateSite.value = false;
+          showResult.value = true;
+          modalTitle.value = '系统提示';
+          okText.value = '预览站点';
+          cancelText.value = '关闭';
+          showCreateSite.value = false;
+          okBtnStatus = {};
+          cancelBtnStatus = {};
+          newCreateSiteInfo = res.data;
+        } else {
+          cancelBtnStatus = {};
+          createMessage.error('网站创建失败，请重试！');
+        }
+      })
+      .catch(function () {
+        modalVisible.value = true;
+        createMessage.error('网络超时，请重试!');
+      });
   }
 
-  /**
-   * 操作栏
-   */
-  function getTableAction(record) {
-    return [
-      {
-        label: '编辑',
-        onClick: handleEdit.bind(null, record),
-      },
-    ];
-  }
-
-  /**
-   * 下拉操作栏
-   */
-  function getDropDownAction(record) {
-    return [
-      {
-        label: '详情',
-        onClick: handleDetail.bind(null, record),
-      }, {
-        label: '删除',
-        popConfirm: {
-          title: '是否确认删除',
-          confirm: handleDelete.bind(null, record),
-          placement: 'topLeft',
+  function handleOk() {
+    if (showCreateSite.value && !isWpSiteCreate.value) {
+      createSiteFormsRef.value.validate((valid) => {
+        if (valid) {
+          createSiteData();
+        } else {
+          return false;
         }
-      }
-    ]
+      });
+    }
+    if (showCreateSite.value && isWpSiteCreate) {
+      createSiteFormsRef.value.validate((valid) => {
+        if (valid) {
+          wpSiteCreate(createSiteForm.name);
+        } else {
+          return false;
+        }
+      });
+    }
+    if (showResult.value && !isWpSiteCreate.value) {
+      toMySite();
+    }
+    if (showResult.value && isWpSiteCreate) {
+      toMyWPSite();
+    }
   }
 
-  /**
-   * 查询
-   */
-  function searchQuery() {
-    reload();
+  function handleCancel() {
+    cleanAllFormData();
   }
 
-  /**
-   * 重置
-   */
-  function searchReset() {
-    formRef.value.resetFields();
-    selectedRowKeys.value = [];
-    //刷新数据
-    reload();
+  function toMySite() {
+    return window.open(domainUrl.value + newCreateSiteInfo, '_blank');
   }
 
+  //wp站点创建成功预览
+  function toMyWPSite() {
+    return window.open('http://' + newCreateSiteInfo, '_blank');
+  }
 
+  function getTemplateList() {
+    loading.value = true;
+    let listUrl = `${url.list}` + '?templateTags=' + 22;
+    getAction(listUrl, null).then(function (res) {
+      if (res.code == 200) {
+        loading.value = false;
+        dataSource = res.result.records;
+      } else {
+        loading.value = false;
+        createMessage.error('模板获取失败！');
+      }
+    });
+  }
 
+  //wp站点创建
+  function wpSiteCreate(siteName) {
+    if (siteCreating.value) {
+      createMessage.warning('站点创建中，请勿重复点击！');
+      return;
+    }
+    siteCreating.value = true;
+    confirmLoading.value = false;
+    spinning.value = true;
+    tipTitle.value = '正在创建站点';
+    okBtnStatus = { props: { disabled: true } };
+    cancelBtnStatus = { props: { disabled: true } };
+    wpTemplateData.name = siteName;
+    wpTemplateData.uid = createSiteForm.uid;
+    wpTemplateData.planId = createSiteForm.planId;
+    wpTemplateData.giveDay = createSiteForm.giveDay;
+    wpTemplateData.compensateDay = createSiteForm.compensateDay;
+    postAction(url.wpSiteCreateUrl, Qs.stringify(wpTemplateData), 1000 * 60 * 5)
+      .then(function (res) {
+        if (res.code === 200 && res.result === 'ignore') {
+          createMessage.error('您距离上个站点创建不足两分钟，请两分钟后再次尝试！');
+          return;
+        }
+        if (res.code === 200) {
+          showCreateSite.value = false;
+          showResult.value = true;
+          modalTitle.value = '系统提示';
+          okText.value = '预览站点';
+          cancelText.value = '关闭';
+          showCreateSite.value = false;
+          okBtnStatus = {};
+          cancelBtnStatus = {};
+          newCreateSiteInfo = res.result;
+          wpSitePreviewUrl = '';
+        } else {
+          cancelBtnStatus = {};
+          createMessage.error('网站创建失败，请重试！');
+        }
+      })
+      .catch(function () {
+        modalVisible.value = true;
+        createMessage.error('网络超时，请重试!');
+      })
+      .finally(() => {
+        siteCreating.value = false;
+        spinning.value = false;
+        tipTitle.value = '';
+      });
+  }
 
+  function getUserList() {
+    getAction(url.getAdwebVipUrl, null).then(function (res) {
+      if (res.code == 200) {
+        userList = res.result;
+      }
+    });
+  }
+
+  function filterOption(input, option) {
+    return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0;
+  }
 </script>
+<style scoped lang="less">
+  .mt-20 {
+    margin-top: 20px;
+  }
+
+  .fl {
+    float: left;
+  }
+
+  .fr {
+    float: right;
+  }
 
-<style lang="less" scoped>
-  .jeecg-basic-table-form-container {
+  .template-image {
+    width: 100%;
+    height: 300px;
+  }
+
+  .text-center {
+    text-align: center;
+  }
+
+  .template_list /deep/ .ant-card-body {
     padding: 0;
-    .table-page-search-submitButtons {
-      display: block;
-      margin-bottom: 24px;
-      white-space: nowrap;
-    }
-    .query-group-cust{
-      min-width: 100px !important;
-    }
-    .query-group-split-cust{
-      width: 30px;
-      display: inline-block;
-      text-align: center
-    }
-    .ant-form-item:not(.ant-form-item-with-help){
-      margin-bottom: 16px;
-      height: 32px;
-    }
-    :deep(.ant-picker),:deep(.ant-input-number){
-      width: 100%;
+  }
+
+  .template_list .item {
+    width: 100%;
+    display: block;
+    height: 467px;
+    position: relative;
+    transition: all 0.4s ease-out;
+  }
+
+  .template_list .item .Pic {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .template_list .item .Pic img {
+    width: 100%;
+    max-height: unset;
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+
+  .template_list .item .Pic .Content {
+    display: flex;
+    justify-content: center;
+    align-items: flex-end;
+    opacity: 0;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.4);
+    top: 0;
+    left: 0;
+    font-size: 0;
+    transition: all 0.4s ease-out;
+    padding-bottom: 20px;
+    cursor: pointer;
+  }
+
+  .template_list .item .Pic .Content button {
+    margin: 0 10px;
+  }
+
+  .template_list .item:hover {
+    box-shadow: 3px 3px 12px 2px #aaaaaad4;
+  }
+
+  .template_list .item:hover .Pic .Content {
+    opacity: 1;
+  }
+
+  .tag-wrap .ant-btn.ant-btn-link.act {
+    color: @primary-color!important;
+    background-color: #fff !important;
+    font-weight: 600;
+    border-bottom: 1px solid #fff;
+  }
+
+  .tag-wrap {
+    margin-bottom: 12px;
+  }
+
+  .tag-wrap .ant-btn-link {
+    color: #fff !important;
+    width: 10%;
+    margin: 5px 0.5%;
+  }
+
+  .template_list {
+    overflow-y: scroll;
+    overflow-x: hidden;
+  }
+
+  .ant-btn-link {
+    margin-right: 10px;
+  }
+
+  img[lazy='error'],
+  img[lazy='loading'] {
+    top: calc(50% - 140px) !important;
+    position: relative !important;
+    margin: 0 auto;
+    width: 240px !important;
+  }
+
+  .self_buy_modal {
+    /deep/ .ant-modal-body {
+      padding: 0;
     }
   }
 </style>

src/views/adweb/theme/AdwebThemeListCopy.vue

@@ -0,0 +1,231 @@
+<template>
+  <div class="p-2">
+    <!--查询区域-->
+    <div class="jeecg-basic-table-form-container">
+      <a-form ref="formRef" @keyup.enter.native="searchQuery" :model="queryParam" :label-col="labelCol" :wrapper-col="wrapperCol">
+        <a-row :gutter="24" />
+      </a-form>
+    </div>
+    <!--引用表格-->
+    <!--    <AdwebThemeCList></AdwebThemeCList>-->
+    <BasicTable @register="registerTable" :rowSelection="rowSelection">
+      <!--插槽:table标题-->
+      <template #tableTitle>
+        <a-button type="primary" @click="handleAdd" preIcon="ant-design:plus-outlined"> 新增</a-button>
+        <a-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXls"> 导出</a-button>
+        <j-upload-button type="primary" preIcon="ant-design:import-outlined" @click="onImportXls">导入</j-upload-button>
+        <a-dropdown v-if="selectedRowKeys.length > 0">
+          <template #overlay>
+            <a-menu>
+              <a-menu-item key="1" @click="batchHandleDelete">
+                <Icon icon="ant-design:delete-outlined" />
+                删除
+              </a-menu-item>
+            </a-menu>
+          </template>
+          <a-button
+            >批量操作
+            <Icon icon="mdi:chevron-down" />
+          </a-button>
+        </a-dropdown>
+        <!-- 高级查询 -->
+        <super-query :config="superQueryConfig" @search="handleSuperQuery" />
+      </template>
+      <!--操作栏-->
+      <template #action="{ record }">
+        <TableAction :actions="getTableAction(record)" :dropDownActions="getDropDownAction(record)" />
+      </template>
+      <template #bodyCell="{ column, record, index, text }"> </template>
+    </BasicTable>
+    <!-- 表单区域 -->
+    <AdwebThemeModal ref="registerModal" @success="handleSuccess" />
+  </div>
+</template>
+
+<script lang="ts" name="adweb-adwebTheme" setup>
+  import { reactive, ref } from 'vue';
+  import { BasicTable, TableAction } from '/@/components/Table';
+  import { useListPage } from '/@/hooks/system/useListPage';
+  import { columns, superQuerySchema } from './AdwebTheme.data';
+  import { batchDelete, deleteOne, getExportUrl, getImportUrl, list } from './AdwebTheme.api';
+  import AdwebThemeModal from './components/AdwebThemeModal.vue';
+  import { useUserStore } from '/@/store/modules/user';
+
+  const formRef = ref();
+  const queryParam = reactive<any>({});
+  const toggleSearchStatus = ref<boolean>(false);
+  const registerModal = ref();
+  const userStore = useUserStore();
+  //注册table数据
+  const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
+    tableProps: {
+      title: 'adweb主题库',
+      api: list,
+      columns,
+      canResize: false,
+      useSearchForm: false,
+      actionColumn: {
+        width: 120,
+        fixed: 'right',
+      },
+      beforeFetch: (params) => {
+        return Object.assign(params, queryParam);
+      },
+    },
+    exportConfig: {
+      name: 'adweb主题库',
+      url: getExportUrl,
+      params: queryParam,
+    },
+    importConfig: {
+      url: getImportUrl,
+      success: handleSuccess,
+    },
+  });
+  const [registerTable, { reload, collapseAll, updateTableDataRecord, findTableDataRecord, getDataSource }, { rowSelection, selectedRowKeys }] =
+    tableContext;
+  const labelCol = reactive({
+    xs: 24,
+    sm: 4,
+    xl: 6,
+    xxl: 4,
+  });
+  const wrapperCol = reactive({
+    xs: 24,
+    sm: 20,
+  });
+
+  // 高级查询配置
+  const superQueryConfig = reactive(superQuerySchema);
+
+  /**
+   * 高级查询事件
+   */
+  function handleSuperQuery(params) {
+    Object.keys(params).map((k) => {
+      queryParam[k] = params[k];
+    });
+    searchQuery();
+  }
+
+  /**
+   * 新增事件
+   */
+  function handleAdd() {
+    registerModal.value.disableSubmit = false;
+    registerModal.value.add();
+  }
+
+  /**
+   * 编辑事件
+   */
+  function handleEdit(record: Recordable) {
+    registerModal.value.disableSubmit = false;
+    registerModal.value.edit(record);
+  }
+
+  /**
+   * 详情
+   */
+  function handleDetail(record: Recordable) {
+    registerModal.value.disableSubmit = true;
+    registerModal.value.edit(record);
+  }
+
+  /**
+   * 删除事件
+   */
+  async function handleDelete(record) {
+    await deleteOne({ id: record.id }, handleSuccess);
+  }
+
+  /**
+   * 批量删除事件
+   */
+  async function batchHandleDelete() {
+    await batchDelete({ ids: selectedRowKeys.value }, handleSuccess);
+  }
+
+  /**
+   * 成功回调
+   */
+  function handleSuccess() {
+    (selectedRowKeys.value = []) && reload();
+  }
+
+  /**
+   * 操作栏
+   */
+  function getTableAction(record) {
+    return [
+      {
+        label: '编辑',
+        onClick: handleEdit.bind(null, record),
+      },
+    ];
+  }
+
+  /**
+   * 下拉操作栏
+   */
+  function getDropDownAction(record) {
+    return [
+      {
+        label: '详情',
+        onClick: handleDetail.bind(null, record),
+      },
+      {
+        label: '删除',
+        popConfirm: {
+          title: '是否确认删除',
+          confirm: handleDelete.bind(null, record),
+          placement: 'topLeft',
+        },
+      },
+    ];
+  }
+
+  /**
+   * 查询
+   */
+  function searchQuery() {
+    reload();
+  }
+
+  /**
+   * 重置
+   */
+  function searchReset() {
+    formRef.value.resetFields();
+    selectedRowKeys.value = [];
+    //刷新数据
+    reload();
+  }
+</script>
+
+<style lang="less" scoped>
+  .jeecg-basic-table-form-container {
+    padding: 0;
+    .table-page-search-submitButtons {
+      display: block;
+      margin-bottom: 24px;
+      white-space: nowrap;
+    }
+    .query-group-cust {
+      min-width: 100px !important;
+    }
+    .query-group-split-cust {
+      width: 30px;
+      display: inline-block;
+      text-align: center;
+    }
+    .ant-form-item:not(.ant-form-item-with-help) {
+      margin-bottom: 16px;
+      height: 32px;
+    }
+    :deep(.ant-picker),
+    :deep(.ant-input-number) {
+      width: 100%;
+    }
+  }
+</style>