添加药材信息

zhuguifei

2023-12-21 8d91ee6e59a64623c2d717c26b0002c16d1d979d

添加药材信息

 src/views/dry/DryHerbInfoList.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,177 @@
<template>
    <div>
        <!--引用表格-->
        <BasicTable @register="registerTable" :rowSelection="rowSelection">
            <!--插槽:table标题-->
            <template #tableTitle>
                <a-button type="primary" @click="handleAdd" preIcon="ant-design:plus-outlined"> æ–°å¢ž </a-button>
                <a-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXls"> å¯¼å‡º </a-button>
                <j-upload-button type="primary" preIcon="ant-design:import-outlined" @click="onImportXls"> å¯¼å…¥ </j-upload-button>
                <a-dropdown v-if="selectedRowKeys.length > 0">
                    <template #overlay>
                        <a-menu>
                            <a-menu-item key="1" @click="batchHandleDelete">
                                <Icon icon="ant-design:delete-outlined" />
                                åˆ é™¤
                            </a-menu-item>
                        </a-menu>
                    </template>
                    <a-button
                        >批量操作
                        <Icon icon="mdi:chevron-down" />
                    </a-button>
                </a-dropdown>
            </template>
            <!--操作栏-->
            <template #action="{ record }">
                <TableAction :actions="getTableAction(record)" :dropDownActions="getDropDownAction(record)" />
            </template>
            <!--字段回显插槽-->
            <template #htmlSlot="{ text }">
                <div v-html="text"></div>
            </template>
            <!--省市区字段回显插槽-->
            <template #pcaSlot="{ text }">
                {{ getAreaTextByCode(text) }}
            </template>
            <template #fileSlot="{ text }">
                <span v-if="!text" style="font-size: 12px; font-style: italic">无文件</span>
                <a-button v-else :ghost="true" type="primary" preIcon="ant-design:download-outlined" size="small" @click="downloadFile(text)">下载 </a-button>
            </template>
        </BasicTable>
        <!-- è¡¨å•åŒºåŸŸ -->
        <DryHerbInfoModal @register="registerModal" @success="handleSuccess" />
    </div>
</template>

<script lang="ts" name="dry-dryHerbInfo" setup>
    import { ref, computed, unref } from 'vue'
    import { BasicTable, useTable, TableAction } from '/@/components/Table'
    import { useModal } from '/@/components/Modal'
    import { useListPage } from '/@/hooks/system/useListPage'
    import DryHerbInfoModal from './components/DryHerbInfoModal.vue'
    import { columns, searchFormSchema } from './dataDefine/DryHerbInfo.data'
    import { list, deleteOne, batchDelete, getImportUrl, getExportUrl } from './api/DryHerbInfo.api'
    import { downloadFile } from '/@/utils/common/renderUtils'

    const checkedKeys = ref<Array<string | number>>([])
    //注册model
    const [registerModal, { openModal }] = useModal()
    //注册table数据
    const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
        tableProps: {
            title: 'dry_herb_info',
            api: list,
            columns,
            canResize: false,
            formConfig: {
                //labelWidth: 120,
                schemas: searchFormSchema,
                autoSubmitOnEnter: true,
                showAdvancedButton: true,
                fieldMapToNumber: [],
                fieldMapToTime: [],
            },
            actionColumn: {
                width: 120,
                fixed: 'right',
            },
        },
        exportConfig: {
            name: 'dry_herb_info',
            url: getExportUrl,
        },
        importConfig: {
            url: getImportUrl,
            success: handleSuccess,
        },
    })

    const [registerTable, { reload }, { rowSelection, selectedRowKeys }] = tableContext

    /**
     * æ–°å¢žäº‹ä»¶
     */
    function handleAdd() {
        openModal(true, {
            isUpdate: false,
            showFooter: true,
        })
    }

    /**
     * ç¼–辑事件
     */
    function handleEdit(record: Recordable) {
        openModal(true, {
            record,
            isUpdate: true,
            showFooter: true,
        })
    }

    /**
     * è¯¦æƒ…
     */
    function handleDetail(record: Recordable) {
        openModal(true, {
            record,
            isUpdate: true,
            showFooter: false,
        })
    }

    /**
     * åˆ é™¤äº‹ä»¶
     */
    async function handleDelete(record) {
        await deleteOne({ id: record.id }, handleSuccess)
    }

    /**
     * æ‰¹é‡åˆ é™¤äº‹ä»¶
     */
    async function batchHandleDelete() {
        await batchDelete({ ids: selectedRowKeys.value }, handleSuccess)
    }

    /**
     * æˆåŠŸå›žè°ƒ
     */
    function handleSuccess() {
        ;(selectedRowKeys.value = []) && reload()
    }

    /**
     * æ“ä½œæ 
     */
    function getTableAction(record) {
        return [
            {
                label: '编辑',
                onClick: handleEdit.bind(null, record),
            },
        ]
    }

    /**
     * ä¸‹æ‹‰æ“ä½œæ 
     */
    function getDropDownAction(record) {
        return [
            {
                label: '详情',
                onClick: handleDetail.bind(null, record),
            },
            {
                label: '删除',
                popConfirm: {
                    title: '是否确认删除',
                    confirm: handleDelete.bind(null, record),
                },
            },
        ]
    }
