修改样式
This commit is contained in:
parent
00aeef66db
commit
32b73f6e9d
|
|
@ -2,6 +2,7 @@
|
|||
<a-input
|
||||
:class="prefixCls"
|
||||
:value="currentSelect"
|
||||
v-model:value="formData.icon"
|
||||
readOnly
|
||||
:disabled="disabled"
|
||||
:placeholder="t('component.icon.placeholder')"
|
||||
|
|
|
|||
|
|
@ -9,12 +9,17 @@
|
|||
<a-form-item label="分类标签名称" v-bind="validateInfos.instructionName"
|
||||
id="ConfigServiceCategoryForm-instructionName" name="instructionName">
|
||||
<a-input v-model:value="formData.instructionName" placeholder="请输入分类标签名称" allow-clear :maxlength="10"
|
||||
:showCount="true"></a-input>
|
||||
:showCount="true" :disabled="titleDisabled"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="24" hidden>
|
||||
<a-form-item label="排序" v-bind="validateInfos.sort" id="ConfigServiceCategoryForm-sort" name="sort">
|
||||
<a-input-number v-model:value="formData.sort" placeholder="请输入排序" style="width: 100%" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<a-form-item label="排序" v-bind="validateInfos.sort" id="ConfigServiceCategoryForm-sort" name="sort">
|
||||
<a-input-number v-model:value="formData.sort" placeholder="请输入排序" style="width: 100%" />
|
||||
<a-form-item label="图标" v-bind="validateInfos.icon" id="ConfigServiceCategoryForm-icon" name="icon">
|
||||
<IconPicker v-model:value="formData.icon" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
|
|
@ -40,6 +45,8 @@ import { getValueType } from '/@/utils';
|
|||
import { saveOrUpdate } from '../InstructionTag.api';
|
||||
import { Form } from 'ant-design-vue';
|
||||
import JFormContainer from '/@/components/Form/src/container/JFormContainer.vue';
|
||||
import { Icon, IconPicker, SvgIcon } from '/@/components/Icon/index';
|
||||
import { b } from 'node_modules/vite/dist/node/moduleRunnerTransport.d-CXw_Ws6P';
|
||||
const props = defineProps({
|
||||
formDisabled: { type: Boolean, default: false },
|
||||
formData: { type: Object, default: () => ({}) },
|
||||
|
|
@ -48,11 +55,13 @@ const props = defineProps({
|
|||
const formRef = ref();
|
||||
const useForm = Form.useForm;
|
||||
const emit = defineEmits(['register', 'ok', 'refresh']);
|
||||
const titleDisabled = ref<boolean>(false);
|
||||
const formData = reactive<Record<string, any>>({
|
||||
id: '',
|
||||
instructionName: '',
|
||||
sort: 99,
|
||||
izEnabled: '0',
|
||||
icon:'',
|
||||
});
|
||||
const { createMessage } = useMessage();
|
||||
const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 5 } });
|
||||
|
|
@ -62,6 +71,7 @@ const confirmLoading = ref<boolean>(false);
|
|||
const validatorRules = reactive({
|
||||
instructionName: [{ required: true, message: '请输入分类标签名称!' },],
|
||||
sort: [{ required: true, message: '请输入排序!' }, { pattern: /^\d+$/, message: '请输入正整数!' },],
|
||||
icon: [{ required: true, message: '请选择图标!' }],
|
||||
izEnabled: [{ required: true, message: '请选择是否启用!' },],
|
||||
});
|
||||
const { resetFields, validate, validateInfos } = useForm(formData, validatorRules, { immediate: false });
|
||||
|
|
@ -90,6 +100,7 @@ function add() {
|
|||
* 编辑
|
||||
*/
|
||||
function edit(record) {
|
||||
console.log("🚀 ~ edit ~ record:", record)
|
||||
nextTick(() => {
|
||||
resetFields();
|
||||
const tmpData = {};
|
||||
|
|
@ -100,6 +111,13 @@ function edit(record) {
|
|||
})
|
||||
//赋值
|
||||
Object.assign(formData, tmpData);
|
||||
formData.instructionName = record.title;
|
||||
formData.id = record.key;
|
||||
if(record.title){
|
||||
titleDisabled.value = true;
|
||||
}else{
|
||||
titleDisabled.value = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -5,61 +5,12 @@
|
|||
<a-form ref="formRef" @keyup.enter.native="searchQuery" :model="queryParam" :label-col="labelCol"
|
||||
:wrapper-col="wrapperCol">
|
||||
<a-row :gutter="24">
|
||||
<!-- <a-col :lg="6">
|
||||
<a-form-item name="instructionTagId">
|
||||
<template #label><span title="分类标签">分类标签</span></template>
|
||||
<j-dict-select-tag v-model:value="queryParam.instructionTagId"
|
||||
:dictCode="`nu_config_service_instruction_tag,instruction_name,id,del_flag = 0 and iz_enabled = 0 order by sort asc`"
|
||||
placeholder="请选择分类标签" allowClear :ignoreDisabled="true" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
|
||||
<a-col :lg="6">
|
||||
<a-form-item name="categoryId">
|
||||
<template #label><span title="服务类别">服务类别</span></template>
|
||||
<j-dict-select-tag type="list" v-model:value="queryParam.categoryId"
|
||||
:dictCode="`nu_config_service_category,category_name,id,del_flag = 0 and iz_enabled = 0 and instruction_id = '${queryParam.instructionTagId || ''}' order by sort asc`"
|
||||
placeholder="请选择服务类别" allowClear :ignoreDisabled="true" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
|
||||
<a-col :lg="6">
|
||||
<a-form-item name="typeId">
|
||||
<template #label><span title="服务类型">服务类型</span></template>
|
||||
<j-dict-select-tag type="list" v-model:value="queryParam.typeId"
|
||||
:dictCode="`nu_config_service_type,type_name,id,del_flag = 0 and iz_enabled = 0 and category_id = '${queryParam.categoryId || ''}' order by sort asc`"
|
||||
placeholder="请选择服务类型" allowClear :ignoreDisabled="true" />
|
||||
</a-form-item>
|
||||
</a-col> -->
|
||||
<a-col :lg="6">
|
||||
<a-form-item name="directiveName">
|
||||
<template #label><span title="服务指令">服务指令</span></template>
|
||||
<JInput v-model:value="queryParam.directiveName" placeholder="请输入服务指令名称" allowClear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<!-- <a-col :lg="6">
|
||||
<a-form-item name="bodyTags">
|
||||
<template #label><span title="体型标签">体型标签</span></template>
|
||||
<j-dict-select-tag type='list' v-model:value="queryParam.bodyTags"
|
||||
:dictCode="`nu_config_body_tag,tag_name,id,del_flag = '0' and iz_enabled = 0 order by sort asc`"
|
||||
:ignoreDisabled="true" placeholder="请选择体型标签" allowClear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="6">
|
||||
<a-form-item name="emotionTags">
|
||||
<template #label><span title="情绪标签">情绪标签</span></template>
|
||||
<j-dict-select-tag type="list" v-model:value="queryParam.emotionTags"
|
||||
:dictCode="`nu_config_emotion_tag,tag_name,id,del_flag = '0' and iz_enabled = 0 order by sort asc`"
|
||||
:ignoreDisabled="true" placeholder="请选择情绪标签" allowClear />
|
||||
</a-form-item>
|
||||
</a-col> -->
|
||||
<!-- <a-col :lg="6">
|
||||
<a-form-item name="izEnabled">
|
||||
<template #label><span title="是否启用">是否启用</span></template>
|
||||
<j-dict-select-tag type='list' v-model:value="queryParam.izEnabled" dictCode="iz_enabled"
|
||||
:ignoreDisabled="true" placeholder="请选择是否启用" allowClear />
|
||||
</a-form-item>
|
||||
</a-col> -->
|
||||
<a-col :xl="6" :lg="7" :md="8" :sm="24">
|
||||
<span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
|
||||
<a-col :lg="6">
|
||||
|
|
@ -86,25 +37,233 @@
|
|||
style="width: 350px; height: 20vh; display: flex; justify-content: center; align-items: center;">
|
||||
<a-spin tip="加载中..."></a-spin>
|
||||
</div>
|
||||
|
||||
<a-empty v-if="!treeLoading && treeLoading" />
|
||||
<a-button v-if="!treeLoading && treeData.length < 1" type="link" class="btnPrivate" @click="addInstruction"
|
||||
preIcon="ant-design:plus-outlined">新增分类标签</a-button>
|
||||
<a-tree class="container-height" style="padding-top: 40px;" v-if="!treeLoading && treeData.length > 0"
|
||||
<a-menu
|
||||
v-model:selectedKeys="selectedKeys"
|
||||
style="width: 100%;margin-top: 50px;"
|
||||
mode="inline"
|
||||
:open-keys="openKeys"
|
||||
@openChange="onOpenChange"
|
||||
>
|
||||
<template v-for="item in treeData" >
|
||||
<!-- 第一层判断是否有下级 -->
|
||||
<a-sub-menu v-if="item.children && item.children.length > 0" :key="item.id" >
|
||||
<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' && item.level != 5" style="color:red;">(已停用)</span>
|
||||
<span v-show="item.showContent">
|
||||
<!-- 下拉菜单 -->
|
||||
<a-dropdown :open="menuState[item?.key]?.open" @openChange="onMenuOpenChange(item.key, $event)">
|
||||
<template #overlay>
|
||||
<a-menu>
|
||||
<a-menu-item v-for="itemMenu in menuItems(item)" :key="itemMenu.key" :disabled="!itemMenu.canAdd"
|
||||
class="nu-menu-item" @click="() => { closeAllMenus(); itemMenu.action(item) }">
|
||||
<Icon style="color:#1890FF;" :icon="itemMenu.icon" class="action-icon"></Icon>
|
||||
<span style=" color:#1890FF;margin-left: 5px;">{{ itemMenu.label }}</span>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
<!-- 图标 -->
|
||||
<Icon v-show="item.showContent" style="color:#1890FF;" :icon="iconClass(item.level)"
|
||||
class="action-icon" @mouseenter="onNodeIconEnter(item, item.children)"
|
||||
@mouseleave="onNodeIconLeave(item)" />
|
||||
</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="ant-design:border-verticle-outlined" :size="20" />
|
||||
</template> -->
|
||||
<template #title>
|
||||
<span @mouseenter="child.showContent = true" @mouseleave="child.showContent = false">{{ child?.title }}
|
||||
<span v-if="child?.izEnabled == '1' && child.level != 5" style="color:red;">(已停用)</span>
|
||||
<span v-show="child.showContent">
|
||||
<!-- 下拉菜单 -->
|
||||
<a-dropdown :open="menuState[child?.key]?.open" @openChange="onMenuOpenChange(child.key, $event)">
|
||||
<template #overlay>
|
||||
<a-menu>
|
||||
<a-menu-item v-for="itemMenu in menuItems(child)" :key="itemMenu.key" :disabled="!itemMenu.canAdd"
|
||||
class="nu-menu-item" @click="() => { closeAllMenus(); itemMenu.action(child) }">
|
||||
<Icon style="color:#1890FF;" :icon="itemMenu.icon" class="action-icon"></Icon>
|
||||
<span style=" color:#1890FF;margin-left: 5px;">{{ itemMenu.label }}</span>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
<!-- 图标 -->
|
||||
<Icon style="color:#1890FF;" :icon="iconClass(child.level)"
|
||||
class="action-icon" @mouseenter="onNodeIconEnter(child, child.children)"
|
||||
@mouseleave="onNodeIconLeave(child)" />
|
||||
</a-dropdown>
|
||||
</span>
|
||||
</span>
|
||||
</template>
|
||||
<!-- 第三层判断是否有下级 -->
|
||||
<template v-for="childThree in child.children">
|
||||
<a-sub-menu :key="childThree.key" v-if="childThree.children && childThree.children.length > 0" >
|
||||
<!-- <template #icon>
|
||||
<Icon icon="ant-design:border-bottom-outlined" :size="20" />
|
||||
</template> -->
|
||||
<template #title>
|
||||
<span @mouseenter="childThree.showContent = true" @mouseleave="childThree.showContent = false">{{ childThree?.title }}
|
||||
<span v-if="childThree?.izEnabled == '1' && childThree.level != 5" style="color:red;">(已停用)</span>
|
||||
<span v-show="childThree.showContent">
|
||||
<!-- 下拉菜单 -->
|
||||
<a-dropdown :open="menuState[childThree?.key]?.open" @openChange="onMenuOpenChange(childThree.key, $event)">
|
||||
<template #overlay>
|
||||
<a-menu>
|
||||
<a-menu-item v-for="itemMenu in menuItems(childThree)" :key="itemMenu.key" :disabled="!itemMenu.canAdd"
|
||||
class="nu-menu-item" @click="() => { closeAllMenus(); itemMenu.action(childThree) }">
|
||||
<Icon style="color:#1890FF;" :icon="itemMenu.icon" class="action-icon"></Icon>
|
||||
<span style=" color:#1890FF;margin-left: 5px;">{{ itemMenu.label }}</span>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
<!-- 图标 -->
|
||||
<Icon style="color:#1890FF;" :icon="iconClass(childThree.level)"
|
||||
class="action-icon" @mouseenter="onNodeIconEnter(childThree, childThree.children)"
|
||||
@mouseleave="onNodeIconLeave(childThree)" />
|
||||
</a-dropdown>
|
||||
</span>
|
||||
</span>
|
||||
</template>
|
||||
<!-- 第四层判断是否有下级 -->
|
||||
<a-menu-item :key="childFour.key" v-for="childFour in childThree.children" >
|
||||
<span @mouseenter="childFour.showContent = true" @mouseleave="childFour.showContent = false" class="auto-wrap">{{ childFour?.title + '(' + childFour?.cycleTypeName + ')'}}
|
||||
<span v-if="childFour?.izEnabled == '1' && childFour.level != 5" style="color:red;">(已停用)</span>
|
||||
<span v-show="childFour.showContent">
|
||||
<!-- 下拉菜单 -->
|
||||
<a-dropdown :open="menuState[childFour?.key]?.open" @openChange="onMenuOpenChange(childFour.key, $event)">
|
||||
<template #overlay>
|
||||
<a-menu>
|
||||
<a-menu-item v-for="itemMenu in menuItems(childFour)" :key="itemMenu.key" :disabled="!itemMenu.canAdd"
|
||||
class="nu-menu-item" @click="() => { closeAllMenus(); itemMenu.action(childFour) }">
|
||||
<Icon style="color:#1890FF;" :icon="itemMenu.icon" class="action-icon"></Icon>
|
||||
<span style=" color:#1890FF;margin-left: 5px;">{{ itemMenu.label }}</span>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
<!-- 图标 -->
|
||||
<Icon style="color:#1890FF;" :icon="iconClass(childFour.level)"
|
||||
class="action-icon" @mouseenter="onNodeIconEnter(childFour, childFour.children)"
|
||||
@mouseleave="onNodeIconLeave(childFour)" />
|
||||
</a-dropdown>
|
||||
</span>
|
||||
</span>
|
||||
</a-menu-item>
|
||||
</a-sub-menu>
|
||||
<a-menu-item :key="childThree.key" v-if="!childThree.children || childThree.children.length < 1">
|
||||
<!-- <template #icon>
|
||||
<Icon icon="ant-design:border-bottom-outlined" :size="20" />
|
||||
</template> -->
|
||||
<span @mouseenter="childThree.showContent = true" @mouseleave="childThree.showContent = false">{{ childThree?.title }}
|
||||
<span v-if="childThree?.izEnabled == '1' && childThree.level != 5" style="color:red;">(已停用)</span>
|
||||
<span v-show="childThree.showContent">
|
||||
<!-- 下拉菜单 -->
|
||||
<a-dropdown :open="menuState[childThree?.key]?.open" @openChange="onMenuOpenChange(childThree.key, $event)">
|
||||
<template #overlay>
|
||||
<a-menu>
|
||||
<a-menu-item v-for="itemMenu in menuItems(childThree)" :key="itemMenu.key" :disabled="!itemMenu.canAdd"
|
||||
class="nu-menu-item" @click="() => { closeAllMenus(); itemMenu.action(childThree) }">
|
||||
<Icon style="color:#1890FF;" :icon="itemMenu.icon" class="action-icon"></Icon>
|
||||
<span style=" color:#1890FF;margin-left: 5px;">{{ itemMenu.label }}</span>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
<!-- 图标 -->
|
||||
<Icon style="color:#1890FF;" :icon="iconClass(childThree.level)"
|
||||
class="action-icon" @mouseenter="onNodeIconEnter(childThree, childThree.children)"
|
||||
@mouseleave="onNodeIconLeave(childThree)" />
|
||||
</a-dropdown>
|
||||
</span>
|
||||
</span>
|
||||
</a-menu-item>
|
||||
</template>
|
||||
</a-sub-menu>
|
||||
<a-menu-item :key="child.key" v-if="!child.children || child.children.length < 1">
|
||||
<!-- <template #icon>
|
||||
<Icon icon="ant-design:border-verticle-outlined" :size="20" />
|
||||
</template> -->
|
||||
<span @mouseenter="child.showContent = true" @mouseleave="child.showContent = false">{{ child?.title }}
|
||||
<span v-if="child?.izEnabled == '1' && child.level != 5" style="color:red;">(已停用)</span>
|
||||
<span v-show="child.showContent">
|
||||
<!-- 下拉菜单 -->
|
||||
<a-dropdown :open="menuState[child?.key]?.open" @openChange="onMenuOpenChange(child.key, $event)">
|
||||
<template #overlay>
|
||||
<a-menu>
|
||||
<a-menu-item v-for="itemMenu in menuItems(child)" :key="itemMenu.key" :disabled="!itemMenu.canAdd"
|
||||
class="nu-menu-item" @click="() => { closeAllMenus(); itemMenu.action(child) }">
|
||||
<Icon style="color:#1890FF;" :icon="itemMenu.icon" class="action-icon"></Icon>
|
||||
<span style=" color:#1890FF;margin-left: 5px;">{{ itemMenu.label }}</span>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
<!-- 图标 -->
|
||||
<Icon style="color:#1890FF;" :icon="iconClass(child.level)"
|
||||
class="action-icon" @mouseenter="onNodeIconEnter(child, child.children)"
|
||||
@mouseleave="onNodeIconLeave(child)" />
|
||||
</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' && item.level != 5" style="color:red;">(已停用)</span>
|
||||
<span v-show="item.showContent">
|
||||
<!-- 下拉菜单 -->
|
||||
<a-dropdown :open="menuState[item?.key]?.open" @openChange="onMenuOpenChange(item.key, $event)">
|
||||
<template #overlay>
|
||||
<a-menu>
|
||||
<a-menu-item v-for="itemMenu in menuItems(item)" :key="itemMenu.key" :disabled="!itemMenu.canAdd"
|
||||
class="nu-menu-item" @click="() => { closeAllMenus(); itemMenu.action(item) }">
|
||||
<Icon style="color:#1890FF;" :icon="itemMenu.icon" class="action-icon"></Icon>
|
||||
<span style=" color:#1890FF;margin-left: 5px;">{{ itemMenu.label }}</span>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
<!-- 图标 -->
|
||||
<Icon v-show="item.showContent" style="color:#1890FF;" :icon="iconClass(item.level)"
|
||||
class="action-icon" @mouseenter="onNodeIconEnter(item, item.children)"
|
||||
@mouseleave="onNodeIconLeave(item)" />
|
||||
</a-dropdown>
|
||||
</span>
|
||||
</span>
|
||||
</a-menu-item>
|
||||
</template>
|
||||
|
||||
</a-menu>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- <a-tree class="container-height" style="padding-top: 40px;" v-if="!treeLoading && treeData.length > 0"
|
||||
:tree-data="treeData" v-model:expandedKeys="expandedKeys" expandAction="click" @select="handleTreeSelect">
|
||||
<template #title="{ data }">
|
||||
<!-- @click.stop="openMenu(data, data.children, $event)" -->
|
||||
<!-- @contextmenu.prevent="openMenu(data, data.children, $event)" -->
|
||||
<span class="node-title" @mouseenter="onNodeEnter(data, data.children, $event)"
|
||||
@mouseleave="onNodeLeave(data)">
|
||||
<!-- <div v-if="data.level == 5">
|
||||
<div><strong>体型标签：</strong>{{data?.bodyTagList?.map(tag => tag.tagName).join('、') || '-'}}</div>
|
||||
<div><strong>情绪标签：</strong>{{data?.emotionTagList?.map(tag => tag.tagName).join('、') || '-'}}</div>
|
||||
</div> -->
|
||||
<Icon icon="ant-design:appstore-add-outlined" :size="20" v-if="data.level == 1" style="margin-right: 5px;"/>
|
||||
<span v-if="data.level == 4">{{ data?.title + '(' + data?.cycleTypeName + ')' }}</span>
|
||||
<span v-else>{{ data?.title }}</span>
|
||||
<span v-if="data?.izEnabled == '1' && data.level != 5" style="color:red;">(已停用)</span>
|
||||
|
||||
<!-- 下拉菜单 -->
|
||||
<a-dropdown :open="menuState[data?.key]?.open" @openChange="onMenuOpenChange(data.key, $event)">
|
||||
<template #overlay>
|
||||
<a-menu>
|
||||
|
|
@ -115,14 +274,13 @@
|
|||
</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
<!-- 图标 -->
|
||||
<Icon v-show="data.showIcon && data.level != 5" style="color:#1890FF;" :icon="iconClass(data.level)"
|
||||
class="action-icon" @mouseenter="onNodeIconEnter(data, data.children)"
|
||||
@mouseleave="onNodeIconLeave(data)" />
|
||||
</a-dropdown>
|
||||
</span>
|
||||
</template>
|
||||
</a-tree>
|
||||
</a-tree> -->
|
||||
</div>
|
||||
<div style="width:calc(100% - 370px);float: left; background-color: white;" class="container-height">
|
||||
<!--引用表格-->
|
||||
|
|
@ -324,6 +482,8 @@ const registerModal = ref();
|
|||
const treeData = ref<any>([]);
|
||||
const userStore = useUserStore();
|
||||
const isShowDM = ref(false)//是否展示指令库功能
|
||||
const selectedKeys=ref<any>([]);
|
||||
const openKeys=ref<any>([]);
|
||||
//注册table数据
|
||||
const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
|
||||
tableProps: {
|
||||
|
|
@ -383,6 +543,16 @@ const emotionTagOpen = ref(false)//情绪标签抽屉
|
|||
const mainOrgCode = ref()//指令库编码
|
||||
const filterIzEnabled = ref('enabled')//筛选全部/已启用
|
||||
|
||||
function onOpenChange(record: string[]) {
|
||||
console.log("🚀 ~ onOpenChange ~ record:", record)
|
||||
selectedKeys.value = record
|
||||
// const latestOpenKey = record.find(key => state.openKeys.indexOf(key) === -1);
|
||||
// if (state.rootSubmenuKeys.indexOf(latestOpenKey!) === -1) {
|
||||
// state.openKeys = openKeys;
|
||||
// } else {
|
||||
// state.openKeys = latestOpenKey ? [latestOpenKey] : [];
|
||||
// }
|
||||
}
|
||||
/**
|
||||
* 高级查询事件
|
||||
*/
|
||||
|
|
@ -831,6 +1001,10 @@ function stopInstruction(data) {
|
|||
}
|
||||
});
|
||||
}
|
||||
function editInstruction(data) {
|
||||
insRegisterModal.value.disableSubmit = false;
|
||||
insRegisterModal.value.edit(data);
|
||||
}
|
||||
//新增服务类别
|
||||
function addCategory(data) {
|
||||
catRegisterModal.value.disableSubmit = false;
|
||||
|
|
@ -938,6 +1112,7 @@ function menuItems(data) {
|
|||
if (data.level === 1) {
|
||||
const items = [
|
||||
{ key: 'addIns', label: '新增分类标签', icon: 'ant-design:plus-outlined', canAdd: true, action: addInstruction },
|
||||
|
||||
]
|
||||
if (data.canAdd) {
|
||||
items.push({ key: 'addCat', label: '新增服务类别', icon: 'ant-design:plus-outlined', canAdd: data.canAdd, action: addCategory })
|
||||
|
|
@ -947,6 +1122,7 @@ function menuItems(data) {
|
|||
} else if (data.izEnabled === '0') {
|
||||
items.push({ key: 'stopIns', label: '停用分类标签', icon: 'ant-design:stop-outlined', canAdd: true, action: stopInstruction })
|
||||
}
|
||||
items.push({ key: 'editIns', label: '修改图标', icon: 'ant-design:edit-outlined', canAdd: true, action: editInstruction },)
|
||||
return items
|
||||
}
|
||||
else if (data.level === 2) {
|
||||
|
|
@ -1175,4 +1351,18 @@ audio::-webkit-media-controls-time-remaining-display {
|
|||
height: 81.5vh;
|
||||
}
|
||||
}
|
||||
:deep(.ant-menu-item-selected){
|
||||
color: #4b4b4b !important;
|
||||
}
|
||||
:deep(.ant-menu-submenu-title){
|
||||
color: #4b4b4b !important;
|
||||
}
|
||||
.auto-wrap {
|
||||
word-wrap: break-word; /* 长单词/URL换行 */
|
||||
word-break: break-all; /* 更激进的换行策略 */
|
||||
white-space: normal; /* 默认换行行为 */
|
||||
line-height: 20px !important;
|
||||
display: inline flow-root;
|
||||
padding-top: 10px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<a-spin :spinning="confirmLoading">
|
||||
<div style="padding: 14px; background-color: #fff;border-radius: 10px;box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);">
|
||||
<div style="padding: 14px;background-color: #fff;border-radius: 10px;box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);">
|
||||
<JFormContainer :disabled="disabled">
|
||||
<template #detail>
|
||||
<a-form ref="formRef" class="antd-modal-form" :labelCol="labelCol" :wrapperCol="wrapperCol" :colon="false"
|
||||
|
|
@ -73,82 +73,127 @@
|
|||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row style="margin-top: 20px;">
|
||||
<a-col :span="12" v-show="showMedia">
|
||||
<a-form-item label="服务指令图片" v-bind="validateInfos.previewFile">
|
||||
<span v-if="disabled && !formData.previewFile">暂无文件</span>
|
||||
<JImageUpload v-else-if="opeType == 'dmlook'" :fileMax="1"
|
||||
:value="mediaApiAddress + formData.previewFile">
|
||||
</JImageUpload>
|
||||
<JImageUpload v-else :fileMax="1" v-model:value="formData.previewFile"></JImageUpload>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="服务指令描述" v-bind="validateInfos.serviceContent"
|
||||
id="ConfigServiceDirectiveForm-serviceContent" name="serviceContent">
|
||||
<a-textarea v-model:value="formData.serviceContent" :autosize="true" placeholder="请输入服务指令描述"
|
||||
:maxlength="200" :showCount="true" />
|
||||
</a-form-item>
|
||||
<a-row style="padding: 20px;">
|
||||
<a-col :span="6">
|
||||
<DirectiveRadioCom :directiveMediaBtnValue="directiveMediaBtnValue" @change="mediaBtnChanged">
|
||||
</DirectiveRadioCom>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row v-show="!disabled && showMedia">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="指令音频文件" v-bind="validateInfos.mp3File" id="ConfigServiceDirectiveForm-mp3File">
|
||||
<j-upload v-model:value="formData.mp3File" accept=".mp3" :maxCount="1"
|
||||
:beforeUpload="checkMp3"></j-upload>
|
||||
</a-form-item>
|
||||
<a-row style="padding: 0px 20px;">
|
||||
<a-col :span="24" v-show="directiveMediaBtnValue == 0">
|
||||
<a-upload-dragger name="file" v-model:fileList="fileList" :multiple="false" :show-upload-list="false"
|
||||
:before-upload="beforeUpload" style="background-color: #F6FAFF;">
|
||||
<div class="upload-area">
|
||||
<p class="upload-text">点击或者拖拽上传</p>
|
||||
<div class="upload-icon">
|
||||
<img src="./pictype.png" alt="MP3 icon" style="width: 40px; height: 40px;" />
|
||||
</div>
|
||||
<p class="upload-hint">
|
||||
<span>文件大小不超过10MB</span>
|
||||
<span class="divider">|</span>
|
||||
<a-tooltip placement="top">
|
||||
<template #title>
|
||||
这里是格式说明的具体内容
|
||||
</template>
|
||||
<span>
|
||||
<QuestionCircleOutlined style="margin-right: 0px;" />
|
||||
格式说明
|
||||
</span>
|
||||
</a-tooltip>
|
||||
</p>
|
||||
</div>
|
||||
</a-upload-dragger>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="指令视频文件" v-bind="validateInfos.mp4File" id="ConfigServiceDirectiveForm-mp4File">
|
||||
<j-upload v-model:value="formData.mp4File" accept=".mp4" :maxCount="1"
|
||||
:beforeUpload="checkMp4"></j-upload>
|
||||
</a-form-item>
|
||||
<a-col :span="24" v-show="directiveMediaBtnValue == 1">
|
||||
<a-upload-dragger name="file" v-model:fileList="fileList" :multiple="false" :show-upload-list="false"
|
||||
:before-upload="beforeUpload" style="background-color: #F6FAFF;">
|
||||
<div class="upload-area">
|
||||
<p class="upload-text">点击或者拖拽上传</p>
|
||||
<div class="upload-icon">
|
||||
<img src="./mp3type.png" alt="MP3 icon" style="width: 40px; height: 40px;" />
|
||||
</div>
|
||||
<p class="upload-hint">
|
||||
<span>文件大小不超过10MB</span>
|
||||
<span class="divider">|</span>
|
||||
<a-tooltip placement="top">
|
||||
<template #title>
|
||||
这里是格式说明的具体内容
|
||||
</template>
|
||||
<span>
|
||||
<QuestionCircleOutlined style="margin-right: 0px;" />
|
||||
格式说明
|
||||
</span>
|
||||
</a-tooltip>
|
||||
</p>
|
||||
</div>
|
||||
</a-upload-dragger>
|
||||
</a-col>
|
||||
<a-col :span="24" v-show="directiveMediaBtnValue == 2">
|
||||
<a-upload-dragger name="file" v-model:fileList="fileList" :multiple="false" :show-upload-list="false"
|
||||
:before-upload="beforeUpload" style="background-color: #F6FAFF;">
|
||||
<div class="upload-area">
|
||||
<p class="upload-text">点击或者拖拽上传</p>
|
||||
<div class="upload-icon">
|
||||
<img src="./mp4type.png" alt="MP3 icon" style="width: 40px; height: 40px;" />
|
||||
</div>
|
||||
<p class="upload-hint">
|
||||
<span>文件大小不超过10MB</span>
|
||||
<span class="divider">|</span>
|
||||
<a-tooltip placement="top">
|
||||
<template #title>
|
||||
这里是格式说明的具体内容
|
||||
</template>
|
||||
<span>
|
||||
<QuestionCircleOutlined style="margin-right: 0px;" />
|
||||
格式说明
|
||||
</span>
|
||||
</a-tooltip>
|
||||
</p>
|
||||
</div>
|
||||
</a-upload-dragger>
|
||||
</a-col>
|
||||
<a-col :span="24" v-show="directiveMediaBtnValue == 3">
|
||||
<a-upload-dragger name="file" v-model:fileList="fileList" :multiple="false" :show-upload-list="false"
|
||||
:before-upload="beforeUpload" style="background-color: #F6FAFF;">
|
||||
<div class="upload-area">
|
||||
<p class="upload-text">点击或者拖拽上传</p>
|
||||
<div class="upload-icon">
|
||||
<img src="./pictype.png" alt="MP3 icon" style="width: 40px; height: 40px;" />
|
||||
</div>
|
||||
<p class="upload-hint">
|
||||
<span>文件大小不超过10MB</span>
|
||||
<span class="divider">|</span>
|
||||
<a-tooltip placement="top">
|
||||
<template #title>
|
||||
这里是格式说明的具体内容
|
||||
</template>
|
||||
<span>
|
||||
<QuestionCircleOutlined style="margin-right: 0px;" />
|
||||
格式说明
|
||||
</span>
|
||||
</a-tooltip>
|
||||
</p>
|
||||
</div>
|
||||
</a-upload-dragger>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</template>
|
||||
</JFormContainer>
|
||||
<JFormContainer style="margin-top: -40px;" v-show="showMedia">
|
||||
<template #detail>
|
||||
<a-form ref="formRef" class="antd-modal-form" :labelCol="labelCol" :wrapperCol="wrapperCol" :colon="false"
|
||||
name="ConfigServiceDirectiveForm">
|
||||
<a-row>
|
||||
<a-col :span="12" v-if="!!formData.mp3File">
|
||||
<a-form-item label="指令音频预览" id="ConfigServiceDirectiveForm-mp3File">
|
||||
<audio controls disabled="false">
|
||||
<source
|
||||
:src="opeType == 'dmlook' ? mediaApiAddress + formData.mp3File : getFileAccessHttpUrl(formData.mp3File)">
|
||||
</audio>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12" v-if="disabled && !formData.mp3File">
|
||||
<a-form-item label="指令音频预览">
|
||||
<span>暂无文件</span>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12" v-if="!!formData.mp4File" :push="!!formData.mp3File ? 0 : 12">
|
||||
<a-form-item label="指令视频预览" id="ConfigServiceDirectiveForm-mp4File">
|
||||
<video controls>
|
||||
<source
|
||||
:src="opeType == 'dmlook' ? mediaApiAddress + formData.mp4File : getFileAccessHttpUrl(formData.mp4File)">
|
||||
</video>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12" v-if="disabled && !formData.mp3File">
|
||||
<a-form-item label="指令视频预览">
|
||||
<span>暂无文件</span>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="即时指令图标" v-bind="validateInfos.immediateFile">
|
||||
<span v-if="disabled && !formData.immediateFile">暂无文件</span>
|
||||
<JImageUpload v-else-if="opeType == 'dmlook'" :fileMax="1"
|
||||
:value="mediaApiAddress + formData.immediateFile">
|
||||
</JImageUpload>
|
||||
<JImageUpload v-else :fileMax="1" v-model:value="formData.immediateFile"></JImageUpload>
|
||||
</a-form-item>
|
||||
<a-row style="padding: 20px;">
|
||||
<a-col :span="2">
|
||||
<div class="description-container">
|
||||
<a-button @click="toggleDescription">服务指令描述</a-button>
|
||||
<div v-show="showDescription" class="description-box">
|
||||
<div class="box-header">
|
||||
<span class="title">服务指令描述</span>
|
||||
<span class="collapse-icon" @click="toggleDescription">
|
||||
<DownOutlined style="margin-right: 3px;" />收起
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<a-textarea v-model:value="formData.serviceContent" placeholder="请输入服务指令描述" :maxlength="200"
|
||||
:rows="3" :autosize="{ minRows: 3 }" :showCount="true" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
|
|
|
|||
Loading…
Reference in New Issue