修改物料树的样式
This commit is contained in:
parent
7606dcc82d
commit
e55e6efab6
|
|
@ -58,13 +58,136 @@
|
|||
@click="handleAddbj({ levle: '1' })" preIcon="ant-design:plus-outlined"> 一级分类</a-button>
|
||||
</div>
|
||||
</div>
|
||||
<a-tree class="draggable-tree" draggable block-node :tree-data="treeData">
|
||||
|
||||
<a-menu style="width: 100%;" mode="inline" >
|
||||
<template v-for="item in treeData">
|
||||
<!-- 第一层判断是否有下级 -->
|
||||
<a-sub-menu v-if="item.children && item.children.length > 0" :key="item.key">
|
||||
<template #icon>
|
||||
<Icon :icon="item.icon" :size="20" v-if="item.icon" />
|
||||
<Icon icon="ant-design:appstore-add-outlined" :size="20" v-else />
|
||||
</template>
|
||||
<template #title>
|
||||
<span @mouseenter="item.showContent = true" @mouseleave="item.showContent = false">{{ item?.title }}
|
||||
<span v-if="item?.izEnabled == '1'" style="color:red;">(已停用)</span>
|
||||
<span v-show="item.showContent">
|
||||
<!-- 下拉菜单 -->
|
||||
<a-dropdown >
|
||||
<template #overlay>
|
||||
<ConfigMaterialInfoListMenu :data="item" @handleAddbj="handleAddbj" @handleAddxj="handleAddxj" @handleAdd="handleAdd" @handleFenleiEdit="handleFenleiEdit" @handleQyty="handleQyty" @handleQianyi="handleQianyi" />
|
||||
</template>
|
||||
<!-- 图标 -->
|
||||
<a class="ant-dropdown-link" style="color:#1890FF;" @click.prevent>
|
||||
<Icon icon="ant-design:setting-outlined" />
|
||||
</a>
|
||||
</a-dropdown>
|
||||
</span>
|
||||
</span>
|
||||
</template>
|
||||
<!-- 第二级 -->
|
||||
<template v-for="child in item.children">
|
||||
<a-sub-menu :key="child.key" v-if="child.children && child.children.length > 0">
|
||||
<template #icon>
|
||||
<Icon :icon="child.icon" :size="20" v-if="child.icon" />
|
||||
<Icon icon="ant-design:appstore-add-outlined" :size="20" v-else />
|
||||
</template>
|
||||
<template #title>
|
||||
<span @mouseenter="child.showContent = true" @mouseleave="child.showContent = false">{{ child?.title }}
|
||||
<span v-if="child?.izEnabled == '1'" style="color:red;">(已停用)</span>
|
||||
<span v-show="child.showContent">
|
||||
<!-- 下拉菜单 -->
|
||||
<a-dropdown >
|
||||
<template #overlay>
|
||||
<ConfigMaterialInfoListMenu :data="child" @handleAddbj="handleAddbj" @handleAddxj="handleAddxj" @handleAdd="handleAdd" @handleFenleiEdit="handleFenleiEdit" @handleQyty="handleQyty" @handleQianyi="handleQianyi" />
|
||||
</template>
|
||||
<!-- 图标 -->
|
||||
<a class="ant-dropdown-link" style="color:#1890FF;" @click.prevent>
|
||||
<Icon icon="ant-design:setting-outlined" />
|
||||
</a>
|
||||
</a-dropdown>
|
||||
</span>
|
||||
</span>
|
||||
</template>
|
||||
<!-- 第三层 -->
|
||||
<a-menu-item :key="childThree.key" v-for="childThree in child.children">
|
||||
<template #icon>
|
||||
<Icon :icon="childThree.icon" :size="20" v-if="childThree.icon" />
|
||||
<Icon icon="ant-design:appstore-add-outlined" :size="20" v-else />
|
||||
</template>
|
||||
<span @mouseenter="childThree.showContent = true" @mouseleave="childThree.showContent = false">{{ childThree?.title }}
|
||||
<span v-if="childThree?.izEnabled == '1'" style="color:red;">(已停用)</span>
|
||||
<span v-show="childThree.showContent">
|
||||
<a-dropdown >
|
||||
<template #overlay>
|
||||
<ConfigMaterialInfoListMenu :data="childThree" @handleAddbj="handleAddbj" @handleAddxj="handleAddxj" @handleAdd="handleAdd" @handleFenleiEdit="handleFenleiEdit" @handleQyty="handleQyty" @handleQianyi="handleQianyi" />
|
||||
</template>
|
||||
<a class="ant-dropdown-link" style="color:#1890FF;" @click.prevent>
|
||||
<Icon icon="ant-design:setting-outlined" />
|
||||
</a>
|
||||
</a-dropdown>
|
||||
</span>
|
||||
</span>
|
||||
</a-menu-item>
|
||||
</a-sub-menu>
|
||||
<a-menu-item :key="child.key" v-if="!child.children || child.children.length < 1">
|
||||
<template #icon>
|
||||
<Icon :icon="child.icon" :size="20" v-if="child.icon" />
|
||||
<Icon icon="ant-design:appstore-add-outlined" :size="20" v-else />
|
||||
</template>
|
||||
<span @mouseenter="child.showContent = true" @mouseleave="child.showContent = false">{{ child?.title }}
|
||||
<span v-if="child?.izEnabled == '1'" style="color:red;">(已停用)</span>
|
||||
<span v-show="child.showContent">
|
||||
<!-- 下拉菜单 -->
|
||||
<a-dropdown >
|
||||
<template #overlay>
|
||||
<ConfigMaterialInfoListMenu :data="child" @handleAddbj="handleAddbj" @handleAddxj="handleAddxj" @handleAdd="handleAdd" @handleFenleiEdit="handleFenleiEdit" @handleQyty="handleQyty" @handleQianyi="handleQianyi" />
|
||||
</template>
|
||||
<!-- 图标 -->
|
||||
<a class="ant-dropdown-link" style="color:#1890FF;" @click.prevent>
|
||||
<Icon icon="ant-design:setting-outlined" />
|
||||
</a>
|
||||
</a-dropdown>
|
||||
</span>
|
||||
</span>
|
||||
</a-menu-item>
|
||||
</template>
|
||||
</a-sub-menu>
|
||||
<a-menu-item :key="item.key" v-if="!item.children || item.children.length < 1">
|
||||
<template #icon>
|
||||
<Icon :icon="item.icon" :size="20" v-if="item.icon" />
|
||||
<Icon icon="ant-design:appstore-add-outlined" :size="20" v-else />
|
||||
</template>
|
||||
<span @mouseenter="item.showContent = true" @mouseleave="item.showContent = false">{{ item?.title }}
|
||||
<span v-if="item?.izEnabled == '1'" style="color:red;">(已停用)</span>
|
||||
<span v-show="item.showContent">
|
||||
<!-- 下拉菜单 -->
|
||||
<a-dropdown >
|
||||
<template #overlay>
|
||||
<ConfigMaterialInfoListMenu :data="item" @handleAddbj="handleAddbj" @handleAddxj="handleAddxj" @handleAdd="handleAdd" @handleFenleiEdit="handleFenleiEdit" @handleQyty="handleQyty" @handleQianyi="handleQianyi" />
|
||||
</template>
|
||||
<!-- 图标 -->
|
||||
<a class="ant-dropdown-link" style="color:#1890FF;" @click.prevent>
|
||||
<Icon icon="ant-design:setting-outlined" />
|
||||
</a>
|
||||
</a-dropdown>
|
||||
</span>
|
||||
</span>
|
||||
</a-menu-item>
|
||||
</template>
|
||||
</a-menu>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- <a-tree class="draggable-tree" draggable block-node :tree-data="treeData">
|
||||
<template #title="{ data, title }">
|
||||
<div @mouseenter="data.showContent = true" @mouseleave="data.showContent = false">
|
||||
<span @click="handleSearch(data)">{{ title }}</span>
|
||||
<span v-if="data?.izEnabled == '1'" style="color:red;">(已停用)</span>
|
||||
<span v-show="data.showContent" style="margin-left: 5px;">
|
||||
<!-- 下拉菜单 -->
|
||||
<a-dropdown>
|
||||
<a class="ant-dropdown-link" @click.prevent>
|
||||
<Icon icon="ant-design:setting-outlined" />
|
||||
|
|
@ -117,7 +240,7 @@
|
|||
</span>
|
||||
</div>
|
||||
</template>
|
||||
</a-tree>
|
||||
</a-tree> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="container-height" style="width:calc(100% - 300px);float: left;">
|
||||
|
|
@ -179,6 +302,7 @@ import ConfigMaterialTypeModal from '/@/views/invoicing/ConfigMaterial/component
|
|||
import ConfigMaterialMedicationModal from '/@/views/invoicing/ConfigMaterial/components/ConfigMaterialMedicationModal.vue';
|
||||
import QianyiModal from '/@/views/invoicing/ConfigMaterial/components/QianyiModal.vue';
|
||||
import WlqianyiModal from '/@/views/invoicing/ConfigMaterial/components/WlqianyiModal.vue';
|
||||
import ConfigMaterialInfoListMenu from './ConfigMaterialInfoListMenu.vue';
|
||||
import { useResponsive } from '/@/hooks/web/useResponsive';
|
||||
|
||||
const { screenEnum, screenWidth } = useResponsive();
|
||||
|
|
@ -656,4 +780,13 @@ onMounted(() => {
|
|||
height: 81.5vh;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
:deep(.ant-menu-item-selected) {
|
||||
color: #4b4b4b !important;
|
||||
}
|
||||
|
||||
:deep(.ant-menu-submenu-title) {
|
||||
color: #4b4b4b !important;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,71 @@
|
|||
<template>
|
||||
<a-menu>
|
||||
<a-menu-item v-if="data.levle == '1'">
|
||||
<Icon icon="ant-design:plus-outlined" class="abuttoncss" />
|
||||
<a href="javascript:;" class="abuttoncss" @click="handleAddbj(data)">添加本级</a>
|
||||
</a-menu-item>
|
||||
<a-menu-item
|
||||
v-if="(data.levle == '1' || data.levle == '2') && data.tjxj == 0 && data.parentIzEnabled == 0 && data.izEnabled == '0'">
|
||||
<Icon icon="ant-design:plus-outlined" class="abuttoncss" />
|
||||
<a href="javascript:;" class="abuttoncss" @click="handleAddxj(data)">添加下级</a>
|
||||
</a-menu-item>
|
||||
<a-menu-item
|
||||
v-if="data?.children?.length == 0 && data.parentIzEnabled == 0 && data.izEnabled == '0'">
|
||||
<Icon icon="ant-design:plus-outlined" class="abuttoncss" />
|
||||
<a href="javascript:;" class="abuttoncss" @click="handleAdd(data)">添加物料</a>
|
||||
</a-menu-item>
|
||||
<a-menu-item v-if="data.parentIzEnabled == 0 && data.izEnabled == '0'">
|
||||
<Icon icon="ant-design:edit-outlined" class="abuttoncss" />
|
||||
<a href="javascript:;" class="abuttoncss" @click="handleFenleiEdit(data)">编辑</a>
|
||||
</a-menu-item>
|
||||
<a-menu-item
|
||||
v-if="(data.izEnabled == '1' && data.parentIzEnabled == 0) || (data.parentIzEnabled == 1 && data.levle == '1')">
|
||||
<Icon icon="ant-design:check-circle-outlined" class="abuttoncss" />
|
||||
<a href="javascript:;" class="abuttoncss" @click="handleQyty(data, '0')">启用</a>
|
||||
</a-menu-item>
|
||||
<a-menu-item v-if="data.izEnabled == '0'">
|
||||
<Icon icon="ant-design:stop-outlined" class="abuttoncss" />
|
||||
<a href="javascript:;" class="abuttoncss" @click="handleQyty(data, '1')">停用</a>
|
||||
</a-menu-item>
|
||||
<a-menu-item
|
||||
v-if="(data.levle == '2' || data.levle == '3') && data.parentIzEnabled == 0 && data.izEnabled == '0'">
|
||||
<Icon icon="ant-design:copy-outlined" class="abuttoncss" />
|
||||
<a href="javascript:;" class="abuttoncss" @click="handleQianyi(data)">迁移</a>
|
||||
</a-menu-item>
|
||||
|
||||
<a-menu-item
|
||||
v-if="(data.levle == '2' || data.levle == '3') && data.parentIzEnabled == 1 && data.izEnabled == '1'">
|
||||
<span disabled>
|
||||
<Icon icon="ant-design:file-excel-outlined" />
|
||||
暂无操作
|
||||
</span>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
|
||||
<script lang="ts" name="configMaterialInfo-configMaterialInfo" setup>
|
||||
|
||||
const emit = defineEmits(['handleAddbj', 'handleAddxj', 'handleAdd', 'handleFenleiEdit', 'handleQyty', 'handleQianyi']);
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: [String, Array] as PropType<string | string[]>,
|
||||
default: '',},
|
||||
});
|
||||
function handleAddbj(data) { emit('handleAddbj', data); }
|
||||
function handleAddxj(data) { emit('handleAddxj', data); }
|
||||
function handleAdd(data) { emit('handleAdd', data); }
|
||||
function handleFenleiEdit(data) { emit('handleFenleiEdit', data); }
|
||||
function handleQyty(data, type) { emit('handleQyty', data, type); }
|
||||
function handleQianyi(data) { emit('handleQianyi', data); }
|
||||
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
|
||||
.abuttoncss {
|
||||
color: #1890ff !important;
|
||||
}
|
||||
|
||||
.abuttoncss:hover {
|
||||
color: #69c0ff !important;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -4,10 +4,16 @@
|
|||
<template #detail>
|
||||
<a-form ref="formRef" class="antd-modal-form" :labelCol="labelCol" :wrapperCol="wrapperCol" name="ConfigMaterialMedicationForm">
|
||||
<a-row>
|
||||
<a-col :span="24" style="margin-top: 100px;">
|
||||
<a-col :span="24" style="margin-top: 50px;">
|
||||
<a-form-item label="一级分类" v-bind="validateInfos.categoryName" id="ConfigMaterialMedicationForm-categoryName" name="categoryId">
|
||||
<a-input v-model:value="formData.categoryName" placeholder="请输入一级分类" maxLength="10" allow-clear ></a-input>
|
||||
</a-form-item>
|
||||
|
||||
<a-col :span="24" style="margin-top: 50px;">
|
||||
<a-form-item label="图标" v-bind="validateInfos.icon" id="ConfigMaterialMedicationForm-icon" name="icon">
|
||||
<IconPicker v-model:value="formData.icon" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
|
|
@ -25,6 +31,7 @@
|
|||
import { saveOrUpdate } from '../ConfigMaterialCategory.api';
|
||||
import { Form } from 'ant-design-vue';
|
||||
import JFormContainer from '/@/components/Form/src/container/JFormContainer.vue';
|
||||
import { IconPicker } from '/@/components/Icon/index';
|
||||
const props = defineProps({
|
||||
formDisabled: { type: Boolean, default: false },
|
||||
formData: { type: Object, default: () => ({})},
|
||||
|
|
@ -36,6 +43,7 @@
|
|||
const formData = reactive<Record<string, any>>({
|
||||
id: '',
|
||||
categoryName: '',
|
||||
icon: '',
|
||||
});
|
||||
const { createMessage } = useMessage();
|
||||
const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 5 } });
|
||||
|
|
|
|||
|
|
@ -14,11 +14,16 @@
|
|||
<j-dict-select-tag type='list' v-model:value="formData.typeId" :dictCode="`nu_config_material_type,type_name,id,iz_enabled = 0 and del_flag = 0 and category_id = ${formData.categoryId || -1}`" placeholder="请选择二级分类" allow-clear/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<a-col :span="24" style="margin-top: 50px;">
|
||||
<a-form-item label="三级分类" v-bind="validateInfos.medicationName" id="ConfigMaterialMedicationForm-medicationName" name="medicationName">
|
||||
<a-input v-model:value="formData.medicationName" placeholder="请输入三级分类" maxLength="10" allow-clear ></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="24" style="margin-top: 50px;">
|
||||
<a-form-item label="图标" v-bind="validateInfos.icon" id="ConfigMaterialMedicationForm-icon" name="icon">
|
||||
<IconPicker v-model:value="formData.icon" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</template>
|
||||
|
|
@ -35,6 +40,7 @@
|
|||
import { saveOrUpdate } from '../ConfigMaterialMedication.api';
|
||||
import { Form } from 'ant-design-vue';
|
||||
import JFormContainer from '/@/components/Form/src/container/JFormContainer.vue';
|
||||
import { IconPicker } from '/@/components/Icon/index';
|
||||
const props = defineProps({
|
||||
formDisabled: { type: Boolean, default: false },
|
||||
formData: { type: Object, default: () => ({})},
|
||||
|
|
@ -49,6 +55,7 @@
|
|||
categoryId: '',
|
||||
typeId: '',
|
||||
medicationName: '',
|
||||
icon: '',
|
||||
});
|
||||
const { createMessage } = useMessage();
|
||||
const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 5 } });
|
||||
|
|
|
|||
|
|
@ -9,11 +9,16 @@
|
|||
<j-dict-select-tag type='list' v-model:value="formData.categoryId" dictCode="nu_config_material_category,category_name,id,iz_enabled = 0 and del_flag = 0" placeholder="请选择一级分类" allow-clear/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<a-col :span="24" style="margin-top: 50px;">
|
||||
<a-form-item label="二级分类" v-bind="validateInfos.typeName" id="ConfigMaterialTypeForm-typeName" name="typeName">
|
||||
<a-input v-model:value="formData.typeName" placeholder="请输入二级分类" maxLength="10" allow-clear ></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="24" style="margin-top: 50px;">
|
||||
<a-form-item label="图标" v-bind="validateInfos.icon" id="ConfigMaterialMedicationForm-icon" name="icon">
|
||||
<IconPicker v-model:value="formData.icon" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</template>
|
||||
|
|
@ -30,6 +35,7 @@
|
|||
import { saveOrUpdate } from '../ConfigMaterialType.api';
|
||||
import { Form } from 'ant-design-vue';
|
||||
import JFormContainer from '/@/components/Form/src/container/JFormContainer.vue';
|
||||
import { IconPicker } from '/@/components/Icon/index';
|
||||
const props = defineProps({
|
||||
formDisabled: { type: Boolean, default: false },
|
||||
formData: { type: Object, default: () => ({})},
|
||||
|
|
@ -43,6 +49,7 @@
|
|||
id: '',
|
||||
categoryId: '',
|
||||
typeName: '',
|
||||
icon: '',
|
||||
});
|
||||
const { createMessage } = useMessage();
|
||||
const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 5 } });
|
||||
|
|
|
|||
Loading…
Reference in New Issue