</script>

<style scoped></style>

 src/views/dry/api/DryHerbInfo.api.ts

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,64 @@
import {defHttp} from '/@/utils/http/axios';
import { useMessage } from "/@/hooks/web/useMessage";

const { createConfirm } = useMessage();

enum Api {
  list = '/dry/dryHerbInfo/list',
  save='/dry/dryHerbInfo/add',
  edit='/dry/dryHerbInfo/edit',
  deleteOne = '/dry/dryHerbInfo/delete',
  deleteBatch = '/dry/dryHerbInfo/deleteBatch',
  importExcel = '/dry/dryHerbInfo/importExcel',
  exportXls = '/dry/dryHerbInfo/exportXls',
}
/**
 * å¯¼å‡ºapi
 * @param params
 */
export const getExportUrl = Api.exportXls;
/**
 * å¯¼å…¥api
 */
export const getImportUrl = Api.importExcel;
/**
 * åˆ—表接口
 * @param params
 */
export const list = (params) =>
  defHttp.get({url: Api.list, params});

/**
 * åˆ é™¤å•ä¸ª
 */
export const deleteOne = (params,handleSuccess) => {
  return defHttp.delete({url: Api.deleteOne, params}, {joinParamsToUrl: true}).then(() => {
    handleSuccess();
  });
}
/**
 * æ‰¹é‡åˆ é™¤
 * @param params
 */
export const batchDelete = (params, handleSuccess) => {
  createConfirm({
    iconType: 'warning',
    title: '确认删除',
    content: '是否删除选中数据',
    okText: '确认',
    cancelText: '取消',
    onOk: () => {
      return defHttp.delete({url: Api.deleteBatch, data: params}, {joinParamsToUrl: true}).then(() => {
        handleSuccess();
      });
    }
  });
}
/**
 * ä¿å­˜æˆ–者更新
 * @param params
 */
export const saveOrUpdate = (params, isUpdate) => {
  let url = isUpdate ? Api.edit : Api.save;
  return defHttp.post({url: url, params});
}

 src/views/dry/components/DryHerbInfoForm.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,70 @@
<template>
    <div style="min-height: 400px">
        <BasicForm @register="registerForm" />
        <div style="width: 100%; text-align: center" v-if="!formDisabled">
            <a-button @click="submitForm" pre-icon="ant-design:check" type="primary">提 äº¤</a-button>
        </div>
    </div>
</template>

<script lang="ts">
    import { BasicForm, useForm } from '/@/components/Form/index'
    import { computed, defineComponent } from 'vue'
    import { defHttp } from '/@/utils/http/axios'
    import { propTypes } from '/@/utils/propTypes'
    import { getBpmFormSchema } from '../dataDefine/DryHerbInfo.data'
    import { saveOrUpdate } from '../api/DryHerbInfo.api'

    export default defineComponent({
        name: 'DryHerbInfoForm',
        components: {
            BasicForm,
        },
        props: {
            formData: propTypes.object.def({}),
            formBpm: propTypes.bool.def(true),
        },
        setup(props) {
            const [registerForm, { setFieldsValue, setProps, getFieldsValue }] = useForm({
                labelWidth: 150,
                schemas: getBpmFormSchema(props.formData),
                showActionButtonGroup: false,
                baseColProps: { span: 24 },
            })

            const formDisabled = computed(() => {
                if (props.formData.disabled === false) {
                    return false
                }
                return true
            })

            let formData = {}
            const queryByIdUrl = '/dry/dryHerbInfo/queryById'
            async function initFormData() {
                let params = { id: props.formData.dataId }
                const data = await defHttp.get({ url: queryByIdUrl, params })
                formData = { ...data }
                //设置表单的值
                await setFieldsValue(formData)
                //默认是禁用
                await setProps({ disabled: formDisabled.value })
            }

            async function submitForm() {
                let data = getFieldsValue()
                let params = Object.assign({}, formData, data)
                console.log('表单数据', params)
                await saveOrUpdate(params, true)
            }

            initFormData()

            return {
                registerForm,
                formDisabled,
                submitForm,
            }
        },
    })
