整理商品管理模块

src/views/cms/website/index.vue

@@ -4,51 +4,55 @@
       <a-card :bordered="false" :body-style="{ padding: '16px' }">
         <ele-pro-table
           ref="tableRef"
-          row-key="id"
+          row-key="websiteId"
           :columns="columns"
           :datasource="datasource"
+          :customRow="customRow"
+          :need-page="false"
           tool-class="ele-toolbar-form"
           class="sys-org-table"
         >
+          <template #toolbar>
+            <search
+              @search="reload"
+              :selection="selection"
+              @add="openEdit"
+              @remove="removeBatch"
+              @batchMove="openMove"
+            />
+          </template>
           <template #bodyCell="{ column, record }">
-            <template v-if="column.key === 'websiteName'">
-              <a-space class="ele-cell">
-                <a-avatar
-                  :src="record.websiteLogo"
-                  size="small"
-                  shape="square"
-                />
-                <span class="ele-text-secondary">{{ record.websiteName }}</span>
-              </a-space>
+            <template v-if="column.key === 'websiteLogo'">
+              <a-image :src="record.websiteLogo" :width="50" />
             </template>
-            <template v-if="column.key === 'hostName'">
-              <span class="ele-text-placeholder">{{ record.hostName }}</span>
+            <template v-if="column.key === 'domain'">
+              <a-button
+                type="link"
+                @click="openUrl(`${record.prefix}${record.domain}`)"
+                >{{ record.domain }}</a-button
+              >
             </template>
-            <template v-if="column.key === 'hostType'">
-              <span class="ele-text-placeholder">CNAME</span>
+            <template v-if="column.key === 'type'">
+              <a-tag v-if="record.type === 1" color="green">是</a-tag>
+              <a-tag
+                v-if="record.type === 0"
+                @click="updateType(record)"
+                class="cursor-pointer"
+                >否</a-tag
+              >
             </template>
-            <template v-if="column.key === 'hostValue'">
-              <span class="ele-text-placeholder">{{ record.hostValue }}</span>
-            </template>
-            <template v-if="column.key === 'photo'">
-              <a-image :src="record.photo" />
+            <template v-if="column.key === 'version'">
+              <a-tag v-if="record.version === 10">免费版</a-tag>
+              <a-tag v-if="record.version === 20">授权版</a-tag>
+              <a-tag v-if="record.version === 30">永久授权</a-tag>
             </template>
             <template v-if="column.key === 'status'">
-              <a-switch
-                v-model:checked="record.status"
-                @change="updateStatus(record)"
-              />
+              <a-tag v-if="record.status === 0" color="green">正常</a-tag>
+              <a-tag v-if="record.status === 1" color="red">已过期</a-tag>
             </template>
             <template v-if="column.key === 'action'">
               <a-space>
-                <a-button @click="openEdit(record)" size="small">管理</a-button>
-                <a-popconfirm
-                  title="确定要删除此域名吗？"
-                  :disabled="record.home == 1"
-                  @confirm="remove(record)"
-                >
-                  <a-button size="small">删除</a-button>
-                </a-popconfirm>
+                <a-button type="primary" ghost @click="openUrl(`${record.prefix}${record.adminUrl}`)">进入后台</a-button>
               </a-space>
             </template>
           </template>
@@ -56,7 +60,7 @@
       </a-card>
 
       <!-- 编辑弹窗 -->
-      <Edit v-model:visible="showEdit" :data="current" @done="reload" />
+      <WebsiteEdit v-model:visible="showEdit" :data="current" @done="reload" />
     </div>
   </div>
 </template>
@@ -66,12 +70,13 @@
   import { message, Modal } from 'ant-design-vue';
   import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
   import type { EleProTable } from 'ele-admin-pro';
+  import { toDateString } from 'ele-admin-pro';
   import type {
     DatasourceFunction,
     ColumnItem
   } from 'ele-admin-pro/es/ele-pro-table/types';
