初始版本提交

src/views/mobileDesign/dataDesign/index.vue

@@ -0,0 +1,223 @@
+<template>
+  <PageWrapper dense contentFullHeight fixed-height>
+    <BasicTable @register="registerTable" @row-click="handleClick">
+      <template #toolbar>
+        <div>
+          <a-button type="primary" @click="handleCreate">
+            {{ t('新增') }}
+          </a-button>
+          <a-button @click="handleEnable" :disabled="curRow == -1" class="ml-5px">{{
+            curRow == 1 ? t('禁用') : t('启用')
+          }}</a-button>
+        </div>
+      </template>
+      <template #action="{ record }">
+        <TableAction
+          :actions="[
+            {
+              icon: 'clarity:note-edit-line',
+              onClick: handleEdit.bind(null, record),
+            },
+            {
+              icon: 'ant-design:delete-outlined',
+              color: 'error',
+              onClick: handleDelete.bind(null, record),
+            },
+          ]"
+        />
+      </template>
+    </BasicTable>
+    <DataDesign v-if="DesignVisible" :editId="editId" @close="handleClose" />
+  </PageWrapper>
+</template>
+<script lang="ts" setup>
+  import { BasicTable, useTable, TableAction, FormSchema, BasicColumn } from '/@/components/Table';
+
+  import { PageWrapper } from '/@/components/Page';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import DataDesign from './components/dataDesign.vue';
+
+  import { h, ref, createVNode } from 'vue';
+
+  import { Modal, Tag } from 'ant-design-vue';
+  import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+  import { useI18n } from '/@/hooks/web/useI18n';
+
+  import { deleteMobileData, getPageList, updateEnableMark } from '/@/api/mobileDesign';
+
+  const { t } = useI18n();
+  const DesignVisible = ref(false);
+  const editId = ref();
+  const curRow = ref(0);
+  const curId = ref();
+  const searchFormSchema: FormSchema[] = [
+    {
+      field: 'name',
+      label: t('页面名称'),
+      component: 'Input',
+      colProps: { span: 8 },
+      componentProps: {
+        placeholder: t('请输入页面名称'),
+      },
+    },
+    {
+      field: 'code',
+      label: t('页面编码'),
+      component: 'Input',
+      colProps: { span: 8 },
+      componentProps: {
+        placeholder: t('请输入页面编码'),
+      },
+    },
+    {
+      field: 'enabledMark',
+      label: t('页面状态'),
+      component: 'Select',
+      colProps: { span: 8 },
+      componentProps: {
+        placeholder: t('请选择页面状态'),
+        options: [
+          { label: '启用', value: 1 },
+          { label: '禁用', value: 0 },
+          { label: '草稿', value: -1 },
+        ],
+      },
+    },
+  ];
+
+  const columns: BasicColumn[] = [
+    {
+      dataIndex: 'name',
+      title: t('页面名称'),
+      align: 'left',
+    },
+
+    {
+      dataIndex: 'code',
+      title: t('页面编码'),
+      align: 'left',
+    },
+    {
+      dataIndex: 'enabledMark',
+      title: t('页面状态'),
+      align: 'left',
+      customRender: ({ record }) => {
+        const color =
+          record.enabledMark == 1 ? 'blue' : record.enabledMark == -1 ? 'yellow' : 'red';
+        const text = record.enabledMark == 1 ? '正常' : record.enabledMark == -1 ? '草稿' : '停用';
+        return h(Tag, { color: color }, () => text);
+      },
+    },
+    {
+      dataIndex: 'remark',
+      title: t('备注'),
+      width: 120,
+      align: 'left',
+    },
+  ];
+  const { notification } = useMessage();
+
+  const [registerTable, { reload, clearSelectedRowKeys, getSelectRows }] = useTable({
+    title: t('数据展示页列表'),
+    api: getPageList,
+    rowKey: 'id',
+    columns,
+    formConfig: {
+      rowProps: {
+        gutter: 16,
+      },
+      schemas: searchFormSchema,
+      fieldMapToTime: [],
+      showResetButton: false,
+    },
+    useSearchForm: true,
+    showTableSetting: true,
+    striped: false,
+    actionColumn: {
+      width: 80,
+      title: t('操作'),
+      dataIndex: 'action',
+      slots: { customRender: 'action' },
+    },
+    rowSelection: { type: 'radio' },
+    tableSetting: {
+      size: false,
+      setting: false,
+    },
+  });
+
+  function handleCreate() {
+    DesignVisible.value = true;
+  }
+
+  function handleEdit(record: Recordable) {
+    editId.value = record.id;
+    DesignVisible.value = true;
+  }
+
+  function handleDelete(record: Recordable = {}) {
+    const ids = record.id;
+
+    Modal.confirm({
+      title: t('提示'),
+      icon: createVNode(ExclamationCircleOutlined),
+      content: t('确定要删除所选项吗？'),
+      onOk() {
+        deleteMobileData(ids).then(() => {
+          reload();
+          notification.success({
+            message: t('提示'),
+            description: t('删除成功'),
+          });
+        });
+      },
+      onCancel() {},
+      okText: t('确认'),
+      cancelText: t('取消'),
+    });
+  }
+  function handleClose() {
+    editId.value = '';
+    DesignVisible.value = false;
+    reload();
+  }
+  async function handleEnable() {
+    let rows = getSelectRows();
+    if (rows.length > 0) {
+      curRow.value = rows[0].enabledMark;
+      curId.value = rows[0].id;
+      let res = await updateEnableMark({
+        id: curId.value,
+        enabledMark: curRow.value == 1 ? 0 : 1,
+      });
+      if (res) {
+        notification.success({
+          message: t('提示'),
+          description: t('修改状态成功'),
+        });
+        reload();
+        curRow.value = 0;
+        curId.value = '';
+        clearSelectedRowKeys();
+      } else {
+        notification.error({
+          message: t('提示'),
+          description: t('修改状态失败'),
+        });
+      }
+    } else {
+      notification.warning({
+        message: t('提示'),
+        description: t('请选择一条数据操作'),
+      });
+    }
+  }
+  function handleClick() {
+    let rows = getSelectRows();
+    if (rows.length > 0) {
+      curRow.value = rows[0].enabledMark;
+      curId.value = rows[0].id;
+    }
+  }
+</script>
+<style lang="less" scoped></style>