</script>

 src/views/dry/components/DryHerbInfoModal.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,66 @@
<template>
    <BasicModal v-bind="$attrs" @register="registerModal" destroyOnClose :title="title" :width="800" @ok="handleSubmit">
        <BasicForm @register="registerForm" />
    </BasicModal>
</template>

<script lang="ts" setup>
    import { ref, computed, unref } from 'vue'
    import { BasicModal, useModalInner } from '/@/components/Modal'
    import { BasicForm, useForm } from '/@/components/Form/index'
    import { formSchema } from '../dataDefine/DryHerbInfo.data'
    import { saveOrUpdate } from '../api/DryHerbInfo.api'
    // Emits声明
    const emit = defineEmits(['register', 'success'])
    const isUpdate = ref(true)
    //表单配置
    const [registerForm, { setProps, resetFields, setFieldsValue, validate }] = useForm({
        //labelWidth: 150,
        schemas: formSchema,
        showActionButtonGroup: false,
        baseColProps: { span: 24 },
    })
    //表单赋值
    const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
        //重置表单
        await resetFields()
        setModalProps({ confirmLoading: false, showCancelBtn: !!data?.showFooter, showOkBtn: !!data?.showFooter })
        isUpdate.value = !!data?.isUpdate
        if (unref(isUpdate)) {
            //表单赋值
            await setFieldsValue({
                ...data.record,
            })
        }
        // éšè—åº•éƒ¨æ—¶ç¦ç”¨æ•´ä¸ªè¡¨å•
        setProps({ disabled: !data?.showFooter })
    })
    //设置标题
    const title = computed(() => (!unref(isUpdate) ? '新增' : '编辑'))
    //表单提交事件
    async function handleSubmit(v) {
        try {
            let values = await validate()
            setModalProps({ confirmLoading: true })
            //提交表单
            await saveOrUpdate(values, isUpdate.value)
            //关闭弹窗
            closeModal()
            //刷新列表
            emit('success')
        } finally {
            setModalProps({ confirmLoading: false })
        }
    }
</script>

<style lang="less" scoped>
    /** æ—¶é—´å’Œæ•°å­—输入框样式 */
    :deep(.ant-input-number) {
        width: 100%;
    }

    :deep(.ant-calendar-picker) {
        width: 100%;
    }
</style>

 src/views/dry/dataDefine/DryHerbInfo.data.ts

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,226 @@
import {BasicColumn} from '/@/components/Table';
import {FormSchema} from '/@/components/Table';