-  // import Search from './components/search.vue';
-  import Edit from './components/edit.vue';
+  import Search from './components/search.vue';
+  import WebsiteEdit from './components/websiteEdit.vue';
   import {
     pageWebsite,
     removeWebsite,
@@ -79,9 +84,7 @@
     updateWebsite
   } from '@/api/cms/website';
   import type { Website, WebsiteParam } from '@/api/cms/website/model';
-  import { openPreview } from '@/utils/common';
-  import type { Payment } from '@/api/system/payment/model';
-  import { updatePayment } from '@/api/system/payment';
+  import { openUrl } from '@/utils/common';
 
   // 表格实例
   const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
@@ -94,6 +97,8 @@
   const showEdit = ref(false);
   // 是否显示批量移动弹窗
   const showMove = ref(false);
+  // 加载状态
+  const loading = ref(true);
 
   // 表格数据源
   const datasource: DatasourceFunction = ({
@@ -103,6 +108,9 @@
     orders,
     filters
   }) => {
+    if (filters) {
+      where.status = filters.status;
+    }
     return pageWebsite({
       ...where,
       ...orders,
@@ -116,26 +124,53 @@
     {
       title: '网站名称',
       dataIndex: 'websiteName',
-      width: 240,
-      key: 'websiteName'
+      key: 'websiteName',
+      align: 'center'
     },
     {
-      title: '主机类型',
-      dataIndex: 'websiteType',
-      align: 'center',
-      key: 'websiteType'
+      title: 'Logo',
+      dataIndex: 'websiteLogo',
+      key: 'websiteLogo',
+      align: 'center'
     },
     {
-      title: '是否启用',
+      title: '主域名',
+      dataIndex: 'domain',
+      key: 'domain',
+      align: 'center'
+    },
+    {
+      title: '网站描述',
+      dataIndex: 'comments',
+      key: 'comments',
+      align: 'center'
+    },
+    {
+      title: '当前版本',
+      dataIndex: 'version',
+      key: 'version',
+      align: 'center'
+    },
+    {
+      title: '状态',
       dataIndex: 'status',
-      width: 120,
+      key: 'status',
+      align: 'center'
+    },
+    {
+      title: '创建时间',
+      dataIndex: 'createTime',
+      key: 'createTime',
       align: 'center',
-      key: 'status'
+      sorter: true,
+      ellipsis: true,
+      customRender: ({ text }) => toDateString(text, 'yyyy-MM-dd')
     },
     {
       title: '操作',
       key: 'action',
       width: 120,
+      fixed: 'right',
       align: 'center',
       hideInSetting: true
     }
@@ -158,20 +193,17 @@
     showMove.value = true;
   };
 
-  const updateStatus = (item: Website) => {
-    updateWebsite(item)
-      .then((msg) => {
-        message.success(msg);
-      })
-      .catch((msg) => {
-        message.error(msg);
-      });
+  const updateType = (row: Website) => {
+    updateWebsite(row).then((msg) => {
+      message.success(msg);
+      reload();
+    });
   };
 
   /* 删除单个 */
   const remove = (row: Website) => {
     const hide = message.loading('请求中..', 0);
-    removeWebsite(row.id)
+    removeWebsite(row.websiteId)
       .then((msg) => {
         hide();
         message.success(msg);
@@ -196,7 +228,7 @@
       maskClosable: true,
       onOk: () => {
         const hide = message.loading('请求中..', 0);
-        removeBatchWebsite(selection.value.map((d) => d.id))
+        removeBatchWebsite(selection.value.map((d) => d.websiteId))
           .then((msg) => {
             hide();
             message.success(msg);
@@ -209,9 +241,32 @@
       }
     });
   };
+
+  /* 查询 */
+  const query = () => {
+    loading.value = true;
+  };
+
+  /* 自定义行属性 */
+  const customRow = (record: Website) => {
+    return {
+      // 行点击事件
+      onClick: () => {
+        // console.log(record);
+      },
+      // 行双击事件
+      onDblclick: () => {
+        openEdit(record);
+      }
+    };
+  };
+  query();
 </script>
+
 <script lang="ts">
   export default {
     name: 'Website'
   };
 </script>
+
+<style lang="less" scoped></style>