Merge pull request #97 from Jzow/master

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/index.vue

@@ -0,0 +1,147 @@
+<template>
+ <div>
+ <BasicTable @register="registerTable">
+ <template #toolbar>
+ <a-button type="primary" @click="handleCreate"> 新增</a-button>
+ <a-button type="primary" @click="handleBatchDelete"> 批量删除</a-button>
+ <a-button type="primary" @click="handleOnStatus(0)"> 批量启用</a-button>
+ <a-button type="primary" @click="handleOnStatus(1)"> 批量禁用</a-button>
+ </template>
+ <template #bodyCell="{ column, record }">
+ <template v-if="column.key === 'action'">
+ <TableAction
+ :actions="[
+ {
+ icon: 'clarity:note-edit-line',
+ onClick: handleEdit.bind(null, record),
+ },
+ {
+ icon: 'ant-design:delete-outlined',
+ color: 'error',
+ popConfirm: {
+ title: '是否确认删除',
+ placement: 'left',
+ confirm: handleDelete.bind(null, record),
+ },
+ },
+ ]"
+ />
+ </template>
+ </template>
+ </BasicTable>
+ <OperatorModal @register="registerModal" @success="handleSuccess" />
+ </div>
+</template>
+<div>
+</div>
+
+<script lang="ts">
+import {defineComponent} from "vue";
+import {BasicTable, TableAction, useTable} from "@/components/Table";
+import {useModal} from "@/components/Modal";
+import {useMessage} from "@/hooks/web/useMessage";
+import {columns, searchFormSchema} from "@/views/basic/operator/operator.data";
+import {getOperatorList, deleteBatchOperator, updateOperatorStatus} from "@/api/basic/operator";
+import OperatorModal from "@/views/basic/operator/components/OperatorModal.vue";
+
+export default defineComponent({
+ name: 'Operator',
+ components: {TableAction, BasicTable, OperatorModal },
+ setup() {
+ const [registerModal, {openModal}] = useModal();
+ const { createMessage } = useMessage();
+ const [registerTable, { reload, getSelectRows }] = useTable({
+ title: '操作员/经办人列表',
+ api: getOperatorList,
+ rowKey: 'id',
+ columns: columns,
+ rowSelection: {
+ type: 'checkbox',
+ },
+ formConfig: {
+ labelWidth: 110,
+ schemas: searchFormSchema,
+ autoSubmitOnEnter: true,
+ },
+ useSearchForm: true,
+ clickToRowSelect: false,
+ bordered: true,
+ showTableSetting: true,
+ striped: true,
+ showIndexColumn: true,
+ actionColumn: {
+ width: 80,
+ title: '操作',
+ dataIndex: 'action',
+ fixed: undefined,
+ },
+ });
+
+ async function handleCreate() {
+ openModal(true, {
+ isUpdate: false,
+ });
+ }
+
+ async function handleBatchDelete(record: Recordable) {
+ const data = getSelectRows();
+ if (data.length === 0) {
+ createMessage.warn('请选择一条数据');
+ return;
+ }
+ const ids = data.map((item) => item.id);
+ const result = await deleteBatchOperator(ids)
+ if (result.code === 'O0003') {
+ await reload();
+ }
+ }
+
+ async function handleEdit(record: Recordable) {
+ openModal(true, {
+ record,
+ isUpdate: true,
+ });
+ }
+
+ async function handleDelete(record: Recordable) {
+ const result = await deleteBatchOperator([record.id])
+ if (result.code === 'O0003') {
+ await reload();
+ }
+ }
+
+ async function handleSuccess() {
+ reload();
+ }
+
+ async function handleOnStatus(newStatus: number) {
+ const data = getSelectRows();
+ if (data.length === 0) {
+ createMessage.warn('请选择一条数据');
+ return;
+ }
+ const ids = data.map((item) => item.id);
+ const result = await updateOperatorStatus(ids,newStatus )
+ if (result.code === 'O0004') {
+ await reload();
+ }
+ }
+
+ async function handleCancel() {
+ reload();
+ }
+
+ return {
+ registerTable,
+ registerModal,
+ handleCreate,
+ handleDelete,
+ handleBatchDelete,
+ handleEdit,
+ handleSuccess,
+ handleOnStatus,
+ handleCancel,
+ }
+ }
+})
+</script>