//列表数据
export const columns: BasicColumn[] = [
   {
    title: '中药名',
    align:"center",
    dataIndex: 'name'
   },
   {
    title: '拼音',
    align:"center",
    dataIndex: 'pinyin'
   },
   {
    title: '别名',
    align:"center",
    dataIndex: 'alias'
   },
   {
    title: '英文名',
    align:"center",
    dataIndex: 'english'
   },
   {
    title: '药用部位',
    align:"center",
    dataIndex: 'parts'
   },
   {
    title: '植物形态',
    align:"center",
    dataIndex: 'morphology'
   },
   {
    title: '产地分布',
    align:"center",
    dataIndex: 'origin'
   },
   {
    title: '采收加工',
    align:"center",
    dataIndex: 'harvest'
   },
   {
    title: '药材性状',
    align:"center",
    dataIndex: 'characterDrug'
   },
   {
    title: '性味归经',
    align:"center",
    dataIndex: 'famt'
   },
   {
    title: '功效与作用',
    align:"center",
    dataIndex: 'efficacy'
   },
   {
    title: '临床应用',
    align:"center",
    dataIndex: 'clinical'
   },
   {
    title: '药理研究',
    align:"center",
    dataIndex: 'pharmacological'
   },
   {
    title: '主要成分',
    align:"center",
    dataIndex: 'bases'
   },
   {
    title: '使用禁忌',
    align:"center",
    dataIndex: 'usageTaboo'
   },
   {
    title: '租户id',
    align:"center",
    dataIndex: 'tenantId'
   },
];
//查询数据
export const searchFormSchema: FormSchema[] = [
    {
      label: "中药名",
      field: 'name',
      component: 'JInput',
      colProps: {span: 6},
     },
    {
      label: "拼音",
      field: 'pinyin',
      component: 'JInput',
      colProps: {span: 6},
     },
    {
      label: "别名",
      field: 'alias',
      component: 'JInput',
      colProps: {span: 6},
     },
    {
      label: "英文名",
      field: 'english',
      component: 'JInput',
      colProps: {span: 6},
     },
    {
      label: "产地分布",
      field: 'origin',
      component: 'JInput',
      colProps: {span: 6},
     },
    {
      label: "功效与作用",
      field: 'efficacy',
      component: 'JInput',
      colProps: {span: 6},
     },
];
//表单数据
export const formSchema: FormSchema[] = [
  {
    label: '中药名',
    field: 'name',
    component: 'Input',
  },
  {
    label: '拼音',
    field: 'pinyin',
    component: 'Input',
  },
  {
    label: '别名',
    field: 'alias',
    component: 'Input',
  },
  {
    label: '英文名',
    field: 'english',
    component: 'Input',
  },
  {
    label: '药用部位',
    field: 'parts',
    component: 'Input',
  },
  {
    label: '植物形态',
    field: 'morphology',
    component: 'Input',
  },
  {
    label: '产地分布',
    field: 'origin',
    component: 'Input',
  },
  {
    label: '采收加工',
    field: 'harvest',
    component: 'Input',
  },
  {
    label: '药材性状',
    field: 'characterDrug',
    component: 'Input',
  },
  {
    label: '性味归经',
    field: 'famt',
    component: 'Input',
  },
  {
    label: '功效与作用',
    field: 'efficacy',
    component: 'Input',
  },
  {
    label: '临床应用',
    field: 'clinical',
    component: 'Input',
  },
  {
    label: '药理研究',
    field: 'pharmacological',
    component: 'Input',
  },
  {
    label: '主要成分',
    field: 'bases',
    component: 'Input',
  },
  {
    label: '使用禁忌',
    field: 'usageTaboo',
    component: 'Input',
  },
  {
    label: '租户id',
    field: 'tenantId',
    component: 'InputNumber',
  },
    // TODO ä¸»é”®éšè—å­—段，目前写死为ID
    {
      label: '',
      field: 'id',
      component: 'Input',
      show: false
    },
];



/**
* æµç¨‹è¡¨å•è°ƒç”¨è¿™ä¸ªæ–¹æ³•èŽ·å–formSchema
* @param param
*/
export function getBpmFormSchema(_formData): FormSchema[]{
  // é»˜è®¤å’ŒåŽŸå§‹è¡¨å•ä¿æŒä¸€è‡´ å¦‚果流程中配置了权限数据，这里需要单独处理formSchema
  return formSchema;
}

 src/views/dry/sql/DryHerbInfo_menu_insert.sql

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,26 @@
-- æ³¨æ„ï¼šè¯¥é¡µé¢å¯¹åº”的前台目录为views/dry文件夹下
-- å¦‚果你想更改到其他目录，请修改sql中component字段对应的值


INSERT INTO sys_permission(id, parent_id, name, url, component, component_name, redirect, menu_type, perms, perms_type, sort_no, always_show, icon, is_route, is_leaf, keep_alive, hidden, hide_tab, description, status, del_flag, rule_flag, create_by, create_time, update_by, update_time, internal_or_external) 
VALUES ('2023122112489900070', NULL, 'dry_herb_info', '/dry/dryHerbInfoList', 'dry/DryHerbInfoList', NULL, NULL, 0, NULL, '1', 0.00, 0, NULL, 1, 0, 0, 0, 0, NULL, '1', 0, 0, 'admin', '2023-12-21 12:48:07', NULL, NULL, 0);

