feat: 新增业务组件

src/components/advanced/table-row-check-alert.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 defineOptions({
-  name: 'TableColumnCheckAlert'
+  name: 'TableRowCheckAlert'
 });
 
-const checkedRowKeys = defineModel<CommonType.IdType[]>('columns', { required: true });
+const checkedRowKeys = defineModel<CommonType.IdType[]>('checkedRowKeys', { required: true });
 </script>
 
 <template>

src/components/advanced/table-sider-layout.vue

@@ -7,16 +7,17 @@ defineOptions({
 
 interface Props {
   defaultExpanded?: boolean;
+  siderTitle?: string;
 }
 
 withDefaults(defineProps<Props>(), {
-  defaultExpanded: false
+  defaultExpanded: false,
+  siderTitle: undefined
 });
 
 const time = new Date().getTime();
 const breakpoints = useBreakpoints(breakpointsTailwind);
 const isCollapse = breakpoints.smaller('lg');
-const title = defineModel<string>('title');
 </script>
 
 <template>
@@ -36,11 +37,11 @@ const title = defineModel<string>('title');
         content-class="sider-layout-card-content"
       >
         <NCollapse v-if="isCollapse" :default-expanded-names="defaultExpanded ? [`table-sider-layout${time}`] : []">
-          <NCollapseItem :title="title" :name="`table-sider-layout${time}`" display-directive="show">
+          <NCollapseItem :title="siderTitle" :name="`table-sider-layout${time}`" display-directive="show">
             <slot name="sider" />
             <template #header>
               <slot name="header">
-                <span>{{ title }}</span>
+                <span>{{ siderTitle }}</span>
               </slot>
             </template>
             <template #header-extra>
@@ -65,7 +66,7 @@ const title = defineModel<string>('title');
         <slot name="sider" />
         <template #header>
           <slot name="header">
-            <span>{{ title }}</span>
+            <span>{{ siderTitle }}</span>
           </slot>
         </template>
         <template #header-extra>

src/components/custom/status-switch.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { useBoolean } from '@sa/hooks';
+import { enableStatusRecord } from '@/constants/business';
+
+defineOptions({
+  name: 'StatusSwitch'
+});
+
+interface Props {
+  disabled?: boolean;
+  info?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  disabled: false,
+  info: ''
+});
+
+const value = defineModel<Api.Common.EnableStatus>('value', { default: '0' });
+
+interface Emits {
+  (e: 'submitted', value: Api.Common.EnableStatus, callback: (flag: boolean) => void): void;
+}
+
+const emit = defineEmits<Emits>();
+
+/** 状态切换过程的 loading 状态 */
+const { bool: loading, setTrue: startLoading, setFalse: endLoading } = useBoolean();
+
+const handleUpdateValue = (val: Api.Common.EnableStatus) => {
+  value.value = val === '0' ? '1' : '0';
+  window.$dialog?.warning({
+    title: '系统提示',
+    content: `确定要${enableStatusRecord[val]} ${props.info} 吗？`,
+    positiveText: '确定',
+    negativeText: '取消',
+    onPositiveClick: () => {
+      startLoading();
+      emit('submitted', val, flag => {
+        if (flag) value.value = val;
+        endLoading();
+      });
+    },
+    onNegativeClick: () => {}
+  });
+};
+</script>
+
+<template>
+  <NSwitch
+    v-model:value="value"
+    :loading="loading"
+    :rubber-band="false"
+    checked-value="1"
+    unchecked-value="0"
+    :disabled="props.disabled"
+    @update:value="handleUpdateValue"
+  />
+</template>
+
+<style scoped></style>

src/components/custom/status-tag.vue

@@ -1,31 +0,0 @@
-<script setup lang="ts">
-import type { TagProps } from 'naive-ui';
-import { useAttrs } from 'vue';
-import { enableStatusRecord } from '@/constants/business';
-import { isNotNull } from '@/utils/common';
-
-defineOptions({
-  name: 'StatusTag'
-});
-
-interface Props {
-  [key: string]: any;
-}
-
-defineProps<Props>();
-
-const status = defineModel<Api.Common.EnableStatus>('value', { required: true });
-
-const tagMap: Record<Api.Common.EnableStatus, NaiveUI.ThemeColor> = {
-  '0': 'success',
-  '1': 'warning'
-};
-
-const attrs: TagProps = useAttrs();
-</script>
-
-<template>
-  <NTag v-if="isNotNull(status)" :type="tagMap[status]" v-bind="attrs">{{ enableStatusRecord[status] }}</NTag>
-</template>
-
-<style scoped></style>