Add operator api and views

src/api/basic/model/operatorModel.ts

@@ -0,0 +1,23 @@
+export interface OperatorResp {
+    id: number | string;
+    name: string;
+    type: string;
+    status: number;
+    sort: number;
+    remark: string;
+    createTime: string;
+}
+
+export interface AddOrUpdateOperatorReq {
+    id: number | string | undefined;
+    name: string;
+    type: number;
+    status: number;
+    remark: string;
+    sort: number;
+}
+
+export interface QueryOperatorReq {
+    name: string;
+    type: string;
+}

src/api/basic/operator.ts

@@ -0,0 +1,63 @@
+import {defHttp} from '/@/utils/http/axios';
+import { ErrorMessageMode } from '/#/axios';
+import {BaseDataResp, BaseResp} from "@/api/model/baseModel";
+import {
+    OperatorResp,
+    AddOrUpdateOperatorReq,
+    QueryOperatorReq
+} from "@/api/basic/model/operatorModel";
+
+
+enum API {
+    List = '/basic/operator/list',
+    AddOrUpdateOperator = '/basic/operator/addOrUpdate',
+    DeleteBatch = '/basic/operator/delete',
+    UpdateStatus = '/basic/operator/updateStatus',
+}
+
+export function getOperatorList(params: QueryOperatorReq, mode: ErrorMessageMode = 'notice') {
+    return defHttp.post<BaseDataResp<OperatorResp>>(
+        {
+            url: API.List,
+            params,
+        },
+        {
+            errorMessageMode: mode,
+            successMessageMode: mode,
+        },
+    );
+}
+
+export function addOrUpdateOperator(params: AddOrUpdateOperatorReq, mode: ErrorMessageMode = 'notice') {
+    return defHttp.post<BaseResp>(
+        {
+            url: API.AddOrUpdateOperator,
+            params,
+        },
+        {
+            errorMessageMode: mode,
+        },
+    );
+}
+
+export function updateOperatorStatus(ids: number[], status: number, mode: ErrorMessageMode = 'notice') {
+    return defHttp.post<BaseResp>(
+        {
+            url: `${API.UpdateStatus}?ids=${ids}&status=${status}`
+        },
+        {
+            errorMessageMode: mode,
+        },
+    );
+}
+
+export function deleteBatchOperator(ids: number[], mode: ErrorMessageMode = 'notice') {
+    return defHttp.delete<BaseResp>(
+        {
+            url: `${API.DeleteBatch}?ids=${ids}`
+        },
+        {
+            errorMessageMode: mode,
+        },
+    );
+}

src/views/basic/operator/components/OperatorModal.vue

@@ -0,0 +1,76 @@
+<template>
+  <BasicModal v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit">
+    <BasicForm @register="registerForm" />
+  </BasicModal>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, unref} from 'vue';
+import { BasicModal, useModalInner } from '/@/components/Modal';
+import { BasicForm, useForm } from '/@/components/Form/index';
+import { formSchema } from '@/views/basic/operator/operator.data';
+import { AddOrUpdateOperatorReq } from '@/api/basic/model/operatorModel';
+import { addOrUpdateOperator } from '@/api/basic/operator';
+
+const rowId = ref('');
+const isUpdate = ref(true);
+const getTitle = computed(() => (!unref(isUpdate) ? '新增操作员' : '编辑操作员'));
+const emitSuccess = defineEmits(['success']);
+
+const [registerForm, { setFieldsValue, resetFields, validate }] = useForm({
+  labelWidth: 100,
+  baseColProps: { span: 24 },
+  schemas: formSchema,
+  showActionButtonGroup: false,
+  actionColOptions: {
+    span: 23,
+  },
+});
+
+const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+  resetFields();
+  setModalProps({ confirmLoading: false, destroyOnClose: true,});
+  isUpdate.value = !!data?.isUpdate;
+
+  if (unref(isUpdate)) {
+    rowId.value = data.record.id;
+    setFieldsValue({
+      ...data.record,
+    });
+  }
+});
+
+const handleSubmit = async () => {
+  const values = await validate();
+  setModalProps({ confirmLoading: true });
+
+  if (unref(isUpdate)) {
+    const updateOperatorReq: AddOrUpdateOperatorReq = {
+      id: rowId.value,
+      ...values,
+    };
+    const result = await addOrUpdateOperator(updateOperatorReq);
+    if (result.code === 'O0002') {
+      closeModal();
+      emitSuccess('success');
+    }
+  } else {
+    const addOperatorReq: AddOrUpdateOperatorReq = {
+      name: values.name,
+      type: values.type,
+      status: values.status,
+      sort: values.sort,
+      remark: values.remark,
+    };
+
+    const result = await addOrUpdateOperator(addOperatorReq);
+    if (result.code === 'O0001') {
+      closeModal();
+      emitSuccess('success');
+    }
+  }
+
+  setModalProps({ confirmLoading: false });
+
+};
+</script>