-- æƒé™æŽ§åˆ¶sql
-- æ–°å¢ž
INSERT INTO sys_permission(id, parent_id, name, url, component, is_route, component_name, redirect, menu_type, perms, perms_type, sort_no, always_show, icon, is_leaf, keep_alive, hidden, hide_tab, description, create_by, create_time, update_by, update_time, del_flag, rule_flag, status, internal_or_external)
VALUES ('2023122112489900071', '2023122112489900070', '添加dry_herb_info', NULL, NULL, 0, NULL, NULL, 2, 'dry:dry_herb_info:add', '1', NULL, 0, NULL, 1, 0, 0, 0, NULL, 'admin', '2023-12-21 12:48:07', NULL, NULL, 0, 0, '1', 0);
-- ç¼–辑
INSERT INTO sys_permission(id, parent_id, name, url, component, is_route, component_name, redirect, menu_type, perms, perms_type, sort_no, always_show, icon, is_leaf, keep_alive, hidden, hide_tab, description, create_by, create_time, update_by, update_time, del_flag, rule_flag, status, internal_or_external)
VALUES ('2023122112489900072', '2023122112489900070', '编辑dry_herb_info', NULL, NULL, 0, NULL, NULL, 2, 'dry:dry_herb_info:edit', '1', NULL, 0, NULL, 1, 0, 0, 0, NULL, 'admin', '2023-12-21 12:48:07', NULL, NULL, 0, 0, '1', 0);
-- åˆ é™¤
INSERT INTO sys_permission(id, parent_id, name, url, component, is_route, component_name, redirect, menu_type, perms, perms_type, sort_no, always_show, icon, is_leaf, keep_alive, hidden, hide_tab, description, create_by, create_time, update_by, update_time, del_flag, rule_flag, status, internal_or_external)
VALUES ('2023122112489900073', '2023122112489900070', '删除dry_herb_info', NULL, NULL, 0, NULL, NULL, 2, 'dry:dry_herb_info:delete', '1', NULL, 0, NULL, 1, 0, 0, 0, NULL, 'admin', '2023-12-21 12:48:07', NULL, NULL, 0, 0, '1', 0);
-- æ‰¹é‡åˆ é™¤
INSERT INTO sys_permission(id, parent_id, name, url, component, is_route, component_name, redirect, menu_type, perms, perms_type, sort_no, always_show, icon, is_leaf, keep_alive, hidden, hide_tab, description, create_by, create_time, update_by, update_time, del_flag, rule_flag, status, internal_or_external)
VALUES ('2023122112489900074', '2023122112489900070', '批量删除dry_herb_info', NULL, NULL, 0, NULL, NULL, 2, 'dry:dry_herb_info:deleteBatch', '1', NULL, 0, NULL, 1, 0, 0, 0, NULL, 'admin', '2023-12-21 12:48:07', NULL, NULL, 0, 0, '1', 0);
-- å¯¼å‡ºexcel
INSERT INTO sys_permission(id, parent_id, name, url, component, is_route, component_name, redirect, menu_type, perms, perms_type, sort_no, always_show, icon, is_leaf, keep_alive, hidden, hide_tab, description, create_by, create_time, update_by, update_time, del_flag, rule_flag, status, internal_or_external)
VALUES ('2023122112489900075', '2023122112489900070', '导出excel_dry_herb_info', NULL, NULL, 0, NULL, NULL, 2, 'dry:dry_herb_info:exportXls', '1', NULL, 0, NULL, 1, 0, 0, 0, NULL, 'admin', '2023-12-21 12:48:07', NULL, NULL, 0, 0, '1', 0);
-- å¯¼å…¥excel
INSERT INTO sys_permission(id, parent_id, name, url, component, is_route, component_name, redirect, menu_type, perms, perms_type, sort_no, always_show, icon, is_leaf, keep_alive, hidden, hide_tab, description, create_by, create_time, update_by, update_time, del_flag, rule_flag, status, internal_or_external)
VALUES ('2023122112489900076', '2023122112489900070', '导入excel_dry_herb_info', NULL, NULL, 0, NULL, NULL, 2, 'dry:dry_herb_info:importExcel', '1', NULL, 0, NULL, 1, 0, 0, 0, NULL, 'admin', '2023-12-21 12:48:07', NULL, NULL, 0, 0, '1', 0);