src/views/basic/operator/operator.data.ts

@@ -0,0 +1,116 @@
+import {FormSchema} from "@/components/Form";
+import {BasicColumn} from "@/components/Table";
+import { h } from 'vue';
+import {Switch} from "ant-design-vue";
+import {useMessage} from "@/hooks/web/useMessage";
+import {useI18n} from "@/hooks/web/useI18n";
+import {updateOperatorStatus} from "@/api/basic/operator";
+
+const { t } = useI18n();
+
+export const columns: BasicColumn[] = [
+    {
+        title: '姓名',
+        dataIndex: 'name',
+        width: 90,
+    },
+    {
+        title: '类型',
+        dataIndex: 'type',
+        width: 120,
+    },
+    {
+        title: '状态',
+        dataIndex: 'status',
+        width: 100,
+        customRender: ({ record }) => {
+            if (!Reflect.has(record, 'pendingStatus')) {
+                record.pendingStatus = false;
+            }
+            return h(Switch, {
+                checked: record.status === 0,
+                checkedChildren: t('common.on'),
+                unCheckedChildren: t('common.off'),
+                loading: record.pendingStatus,
+                onChange(checked, _) {
+                    const {createMessage} = useMessage();
+                    if (record.id == 1) {
+                        createMessage.warn(t('common.notice'));
+                        return;
+                    }
+                    record.pendingStatus = true;
+                    const newStatus = checked ? 0 : 1;
+                    updateOperatorStatus([record.id], newStatus )
+                        .then(() => {
+                            record.status = newStatus;
+                        })
+                        .finally(() => {
+                            record.pendingStatus = false;
+                        });
+                },
+            });
+        }
+    },
+    {
+        title: '排序',
+        dataIndex: 'sort',
+        width: 80,
+    },
+    {
+        title: '创建时间',
+        dataIndex: 'createTime',
+        width: 150,
+    }
+]
+
+export const searchFormSchema: FormSchema[] = [
+    {
+        label: '姓名',
+        field: 'name',
+        component: 'Input',
+        colProps: { span: 5 },
+    },
+    {
+        label: '类型',
+        field: 'type',
+        component: 'Select',
+        colProps: { span: 5 },
+        componentProps: {
+            options: [
+                { label: '业务员', value: '业务员', key: 0 },
+                { label: '财务员', value: '财务员', key: 1 },
+            ],
+        },
+    }
+]
+
+export const formSchema: FormSchema[] = [
+    {
+        label: '姓名',
+        field: 'name',
+        component: 'Input',
+        required: true,
+    },
+    {
+        label: '类型',
+        field: 'type',
+        component: 'Select',
+        componentProps: {
+            options: [
+                { label: '业务员', value: '业务员', key: 0 },
+                { label: '财务员', value: '财务员', key: 1 },
+            ],
+        },
+        required: true,
+    },
+    {
+        label: '排序',
+        field: 'sort',
+        component: 'InputNumber',
+    },
+    {
+        label: '备注',
+        field: 'remark',
+        component: 'InputTextArea',
+    }
+]