添加指令包功能
This commit is contained in:
parent
40d5dfbfcc
commit
d58a778106
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
|
|
@ -0,0 +1,79 @@
|
|||
import { defHttp } from '/@/utils/http/axios';
|
||||
import { useMessage } from "/@/hooks/web/useMessage";
|
||||
|
||||
const { createConfirm } = useMessage();
|
||||
|
||||
enum Api {
|
||||
list = '/services/directivePackage/directivePackage/list',
|
||||
queryById = '/services/directivePackage/directivePackage/queryById',
|
||||
save='/services/directivePackage/directivePackage/add',
|
||||
edit='/services/directivePackage/directivePackage/edit',
|
||||
deleteOne = '/services/directivePackage/directivePackage/delete',
|
||||
deleteBatch = '/services/directivePackage/directivePackage/deleteBatch',
|
||||
importExcel = '/services/directivePackage/directivePackage/importExcel',
|
||||
exportXls = '/services/directivePackage/directivePackage/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 });
|
||||
|
||||
/**
|
||||
* 详情接口
|
||||
* @param params
|
||||
*/
|
||||
export const queryById = (params) => defHttp.get({ url: Api.queryById, params });
|
||||
|
||||
/**
|
||||
* 删除单个
|
||||
* @param params
|
||||
* @param handleSuccess
|
||||
*/
|
||||
export const deleteOne = (params,handleSuccess) => {
|
||||
return defHttp.delete({url: Api.deleteOne, params}, {joinParamsToUrl: true}).then(() => {
|
||||
handleSuccess();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 批量删除
|
||||
* @param params
|
||||
* @param handleSuccess
|
||||
*/
|
||||
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
|
||||
* @param isUpdate
|
||||
*/
|
||||
export const saveOrUpdate = (params, isUpdate) => {
|
||||
let url = isUpdate ? Api.edit : Api.save;
|
||||
return defHttp.post({ url: url, params }, { isTransformResponse: false });
|
||||
}
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
import {BasicColumn} from '/@/components/Table';
|
||||
//列表数据
|
||||
export const columns: BasicColumn[] = [
|
||||
{
|
||||
title: '服务指令包名称',
|
||||
align: "center",
|
||||
dataIndex: 'packageName'
|
||||
},
|
||||
{
|
||||
title: '备注',
|
||||
align: "center",
|
||||
dataIndex: 'description'
|
||||
},
|
||||
{
|
||||
title: '排序',
|
||||
align: "center",
|
||||
dataIndex: 'sort'
|
||||
},
|
||||
{
|
||||
title: '是否启用',
|
||||
align: "center",
|
||||
dataIndex: 'izEnabled_dictText'
|
||||
},
|
||||
];
|
||||
|
||||
// 高级查询数据
|
||||
export const superQuerySchema = {
|
||||
packageName: {title: '服务指令包名称',order: 0,view: 'text', type: 'string',},
|
||||
description: {title: '备注',order: 1,view: 'textarea', type: 'string',},
|
||||
sort: {title: '排序',order: 2,view: 'number', type: 'number',},
|
||||
izEnabled: {title: '是否启用',order: 3,view: 'radio', type: 'string',dictCode: 'iz_enabled',},
|
||||
};
|
||||
|
|
@ -0,0 +1,220 @@
|
|||
<template>
|
||||
<div class="p-2">
|
||||
<!--查询区域-->
|
||||
<div class="jeecg-basic-table-form-container">
|
||||
<a-form ref="formRef" :model="searchForm" :label-col="labelCol" :wrapper-col="wrapperCol">
|
||||
<a-row :gutter="24">
|
||||
<a-col :lg="6">
|
||||
<a-form-item name="packageName">
|
||||
<template #label><span title="服务指令包名称">服务指令包</span></template>
|
||||
<a-input v-model:value="searchForm.packageName" allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="6" :sm="24">
|
||||
<span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
|
||||
<a-col :lg="6">
|
||||
<a-button type="primary" preIcon="ant-design:search-outlined" @click="searchQuery">查询</a-button>
|
||||
<a-button type="primary" preIcon="ant-design:reload-outlined" @click="searchReset"
|
||||
style="margin-left: 8px">重置</a-button>
|
||||
<a-button type="primary" preIcon="ant-design:plus-outlined" @click="handleAdd"
|
||||
style="margin-left: 8px">新增</a-button>
|
||||
</a-col>
|
||||
</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</div>
|
||||
<a-row>
|
||||
<a-col :span="6" v-for="directive of tableData.records" :key="directive.id" style="padding: 5px 10px 0 0;height: 220px;">
|
||||
<a-row style="padding: 5px;background-color: white;border-radius: 8px;height: 200px;">
|
||||
<a-col :span="4">
|
||||
<div class="bjclass">
|
||||
<img src="/src/assets/images/logo.png" style="width: 40px;height:40px;margin-top: 10px;" />
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="20" style="padding: 15px;">
|
||||
<div>
|
||||
<span class="titleOne">{{ directive.packageName }}</span>
|
||||
</div>
|
||||
<div style="height: 100px">
|
||||
<span class="ellipsis-two-lines" :title="directive.description">{{ directive.description }}</span>
|
||||
</div>
|
||||
<div style="color: #857f7f;">
|
||||
<span style="float:left;"><Icon icon="ant-design:user-add-outlined" :size="18" /><span style="margin-left:5px;">{{ directive.createBy_dictText }}</span></span>
|
||||
<span style="margin-left: 15px;float:left;"><Icon icon="ant-design:field-time-outlined" :size="20" /><span style="margin-left:5px;font-size:16px;">{{ directive.createTime.substring(0,10) }}</span></span>
|
||||
<span style="float:right;">
|
||||
<a-dropdown :trigger="['hover']" placement="topRight">
|
||||
<a-button type="link"><Icon icon="ant-design:more-outlined" :size="20" /></a-button>
|
||||
<template #overlay>
|
||||
<a-menu>
|
||||
<a-menu-item @click="packageEdit(directive)">
|
||||
<template #icon></template>
|
||||
编辑
|
||||
</a-menu-item>
|
||||
<a-menu-item>
|
||||
<a-popconfirm title="是否确认删除？" ok-text="确认" cancel-text="取消" @confirm="remove(directive)">
|
||||
删除
|
||||
</a-popconfirm>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
</span>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<div
|
||||
style="float:right;bottom: 20px;z-index: 999;padding: 8px 16px;border-radius: 4px;display: flex;align-items: center;">
|
||||
<span style="margin-right: 10px;">共 {{ tableData.total }} 条数据</span>
|
||||
<Pagination showLessItems v-model:current="pageParams.pageNo" :pageSize="pageParams.pageSize" size="small"
|
||||
show-quick-jumper :total="tableData.total" @change="queryList" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- 表单区域 -->
|
||||
<DirectivePackageModal ref="registerModal" @success="handleSuccess"></DirectivePackageModal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" name="directivePackage-directivePackage" setup>
|
||||
import { ref, reactive, onMounted } from 'vue';
|
||||
import DirectivePackageModal from './components/DirectivePackageModal.vue'
|
||||
import { list, queryById, deleteOne } from './DirectivePackage.api'
|
||||
import { Pagination } from 'ant-design-vue';
|
||||
|
||||
const registerModal = ref();
|
||||
const searchForm = ref({})
|
||||
const tableData = ref({})
|
||||
const labelCol = reactive({
|
||||
xs:24,
|
||||
sm:6,
|
||||
xl:6,
|
||||
xxl:6
|
||||
});
|
||||
const wrapperCol = reactive({
|
||||
xs: 24,
|
||||
sm: 24,
|
||||
});
|
||||
const pageParams = ref({ pageNo: 1, pageSize: 12 })
|
||||
// function onShowSizeChange (current, pageSize) {
|
||||
// pageParams.value.pageSize = pageSize
|
||||
// console.log(current, pageSize);
|
||||
// };
|
||||
/**
|
||||
* 搜索
|
||||
*/
|
||||
function searchQuery() {
|
||||
pageParams.value.pageNo = 1
|
||||
queryList()
|
||||
}
|
||||
|
||||
/**
|
||||
* 重置
|
||||
*/
|
||||
function searchReset() {
|
||||
searchForm.value = {}
|
||||
pageParams.value.pageNo = 1
|
||||
queryList()
|
||||
}
|
||||
|
||||
/**
|
||||
* 新增
|
||||
*/
|
||||
function handleAdd() {
|
||||
registerModal.value.disableSubmit = false;
|
||||
registerModal.value.add();
|
||||
}
|
||||
/**
|
||||
* 成功回调
|
||||
*/
|
||||
function handleSuccess() {
|
||||
queryList()
|
||||
}
|
||||
|
||||
/**
|
||||
* 数据查询
|
||||
*/
|
||||
function queryList() {
|
||||
list({ pageNo: pageParams.value.pageNo, pageSize: pageParams.value.pageSize, packageName: searchForm.value.packageName }).then(res => {
|
||||
tableData.value = res
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 编辑
|
||||
* @param data
|
||||
*/
|
||||
function packageEdit(data) {
|
||||
queryById({ id: data.id }).then(item => {
|
||||
registerModal.value.edit(item);
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 移除
|
||||
* @param data
|
||||
*/
|
||||
function remove(data) {
|
||||
deleteOne({ id: data.id }, handleSuccess())
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
queryList()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.jeecg-basic-table-form-container {
|
||||
padding: 0;
|
||||
|
||||
.table-page-search-submitButtons {
|
||||
display: block;
|
||||
margin-bottom: 24px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.query-group-cust {
|
||||
min-width: 100px !important;
|
||||
}
|
||||
|
||||
.query-group-split-cust {
|
||||
width: 30px;
|
||||
display: inline-block;
|
||||
text-align: center
|
||||
}
|
||||
|
||||
.ant-form-item:not(.ant-form-item-with-help) {
|
||||
margin-bottom: 16px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
:deep(.ant-picker),
|
||||
:deep(.ant-input-number) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.bjclass{
|
||||
text-align: center;
|
||||
margin-top: 24px;
|
||||
border-radius: 50%;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background: linear-gradient(to bottom, #fff, #efe9e9);
|
||||
margin-left: 9px;
|
||||
}
|
||||
.titleOne {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.ellipsis-two-lines {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 3; /* 限制文本为2行 */
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
line-height:24px;color: #5a5a5a;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,257 @@
|
|||
<template>
|
||||
<div class="p-2">
|
||||
<!--查询区域-->
|
||||
<div class="jeecg-basic-table-form-container">
|
||||
<a-form ref="formRef" :model="searchForm" :label-col="labelCol" :wrapper-col="wrapperCol">
|
||||
<a-row :gutter="24">
|
||||
<a-col :lg="6">
|
||||
<a-form-item name="packageName">
|
||||
<template #label><span title="服务指令包名称">服务指令包</span></template>
|
||||
<a-input v-model:value="searchForm.packageName" allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="6" :sm="24">
|
||||
<span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
|
||||
<a-col :lg="6">
|
||||
<a-button type="primary" preIcon="ant-design:search-outlined" @click="searchQuery">查询</a-button>
|
||||
<a-button type="primary" preIcon="ant-design:reload-outlined" @click="searchReset"
|
||||
style="margin-left: 8px">重置</a-button>
|
||||
<a-button type="primary" preIcon="ant-design:plus-outlined" @click="handleAdd"
|
||||
style="margin-left: 8px">新增</a-button>
|
||||
</a-col>
|
||||
</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</div>
|
||||
<a-row>
|
||||
<a-col v-for="directive of tableData.records" :key="directive.id" :xs="24" :sm="24" :md="12" :lg="12" :xl="8" :xxl="4" style="padding: 5px 10px 0 0;height: 200px;">
|
||||
<a-row class="cardDivClass">
|
||||
<a-col :span="24">
|
||||
<a-row style="padding: 10px">
|
||||
<a-col :span="12">
|
||||
<img src="/src/assets/images/logo.png" style="width: 25px;height:25px;" />
|
||||
</a-col>
|
||||
<a-col :span="12" style="text-align: right;position:relative;">
|
||||
<div class="iconEditClass">
|
||||
<a @click="packageEdit(directive)"> <img src="/src/assets/iot/a4.png" style="width: 15px;height:15px;margin-top:-3px" /></a>
|
||||
</div>
|
||||
<span>
|
||||
<a-switch :checked="directive.izEnabled == '0'" @change="handleChangeIzEnabled(directive)" checked-children="启" un-checked-children="停" />
|
||||
</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<span class="titleOne ellipsis-two-lines" style="font-size: 20px;">
|
||||
{{ getHHMM(directive.startTimeStr) }}
|
||||
~
|
||||
{{ getHHMM(directive.endTimeStr) }}
|
||||
</span>
|
||||
</a-col>
|
||||
<a-col :span="24" >
|
||||
<a-popover :title="directive.packageName">
|
||||
<template #content>
|
||||
<div style="min-width: 240px;">
|
||||
<div style="max-width: 400px;line-height:30px;padding:5px;border-radius:5px;margin:5px;background:#f5f5f5;" v-for="(item,index) in directive.directives">{{ item.directiveName }}</div>
|
||||
<div style="max-width: 400px;line-height:30px;padding:5px;border-radius:5px;margin:5px;background:#f5f5f5;color:red;" v-if="directive.directives.length==0">未配置</div>
|
||||
</div>
|
||||
</template>
|
||||
<span class="titleOne ellipsis-two-lines">{{ directive.packageName }}</span>
|
||||
</a-popover>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<a-divider style="margin: 10px 0 5px 0;"/>
|
||||
</a-col>
|
||||
<a-col :span="12" style="padding: 0px 10px">
|
||||
{{ directive.createBy_dictText }}
|
||||
</a-col>
|
||||
<a-col :span="12" style="text-align: right;padding: 0px 10px;">
|
||||
{{ directive.createTime.substring(0,10) }}
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<div
|
||||
style="float:right;bottom: 20px;z-index: 999;padding: 8px 16px;border-radius: 4px;display: flex;align-items: center;">
|
||||
<span style="margin-right: 10px;">共 {{ tableData.total }} 条数据</span>
|
||||
<Pagination showLessItems v-model:current="pageParams.pageNo" :pageSize="pageParams.pageSize" size="small"
|
||||
show-quick-jumper :total="tableData.total" @change="queryList" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- 表单区域 -->
|
||||
<DirectivePackageModal ref="registerModal" @success="handleSuccess"></DirectivePackageModal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" name="directivePackage-directivePackage" setup>
|
||||
import { ref, reactive, onMounted } from 'vue';
|
||||
import DirectivePackageModal from './components/DirectivePackageModal.vue'
|
||||
import { list, queryById, deleteOne } from './DirectivePackage.api'
|
||||
import { Pagination } from 'ant-design-vue';
|
||||
import { defHttp } from '/@/utils/http/axios';
|
||||
import dayjs from "dayjs";
|
||||
|
||||
const registerModal = ref();
|
||||
const searchForm = ref({})
|
||||
const tableData = ref({})
|
||||
const labelCol = reactive({
|
||||
xs:24,
|
||||
sm:6,
|
||||
xl:6,
|
||||
xxl:6
|
||||
});
|
||||
const wrapperCol = reactive({
|
||||
xs: 24,
|
||||
sm: 24,
|
||||
});
|
||||
const pageParams = ref({ pageNo: 1, pageSize: 18 })
|
||||
|
||||
//启用停用
|
||||
function handleChangeIzEnabled(record){
|
||||
var izEnabled = record.izEnabled == '0' ? '1' : '0';
|
||||
var params = {id:record.id,izEnabled};
|
||||
defHttp.post({ url: '/services/directivePackage/directivePackage/edit', params }).then((res) => {
|
||||
searchQuery()
|
||||
});
|
||||
}
|
||||
|
||||
function getHHMM(value){
|
||||
if(value){
|
||||
return dayjs(value).format('HH:mm')
|
||||
}else{
|
||||
return '未配置'
|
||||
}
|
||||
}
|
||||
/**
|
||||
* 搜索
|
||||
*/
|
||||
function searchQuery() {
|
||||
pageParams.value.pageNo = 1
|
||||
queryList()
|
||||
}
|
||||
|
||||
/**
|
||||
* 重置
|
||||
*/
|
||||
function searchReset() {
|
||||
searchForm.value = {}
|
||||
pageParams.value.pageNo = 1
|
||||
queryList()
|
||||
}
|
||||
|
||||
/**
|
||||
* 新增
|
||||
*/
|
||||
function handleAdd() {
|
||||
registerModal.value.disableSubmit = false;
|
||||
registerModal.value.add();
|
||||
}
|
||||
/**
|
||||
* 成功回调
|
||||
*/
|
||||
function handleSuccess() {
|
||||
queryList()
|
||||
}
|
||||
|
||||
/**
|
||||
* 数据查询
|
||||
*/
|
||||
function queryList() {
|
||||
list({ pageNo: pageParams.value.pageNo, pageSize: pageParams.value.pageSize, packageName: searchForm.value.packageName }).then(res => {
|
||||
tableData.value = res
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 编辑
|
||||
* @param data
|
||||
*/
|
||||
function packageEdit(data) {
|
||||
queryById({ id: data.id }).then(item => {
|
||||
registerModal.value.edit(item);
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 移除
|
||||
* @param data
|
||||
*/
|
||||
function remove(data) {
|
||||
deleteOne({ id: data.id }, handleSuccess())
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
queryList()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.jeecg-basic-table-form-container {
|
||||
padding: 0;
|
||||
|
||||
.table-page-search-submitButtons {
|
||||
display: block;
|
||||
margin-bottom: 24px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.query-group-cust {
|
||||
min-width: 100px !important;
|
||||
}
|
||||
|
||||
.query-group-split-cust {
|
||||
width: 30px;
|
||||
display: inline-block;
|
||||
text-align: center
|
||||
}
|
||||
|
||||
.ant-form-item:not(.ant-form-item-with-help) {
|
||||
margin-bottom: 16px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
:deep(.ant-picker),
|
||||
:deep(.ant-input-number) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.bjclass{
|
||||
text-align: center;
|
||||
margin-top: 24px;
|
||||
border-radius: 50%;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background: linear-gradient(to bottom, #fff, #efe9e9);
|
||||
margin-left: 9px;
|
||||
}
|
||||
.titleOne {
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.ellipsis-two-lines {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 1; /* 限制文本为2行 */
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.cardDivClass{
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
padding: 5px;background-color: white;border-radius: 8px;height: 180px;
|
||||
box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.cardDivClass:hover{
|
||||
padding: 5px;background-color: #f4fcff;border-radius: 8px;height: 180px;
|
||||
box-shadow:
|
||||
0 0 0 1px #59bffe, /* 描边 */
|
||||
0 4px 8px rgba(0, 0, 0, 0.1); /* 阴影 */
|
||||
transform: translate(-2px , -2px); /* 轻微上浮效果 */
|
||||
}
|
||||
|
||||
.iconEditClass{
|
||||
position:absolute;top:0;right:54px;background: #dfdfdf;border-radius:50%;width: 25px;height: 25px;display:flex;justify-content: center;align-items: center;align-items: center;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
import { defHttp } from '/@/utils/http/axios';
|
||||
import { useMessage } from "/@/hooks/web/useMessage";
|
||||
|
||||
const { createConfirm } = useMessage();
|
||||
|
||||
enum Api {
|
||||
list = '/services/serviceDirective/list',
|
||||
save='/services/serviceDirective/add',
|
||||
edit='/services/serviceDirective/edit',
|
||||
deleteOne = '/services/serviceDirective/delete',
|
||||
deleteBatch = '/services/serviceDirective/deleteBatch',
|
||||
importExcel = '/services/serviceDirective/importExcel',
|
||||
exportXls = '/services/serviceDirective/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 });
|
||||
|
||||
/**
|
||||
* 删除单个
|
||||
* @param params
|
||||
* @param handleSuccess
|
||||
*/
|
||||
export const deleteOne = (params,handleSuccess) => {
|
||||
return defHttp.delete({url: Api.deleteOne, params}, {joinParamsToUrl: true}).then(() => {
|
||||
handleSuccess();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 批量删除
|
||||
* @param params
|
||||
* @param handleSuccess
|
||||
*/
|
||||
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
|
||||
* @param isUpdate
|
||||
*/
|
||||
export const saveOrUpdate = (params, isUpdate) => {
|
||||
let url = isUpdate ? Api.edit : Api.save;
|
||||
return defHttp.post({ url: url, params }, { isTransformResponse: false });
|
||||
}
|
||||
|
|
@ -0,0 +1,124 @@
|
|||
import { BasicColumn } from '/@/components/Table';
|
||||
//列表数据
|
||||
export const columns: BasicColumn[] = [
|
||||
{
|
||||
title: '分类标签',
|
||||
align: 'center',
|
||||
dataIndex: 'instructionTagId_dictText',
|
||||
},
|
||||
{
|
||||
title: '服务类别',
|
||||
align: 'center',
|
||||
dataIndex: 'categoryId_dictText',
|
||||
},
|
||||
{
|
||||
title: '服务类型',
|
||||
align: 'center',
|
||||
dataIndex: 'typeId_dictText',
|
||||
},
|
||||
{
|
||||
title: '服务指令名称',
|
||||
align: 'center',
|
||||
dataIndex: 'directiveName',
|
||||
},
|
||||
{
|
||||
title: '体型标签',
|
||||
align: 'center',
|
||||
dataIndex: 'bodyTagList',
|
||||
ellipsis: false,
|
||||
format(text, record, index) {
|
||||
if (!!text) {
|
||||
return text.map((item) => item.tagName).join('、');
|
||||
} else {
|
||||
return '-';
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '情绪标签',
|
||||
align: 'center',
|
||||
dataIndex: 'emotionTagList',
|
||||
ellipsis: false,
|
||||
format(text, record, index) {
|
||||
if (!!text) {
|
||||
return text.map((item) => item.tagName).join('、');
|
||||
} else {
|
||||
return '-';
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '周期类型',
|
||||
align: 'center',
|
||||
dataIndex: 'cycleType_dictText',
|
||||
},
|
||||
];
|
||||
|
||||
export const selectedColumns: BasicColumn[] = [
|
||||
{
|
||||
title: '序号',
|
||||
dataIndex: 'index',
|
||||
key: 'index',
|
||||
width: 60,
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '分类标签',
|
||||
align: 'center',
|
||||
dataIndex: 'instructionTagName',
|
||||
},
|
||||
{
|
||||
title: '服务类别',
|
||||
align: 'center',
|
||||
dataIndex: 'categoryName',
|
||||
},
|
||||
{
|
||||
title: '服务类型',
|
||||
align: 'center',
|
||||
dataIndex: 'typeName',
|
||||
},
|
||||
{
|
||||
title: '服务指令名称',
|
||||
align: 'center',
|
||||
dataIndex: 'directiveName',
|
||||
},
|
||||
{
|
||||
title: '指令标签',
|
||||
align: 'center',
|
||||
dataIndex: 'bodyTagList',
|
||||
ellipsis: false,
|
||||
format(text, record, index) {
|
||||
if (!!text) {
|
||||
return text.map((item) => item.tagName).join('、');
|
||||
} else {
|
||||
return '-';
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '指令标签',
|
||||
align: 'center',
|
||||
dataIndex: 'emotionTagList',
|
||||
ellipsis: false,
|
||||
format(text, record, index) {
|
||||
if (!!text) {
|
||||
return text.map((item) => item.tagName).join('、');
|
||||
} else {
|
||||
return '-';
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '周期类型',
|
||||
align: 'center',
|
||||
dataIndex: 'cycleType',
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
slots: { customRender: 'action' },
|
||||
fixed: 'right', // 如果需要固定在右侧
|
||||
align: 'center',
|
||||
width: 100,
|
||||
},
|
||||
];
|
||||
|
|
@ -0,0 +1,354 @@
|
|||
<template>
|
||||
<a-spin :spinning="confirmLoading">
|
||||
<JFormContainer :disabled="disabled">
|
||||
<template #detail>
|
||||
<a-form ref="formRef" class="antd-modal-form" :labelCol="labelCol" :wrapperCol="wrapperCol"
|
||||
name="ConfigServiceDirectiveForm">
|
||||
<a-row>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="服务类别" v-bind="validateInfos.categoryId" id="ConfigServiceDirectiveForm-categoryId"
|
||||
name="categoryId">
|
||||
<j-dict-select-tag type="list" v-model:value="formData.categoryId"
|
||||
:dictCode="`nu_config_service_category,category_name,id,del_flag = 0 order by sort asc`"
|
||||
placeholder="请选择服务类别" allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="服务类型" v-bind="validateInfos.typeId" id="ConfigServiceDirectiveForm-typeId"
|
||||
name="typeId">
|
||||
<j-dict-select-tag type="list" v-model:value="formData.typeId" :dictCode="typeDictCode"
|
||||
placeholder="请选择服务类型" allowClear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="分类标签" v-bind="validateInfos.instructionTagId"
|
||||
id="ConfigServiceDirectiveForm-instructionTagId" name="instructionTagId">
|
||||
<j-dict-select-tag v-model:value="formData.instructionTagId" dictCode="instruction_tag"
|
||||
placeholder="请选择分类标签" allowClear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="服务指令名称" v-bind="validateInfos.directiveName"
|
||||
id="ConfigServiceDirectiveForm-directiveName" name="directiveName">
|
||||
<a-input v-model:value="formData.directiveName" placeholder="请输入服务指令名称" allow-clear></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="收费价格(元)" v-bind="validateInfos.tollPrice" id="ConfigServiceDirectiveForm-tollPrice"
|
||||
name="tollPrice">
|
||||
<a-input-number v-model:value="formData.tollPrice" placeholder="请输入收费价格" style="width: 100%"
|
||||
precision="4" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="提成价格(元)" v-bind="validateInfos.comPrice" id="ConfigServiceDirectiveForm-comPrice"
|
||||
name="comPrice">
|
||||
<a-input-number v-model:value="formData.comPrice" placeholder="请输入提成价格" style="width: 100%"
|
||||
precision="4" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="医保报销" v-bind="validateInfos.izReimbursement"
|
||||
id="ConfigServiceDirectiveForm-izReimbursement" name="izReimbursement">
|
||||
<j-dict-select-tag type='radio' v-model:value="formData.izReimbursement" dictCode="med_ins_reimb"
|
||||
allowClear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="机构优惠" v-bind="validateInfos.izPreferential"
|
||||
id="ConfigServiceDirectiveForm-izPreferential" name="izPreferential">
|
||||
<j-dict-select-tag type='radio' v-model:value="formData.izPreferential"
|
||||
dictCode="institutional_discount" allowClear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="收费频次" v-bind="validateInfos.chargingFrequency"
|
||||
id="ConfigServiceDirectiveForm-chargingFrequency" name="chargingFrequency">
|
||||
<j-dict-select-tag type="list" v-model:value="formData.chargingFrequency" dictCode="billing_frequency"
|
||||
placeholder="请选择收费频次" allowClear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="周期类型" v-bind="validateInfos.cycleType" id="ConfigServiceDirectiveForm-cycleType"
|
||||
name="cycleType">
|
||||
<j-dict-select-tag type="list" v-model:value="formData.cycleType" dictCode="period_type"
|
||||
placeholder="请选择周期类型" allowClear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="服务时长（分钟）" v-bind="validateInfos.serviceDuration"
|
||||
id="ConfigServiceDirectiveForm-serviceDuration" name="serviceDuration">
|
||||
<a-input-number v-model:value="formData.serviceDuration" :min="5" :max="55" :step="5"
|
||||
placeholder="请输入服务时长（分钟）" allow-clear />
|
||||
</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" :rows="2" placeholder="请输入服务说明" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-col :span="24">
|
||||
<a-form-item label="指令标签" id="ConfigServiceDirectiveForm-typeId" :labelCol="labelCol2"
|
||||
:wrapperCol="wrapperCol2" name="typeId">
|
||||
<JCheckbox v-model:value="formData.tags"
|
||||
:dictCode="`nu_config_directive_tag,tag_name,id,del_flag = 0 order by sort asc`" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="是否启用" v-bind="validateInfos.izEnabled" id="ConfigServiceDirectiveForm-izEnabled"
|
||||
name="izEnabled">
|
||||
<j-dict-select-tag type='radio' v-model:value="formData.izEnabled" dictCode="iz_enabled"
|
||||
placeholder="请选择是否启用" allowClear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="语音文件" v-bind="validateInfos.mp3File" id="ConfigServiceDirectiveForm-mp3File"
|
||||
name="mp3File">
|
||||
<j-upload v-model:value="formData.mp3File" accept=".mp3" :maxCount="1"></j-upload>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="视频文件" v-bind="validateInfos.mp4File" id="ConfigServiceDirectiveForm-mp4File"
|
||||
name="mp4File">
|
||||
<j-upload v-model:value="formData.mp4File" accept=".mp4" :maxCount="1"></j-upload>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</template>
|
||||
</JFormContainer>
|
||||
<JFormContainer>
|
||||
<template #detail>
|
||||
<a-form ref="formRef" class="antd-modal-form" :labelCol="labelCol" :wrapperCol="wrapperCol"
|
||||
name="ConfigServiceDirectiveForm">
|
||||
<a-row>
|
||||
<a-col :span="12" v-if="!!formData.mp3File">
|
||||
<a-form-item label="语音预览" id="ConfigServiceDirectiveForm-mp3File" name="mp3File">
|
||||
<audio controls disabled="false">
|
||||
<source :src="getFileAccessHttpUrl(formData.mp3File)">
|
||||
</audio>
|
||||
</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" name="mp4File">
|
||||
<video controls>
|
||||
<source :src="getFileAccessHttpUrl(formData.mp4File)">
|
||||
</video>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</template>
|
||||
</JFormContainer>
|
||||
</a-spin>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, defineExpose, nextTick, defineProps, computed, onMounted, watch } from 'vue';
|
||||
import { defHttp } from '/@/utils/http/axios';
|
||||
import { useMessage } from '/@/hooks/web/useMessage';
|
||||
import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
|
||||
import { JCheckbox } from '/@/components/Form';
|
||||
import JUpload from '/@/components/Form/src/jeecg/components/JUpload/JUpload.vue';
|
||||
import { getValueType } from '/@/utils';
|
||||
import { saveOrUpdate } from './ConfigServiceDirective.api';
|
||||
import { Form } from 'ant-design-vue';
|
||||
import JFormContainer from '/@/components/Form/src/container/JFormContainer.vue';
|
||||
import { getFileAccessHttpUrl } from '/@/utils/common/compUtils';
|
||||
const props = defineProps({
|
||||
formDisabled: { type: Boolean, default: false },
|
||||
formData: { type: Object, default: () => ({}) },
|
||||
formBpm: { type: Boolean, default: true }
|
||||
});
|
||||
const formRef = ref();
|
||||
const useForm = Form.useForm;
|
||||
const emit = defineEmits(['register', 'ok']);
|
||||
const formData = reactive<Record<string, any>>({
|
||||
id: '',
|
||||
categoryId: '',
|
||||
typeId: '',
|
||||
instructionTagId: '',
|
||||
directiveName: '',
|
||||
tollPrice: 0,
|
||||
comPrice: 0,
|
||||
izReimbursement: '0',
|
||||
izPreferential: '0',
|
||||
chargingFrequency: '',
|
||||
cycleType: '',
|
||||
sort: 99,
|
||||
serviceContent: '',
|
||||
serviceDuration: '5',
|
||||
izEnabled: '0',
|
||||
createBy: '',
|
||||
createTime: '',
|
||||
updateBy: '',
|
||||
updateTime: '',
|
||||
mp3File: '',
|
||||
mp4File: '',
|
||||
});
|
||||
const { createMessage } = useMessage();
|
||||
const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 6 } });
|
||||
const wrapperCol = ref<any>({ xs: { span: 24 }, sm: { span: 16 } });
|
||||
const labelCol2 = ref<any>({ xs: { span: 24 }, sm: { span: 3 } });
|
||||
const wrapperCol2 = ref<any>({ xs: { span: 24 }, sm: { span: 20 } });
|
||||
const confirmLoading = ref<boolean>(false);
|
||||
//表单验证
|
||||
const validatorRules = reactive({
|
||||
categoryId: [{ required: true, message: '请选择服务类别!' },],
|
||||
typeId: [{ required: true, message: '请选择服务类型!' },],
|
||||
instructionTagId: [{ required: true, message: '请选择分类标签!' },],
|
||||
directiveName: [{ required: true, message: '请输入服务指令名称!' },],
|
||||
tollPrice: [{ required: true, message: '请输入收费价格!' }, { pattern: /^(([0-9]*)|([0]\.\d{0,4}|[1-9][0-9]*\.\d{0,4}))$/, message: '请输入正确的金额!' },],
|
||||
comPrice: [{ required: false }, { pattern: /^(([0-9]*)|([0]\.\d{0,4}|[1-9][0-9]*\.\d{0,4}))$/, message: '请输入正确的金额!' },],
|
||||
izReimbursement: [{ required: true, message: '请选择是否参与医保报销!' },],
|
||||
izPreferential: [{ required: true, message: '请选择是否参与机构优惠!' },],
|
||||
// chargingFrequency: [{ required: true, message: '请选择收费频次!' },],
|
||||
cycleType: [{ required: true, message: '请选择周期类型!' },],
|
||||
// sort: [{ required: true, message: '请输入排序!' }, { pattern: /^\d+$/, message: '请输入正整数!' },],
|
||||
serviceDuration: [
|
||||
{ required: true, message: '请输入服务时长（分钟）!' },
|
||||
{ pattern: /^\d+$/, message: '请输入正整数!' },
|
||||
{
|
||||
validator: (_, value) => {
|
||||
if (value % 5 !== 0) {
|
||||
return Promise.reject('请输入5的倍数!');
|
||||
}
|
||||
return Promise.resolve();
|
||||
},
|
||||
},
|
||||
{
|
||||
validator: (_, value) => {
|
||||
if (value < 5 || value > 55) {
|
||||
return Promise.reject('请输入5到55之间的值!');
|
||||
}
|
||||
return Promise.resolve();
|
||||
},
|
||||
},
|
||||
],
|
||||
izEnabled: [{ required: true, message: '请选择是否启用!' },],
|
||||
});
|
||||
const { resetFields, validate, validateInfos } = useForm(formData, validatorRules, { immediate: false });
|
||||
// 表单禁用
|
||||
const disabled = computed(() => {
|
||||
if (props.formBpm === true) {
|
||||
if (props.formData.disabled === false) {
|
||||
return false;
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return props.formDisabled;
|
||||
});
|
||||
const typeDictCode = ref('')
|
||||
|
||||
watch(
|
||||
() => formData.categoryId,
|
||||
(newCategoryId) => {
|
||||
if (!newCategoryId) {
|
||||
formData.typeId = '';
|
||||
typeDictCode.value = 'nu_config_service_type,type_name,id,del_flag = 99 order by sort asc';
|
||||
} else {
|
||||
typeDictCode.value = `nu_config_service_type,type_name,id,del_flag = 0 and category_id = '${newCategoryId}' order by sort asc`;
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
/**
|
||||
* 新增
|
||||
*/
|
||||
function add() {
|
||||
edit({});
|
||||
}
|
||||
|
||||
/**
|
||||
* 编辑
|
||||
*/
|
||||
function edit(record) {
|
||||
formData.tags = ''
|
||||
nextTick(() => {
|
||||
resetFields();
|
||||
const tmpData = {};
|
||||
Object.keys(formData).forEach((key) => {
|
||||
if (record.hasOwnProperty(key)) {
|
||||
tmpData[key] = record[key]
|
||||
}
|
||||
})
|
||||
//赋值
|
||||
Object.assign(formData, tmpData);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 提交数据
|
||||
*/
|
||||
async function submitForm() {
|
||||
try {
|
||||
// 触发表单验证
|
||||
await validate();
|
||||
} catch ({ errorFields }) {
|
||||
if (errorFields) {
|
||||
const firstField = errorFields[0];
|
||||
if (firstField) {
|
||||
formRef.value.scrollToField(firstField.name, { behavior: 'smooth', block: 'center' });
|
||||
}
|
||||
}
|
||||
return Promise.reject(errorFields);
|
||||
}
|
||||
confirmLoading.value = true;
|
||||
const isUpdate = ref<boolean>(false);
|
||||
//时间格式化
|
||||
let model = formData;
|
||||
if (model.id) {
|
||||
isUpdate.value = true;
|
||||
}
|
||||
//循环数据
|
||||
for (let data in model) {
|
||||
//如果该数据是数组并且是字符串类型
|
||||
if (model[data] instanceof Array) {
|
||||
let valueType = getValueType(formRef.value.getProps, data);
|
||||
//如果是字符串类型的需要变成以逗号分割的字符串
|
||||
if (valueType === 'string') {
|
||||
model[data] = model[data].join(',');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//提成价格不能高于收费价格
|
||||
if (model.tollPrice <= model.comPrice) {
|
||||
createMessage.warning('提成价格不能高于收费价格！');
|
||||
confirmLoading.value = false;
|
||||
retrun;
|
||||
}
|
||||
|
||||
await saveOrUpdate(model, isUpdate.value)
|
||||
.then((res) => {
|
||||
if (res.success) {
|
||||
createMessage.success(res.message);
|
||||
emit('ok');
|
||||
} else {
|
||||
createMessage.warning(res.message);
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
confirmLoading.value = false;
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
defineExpose({
|
||||
add,
|
||||
edit,
|
||||
submitForm,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.antd-modal-form {
|
||||
padding: 14px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,313 @@
|
|||
<template>
|
||||
<div class="p-2">
|
||||
<!--查询区域-->
|
||||
<div class="jeecg-basic-table-form-container">
|
||||
<a-form ref="formRef" @keyup.enter.native="searchQuery" :model="queryParam" :label-col="labelCol"
|
||||
:wrapper-col="wrapperCol">
|
||||
<a-row :gutter="24">
|
||||
<a-col :lg="4">
|
||||
<a-form-item name="categoryId">
|
||||
<template #label><span title="服务类别">分类标签</span></template>
|
||||
<j-dict-select-tag type="list" 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`"
|
||||
:ignoreDisabled="true" placeholder="请选择服务类别" allow-clear :disabled="queryParam.instructionTagId" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="4">
|
||||
<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 order by sort asc`"
|
||||
:ignoreDisabled="true" placeholder="请选择服务类别" allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="4">
|
||||
<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 category_id = ${queryParam.categoryId || -1} order by sort asc`" placeholder="请选择服务类型"
|
||||
:ignoreDisabled="true" allowClear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="4">
|
||||
<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 :xl="4" :lg="7" :md="8" :sm="24">
|
||||
<span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
|
||||
<a-col :lg="6">
|
||||
<a-button type="primary" preIcon="ant-design:search-outlined" @click="searchQuery">查询</a-button>
|
||||
<a-button type="primary" preIcon="ant-design:reload-outlined" @click="searchReset"
|
||||
style="margin-left: 8px">重置</a-button>
|
||||
</a-col>
|
||||
</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</div>
|
||||
<!--引用表格-->
|
||||
<BasicTable @register="registerTable" :scroll="{ x: '100%', y: '32vh' }">
|
||||
<!--插槽:table标题-->
|
||||
<template #tableTitle>
|
||||
</template>
|
||||
<!--操作栏-->
|
||||
<template #action="{ record }">
|
||||
<TableAction :actions="getTableAction(record)" :dropDownActions="getDropDownAction(record)" />
|
||||
</template>
|
||||
<template v-slot:bodyCell="{ column, record, index, text }">
|
||||
</template>
|
||||
</BasicTable>
|
||||
<a-table :columns="selectedColumns" :data-source="directiveList" :scroll="{ x: '100%', y: '32vh' }"
|
||||
:pagination="false" size="small">
|
||||
<template v-slot:bodyCell="{ column, record, index, text }">
|
||||
<span v-if="column.dataIndex === 'index'">
|
||||
{{ parseInt(index) + 1 }}
|
||||
</span>
|
||||
<span v-if="column.dataIndex === 'instructionTagName'">
|
||||
{{ text || record.instructionTagId_dictText }}
|
||||
</span>
|
||||
<span v-if="column.dataIndex === 'categoryName'">
|
||||
{{ text || record.categoryId_dictText }}
|
||||
</span>
|
||||
<span v-if="column.dataIndex === 'typeName'">
|
||||
{{ text || record.typeId_dictText }}
|
||||
</span>
|
||||
<span v-if="column.dataIndex === 'bodyTagList'">
|
||||
{{ handleTags('', text, '') }}
|
||||
</span>
|
||||
<span v-if="column.dataIndex === 'emotionTagList'">
|
||||
{{ handleTags('', text, '') }}
|
||||
</span>
|
||||
<span v-if="column.dataIndex === 'cycleType'">
|
||||
{{ filterDictTextByCache('period_type', text) }}
|
||||
</span>
|
||||
</template>
|
||||
<template #action="{ record }">
|
||||
<a @click="removeDirective(record.id)">移除</a>
|
||||
</template>
|
||||
</a-table>
|
||||
<div style="text-align: right;margin-top: 10px;margin-right: 10px;">
|
||||
共 {{ directiveList.length }} 条记录
|
||||
</div>
|
||||
|
||||
<!-- 表单区域 -->
|
||||
<ConfigServiceDirectiveModal ref="registerModal" @success="handleSuccess"></ConfigServiceDirectiveModal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" name="serviceDirective-configServiceDirective" setup>
|
||||
import { ref, reactive, computed, defineExpose } from 'vue';
|
||||
import { BasicTable, useTable, TableAction } from '/@/components/Table';
|
||||
import { useListPage } from '/@/hooks/system/useListPage';
|
||||
import { columns, selectedColumns } from './ConfigServiceDirective.data';
|
||||
import { list, deleteOne, batchDelete, getImportUrl, getExportUrl } from './ConfigServiceDirective.api';
|
||||
import JInput from "/@/components/Form/src/jeecg/components/JInput.vue";
|
||||
import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
|
||||
import { cloneDeep } from "lodash-es";
|
||||
import ConfigServiceDirectiveModal from './ConfigServiceDirectiveModal.vue'
|
||||
import { filterDictTextByCache } from '/@/utils/dict/JDictSelectUtil';
|
||||
|
||||
const emit = defineEmits(['deleteDirective', 'addDirective']);
|
||||
const formRef = ref();
|
||||
const queryParam = reactive<any>({});
|
||||
const registerModal = ref();
|
||||
const directiveInfo = ref<any>({});
|
||||
//注册table数据
|
||||
const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
|
||||
tableProps: {
|
||||
title: '服务指令',
|
||||
api: list,
|
||||
columns,
|
||||
size: 'small',
|
||||
canResize: false,
|
||||
useSearchForm: false,
|
||||
showIndexColumn: true,
|
||||
showTableSetting: false,
|
||||
actionColumn: {
|
||||
width: 90,
|
||||
fixed: 'center',
|
||||
},
|
||||
beforeFetch: async (params) => {
|
||||
params.column = 'createTime'
|
||||
params.order = 'desc'
|
||||
let rangerQuery = await setRangeQuery();
|
||||
return Object.assign(params, rangerQuery);
|
||||
},
|
||||
},
|
||||
});
|
||||
const [registerTable, { reload, collapseAll, updateTableDataRecord, findTableDataRecord, getDataSource }, { rowSelection, selectedRowKeys }] = tableContext;
|
||||
const props = defineProps({
|
||||
directiveList: [],
|
||||
});
|
||||
|
||||
const labelCol = reactive({
|
||||
xs: 24,
|
||||
sm: 8,
|
||||
xl: 8,
|
||||
xxl: 8
|
||||
});
|
||||
const wrapperCol = reactive({
|
||||
xs: 24,
|
||||
sm: 16,
|
||||
});
|
||||
|
||||
/**
|
||||
* 成功回调
|
||||
*/
|
||||
function handleSuccess() {
|
||||
(selectedRowKeys.value = []) && reload();
|
||||
}
|
||||
|
||||
function getInstructionName(record){
|
||||
console.log("🚀 ~ getInstructionName ~ record:", record)
|
||||
return "";
|
||||
}
|
||||
|
||||
/**
|
||||
* 选择
|
||||
* @param directive_
|
||||
*/
|
||||
function handleSelect(directive_) {
|
||||
console.log("🚀 ~ handleSelect ~ directive_:", directive_)
|
||||
queryParam.instructionTagId =directive_.instructionTagId
|
||||
reload();
|
||||
emit('addDirective', directive_)
|
||||
}
|
||||
|
||||
/**
|
||||
* 操作栏
|
||||
*/
|
||||
function getTableAction(record) {
|
||||
return [
|
||||
{
|
||||
label: '选择',
|
||||
onClick: handleSelect.bind(null, record),
|
||||
}
|
||||
];
|
||||
}
|
||||
|
||||
/**
|
||||
* 下拉操作栏
|
||||
*/
|
||||
function getDropDownAction(record) {
|
||||
return [
|
||||
|
||||
]
|
||||
}
|
||||
|
||||
/**
|
||||
* 查询
|
||||
*/
|
||||
function searchQuery() {
|
||||
reload();
|
||||
}
|
||||
|
||||
/**
|
||||
* 重置
|
||||
*/
|
||||
function searchReset() {
|
||||
formRef.value.resetFields();
|
||||
selectedRowKeys.value = [];
|
||||
//刷新数据
|
||||
reload();
|
||||
}
|
||||
|
||||
let rangeField = 'tollPrice,comPrice,'
|
||||
|
||||
/**
|
||||
* 设置范围查询条件
|
||||
*/
|
||||
async function setRangeQuery() {
|
||||
let queryParamClone = cloneDeep(queryParam);
|
||||
if (rangeField) {
|
||||
let fieldsValue = rangeField.split(',');
|
||||
fieldsValue.forEach(item => {
|
||||
if (queryParamClone[item]) {
|
||||
let range = queryParamClone[item];
|
||||
queryParamClone[item + '_begin'] = range[0];
|
||||
queryParamClone[item + '_end'] = range[1];
|
||||
delete queryParamClone[item];
|
||||
} else {
|
||||
queryParamClone[item + '_begin'] = '';
|
||||
queryParamClone[item + '_end'] = '';
|
||||
}
|
||||
})
|
||||
}
|
||||
return queryParamClone;
|
||||
}
|
||||
|
||||
/**
|
||||
* 移除
|
||||
* @param directiveId
|
||||
*/
|
||||
function removeDirective(directiveId) {
|
||||
emit('deleteDirective', directiveId)
|
||||
}
|
||||
|
||||
/**
|
||||
* 处理服务指令标签翻译
|
||||
*/
|
||||
function handleTags(prefix, tagList, suffix) {
|
||||
if (!!tagList && tagList.length > 0) {
|
||||
let str = tagList.map(item => item.tagName).join('、 ');
|
||||
return prefix + str + suffix
|
||||
} else {
|
||||
return ' - '
|
||||
}
|
||||
}
|
||||
function edit(record) {
|
||||
console.log("🚀 ~ edit ~ record:", record)
|
||||
directiveInfo.value = record
|
||||
console.log("🚀 ~ edit ~ directiveInfo:", directiveInfo)
|
||||
queryParam.instructionTagId = record.instructionTagId
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
edit
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.jeecg-basic-table-form-container {
|
||||
padding: 0;
|
||||
|
||||
.table-page-search-submitButtons {
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.query-group-cust {
|
||||
min-width: 100px !important;
|
||||
}
|
||||
|
||||
.query-group-split-cust {
|
||||
width: 30px;
|
||||
display: inline-block;
|
||||
text-align: center
|
||||
}
|
||||
|
||||
.ant-form-item:not(.ant-form-item-with-help) {
|
||||
height: 0px;
|
||||
}
|
||||
|
||||
:deep(.ant-picker),
|
||||
:deep(.ant-input-number) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
audio::-webkit-media-controls-timeline {
|
||||
display: none;
|
||||
}
|
||||
|
||||
audio::-webkit-media-controls-current-time-display,
|
||||
audio::-webkit-media-controls-time-remaining-display {
|
||||
display: none;
|
||||
}
|
||||
|
||||
:deep(.ant-table-title) {
|
||||
display: none !important;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,81 @@
|
|||
<template>
|
||||
<j-modal :title="title" width="70vw" :visible="visible" @ok="handleOk"
|
||||
:okButtonProps="{ class: { 'jee-hidden': disableSubmit } }" @cancel="handleCancel" cancelText="关闭"
|
||||
:maskClosable="false">
|
||||
<ConfigServiceDirectiveForm ref="registerForm" v-if="visible" @ok="submitCallback" :formDisabled="disableSubmit"
|
||||
:formBpm="false"></ConfigServiceDirectiveForm>
|
||||
</j-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, nextTick, defineExpose } from 'vue';
|
||||
import ConfigServiceDirectiveForm from './ConfigServiceDirectiveForm.vue'
|
||||
import JModal from '/@/components/Modal/src/JModal/JModal.vue';
|
||||
import { array } from 'vue-types';
|
||||
|
||||
const title = ref<string>('');
|
||||
const visible = ref<boolean>(false);
|
||||
const disableSubmit = ref<boolean>(false);
|
||||
const registerForm = ref();
|
||||
const emit = defineEmits(['register', 'success']);
|
||||
|
||||
|
||||
/**
|
||||
* 新增
|
||||
*/
|
||||
function add() {
|
||||
title.value = '新增';
|
||||
visible.value = true;
|
||||
nextTick(() => {
|
||||
registerForm.value.add();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 编辑
|
||||
* @param record
|
||||
*/
|
||||
function edit(record) {
|
||||
title.value = disableSubmit.value ? '详情' : '编辑';
|
||||
visible.value = true;
|
||||
nextTick(() => {
|
||||
registerForm.value.edit(record);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 确定按钮点击事件
|
||||
*/
|
||||
function handleOk() {
|
||||
registerForm.value.submitForm();
|
||||
}
|
||||
|
||||
/**
|
||||
* form保存回调事件
|
||||
*/
|
||||
function submitCallback() {
|
||||
handleCancel();
|
||||
emit('success');
|
||||
}
|
||||
|
||||
/**
|
||||
* 取消按钮回调事件
|
||||
*/
|
||||
function handleCancel() {
|
||||
visible.value = false;
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
add,
|
||||
edit,
|
||||
disableSubmit,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
/**隐藏样式-modal确定按钮 */
|
||||
.jee-hidden {
|
||||
display: none !important;
|
||||
}
|
||||
</style>
|
||||
<style lang="less" scoped></style>
|
||||
|
|
@ -0,0 +1,216 @@
|
|||
<template>
|
||||
<a-spin :spinning="confirmLoading">
|
||||
<JFormContainer :disabled="disabled">
|
||||
<template #detail>
|
||||
<a-form ref="formRef" class="antd-modal-form" :labelCol="labelCol" :wrapperCol="wrapperCol"
|
||||
name="DirectivePackageForm">
|
||||
<a-row>
|
||||
<a-col :span="8">
|
||||
<a-form-item label="包名称" v-bind="validateInfos.packageName" id="DirectivePackageForm-packageName" name="packageName">
|
||||
<a-input v-model:value="formData.packageName" placeholder="请输入服务指令包名称" allow-clear></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="6">
|
||||
<a-form-item label="是否启用" v-bind="validateInfos.izEnabled" id="DirectivePackageForm-izEnabled"
|
||||
name="izEnabled">
|
||||
<j-dict-select-tag type='radio' v-model:value="formData.izEnabled" dictCode="iz_enabled"
|
||||
placeholder="是否启用" allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="10">
|
||||
<a-form-item label="时间" v-bind="validateInfos.startTimeStr" id="DirectivePackageForm-startTimeStr"
|
||||
name="startTimeStr">
|
||||
<a-time-picker v-model:value="formData.startTimeStr" format="HH:mm" />
|
||||
-
|
||||
<a-time-picker v-model:value="formData.endTimeStr" format="HH:mm" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<a-form-item label="说明" v-bind="validateInfos.description" id="DirectivePackageForm-description"
|
||||
name="description" :labelCol="labelCol2" :wrapperCol="wrapperCol2">
|
||||
<a-textarea v-model:value="formData.description" :rows="1" placeholder="请输入说明" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</template>
|
||||
</JFormContainer>
|
||||
</a-spin>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, defineExpose, nextTick, defineProps, computed, onMounted } from 'vue';
|
||||
import { defHttp } from '/@/utils/http/axios';
|
||||
import { useMessage } from '/@/hooks/web/useMessage';
|
||||
import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
|
||||
import { getValueType } from '/@/utils';
|
||||
import { saveOrUpdate } from '../DirectivePackage.api';
|
||||
import { Form } from 'ant-design-vue';
|
||||
import dayjs from "dayjs";
|
||||
import JFormContainer from '/@/components/Form/src/container/JFormContainer.vue';
|
||||
const props = defineProps({
|
||||
formDisabled: { type: Boolean, default: false },
|
||||
formData: { type: Object, default: () => ({}) },
|
||||
formBpm: { type: Boolean, default: true }
|
||||
});
|
||||
const formRef = ref();
|
||||
const useForm = Form.useForm;
|
||||
const emit = defineEmits(['register', 'ok']);
|
||||
const formData = reactive<Record<string, any>>({
|
||||
id: '',
|
||||
packageName: '',
|
||||
description: '',
|
||||
sort: 99,
|
||||
izEnabled: '0',
|
||||
startTimeStr: '',
|
||||
endTimeStr: '',
|
||||
instructionTagId: '',
|
||||
});
|
||||
const { createMessage } = useMessage();
|
||||
const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 6 } });
|
||||
const wrapperCol = ref<any>({ xs: { span: 24 }, sm: { span: 16 } });
|
||||
const labelCol2 = ref<any>({ xs: { span: 24 }, sm: { span: 2 } });
|
||||
const wrapperCol2 = ref<any>({ xs: { span: 24 }, sm: { span: 21 } });
|
||||
const confirmLoading = ref<boolean>(false);
|
||||
//表单验证
|
||||
const validatorRules = reactive({
|
||||
// packageName: [{ required: true, message: '请输入服务指令包名称!' },],
|
||||
// sort: [{ required: true, message: '请输入排序!' }, { pattern: /^\d+$/, message: '请输入整数!' },],
|
||||
});
|
||||
const { resetFields, validate, validateInfos } = useForm(formData, validatorRules, { immediate: false });
|
||||
|
||||
// 表单禁用
|
||||
const disabled = computed(() => {
|
||||
if (props.formBpm === true) {
|
||||
if (props.formData.disabled === false) {
|
||||
return false;
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return props.formDisabled;
|
||||
});
|
||||
|
||||
|
||||
/**
|
||||
* 新增
|
||||
*/
|
||||
function add() {
|
||||
edit({});
|
||||
}
|
||||
|
||||
/**
|
||||
* 编辑
|
||||
*/
|
||||
function edit(record) {
|
||||
nextTick(() => {
|
||||
resetFields();
|
||||
const tmpData = {};
|
||||
Object.keys(formData).forEach((key) => {
|
||||
if (record.hasOwnProperty(key)) {
|
||||
tmpData[key] = record[key]
|
||||
}
|
||||
})
|
||||
console.log("🚀 ~ nextTick ~ tmpData:", tmpData)
|
||||
//赋值
|
||||
Object.assign(formData, tmpData);
|
||||
|
||||
if(formData.startTimeStr){
|
||||
formData.startTimeStr = dayjs(formData.startTimeStr,"YYYY-MM-DD hh:mm:ss")
|
||||
}
|
||||
if(formData.endTimeStr){
|
||||
formData.endTimeStr = dayjs(formData.endTimeStr,"YYYY-MM-DD hh:mm:ss")
|
||||
}
|
||||
console.log("🚀 ~ nextTick ~ formData:", formData)
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 提交数据
|
||||
*/
|
||||
async function submitForm(directives) {
|
||||
try {
|
||||
// 触发表单验证
|
||||
await validate();
|
||||
} catch ({ errorFields }) {
|
||||
if (errorFields) {
|
||||
const firstField = errorFields[0];
|
||||
if (firstField) {
|
||||
formRef.value.scrollToField(firstField.name, { behavior: 'smooth', block: 'center' });
|
||||
}
|
||||
}
|
||||
return Promise.reject(errorFields);
|
||||
}
|
||||
confirmLoading.value = true;
|
||||
const isUpdate = ref<boolean>(false);
|
||||
//时间格式化
|
||||
let model = formData;
|
||||
if (model.id) {
|
||||
isUpdate.value = true;
|
||||
}
|
||||
//循环数据
|
||||
for (let data in model) {
|
||||
//如果该数据是数组并且是字符串类型
|
||||
if (model[data] instanceof Array) {
|
||||
let valueType = getValueType(formRef.value.getProps, data);
|
||||
//如果是字符串类型的需要变成以逗号分割的字符串
|
||||
if (valueType === 'string') {
|
||||
model[data] = model[data].join(',');
|
||||
}
|
||||
}
|
||||
}
|
||||
if (directives.length > 0) {
|
||||
model.directives = directives
|
||||
}
|
||||
if(!model.packageName){
|
||||
createMessage.warning('请填写服务指令包名称');
|
||||
confirmLoading.value = false;
|
||||
return;
|
||||
}
|
||||
if(!model.startTimeStr){
|
||||
createMessage.warning('请选择开始时间');
|
||||
confirmLoading.value = false;
|
||||
return;
|
||||
}
|
||||
if(!model.endTimeStr){
|
||||
createMessage.warning('请选择结束时间');
|
||||
confirmLoading.value = false;
|
||||
return;
|
||||
}
|
||||
var directivesList = model.directives;
|
||||
if(directivesList.length == 0){
|
||||
createMessage.warning('请选择服务指令');
|
||||
confirmLoading.value = false;
|
||||
return;
|
||||
}else{
|
||||
model.instructionTagId = directivesList[0].instructionTagId;
|
||||
}
|
||||
console.log('model', model);
|
||||
// confirmLoading.value = false;
|
||||
await saveOrUpdate(model, isUpdate.value)
|
||||
.then((res) => {
|
||||
if (res.success) {
|
||||
createMessage.success(res.message);
|
||||
emit('ok');
|
||||
} else {
|
||||
createMessage.warning(res.message);
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
confirmLoading.value = false;
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
defineExpose({
|
||||
add,
|
||||
edit,
|
||||
submitForm,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.antd-modal-form {
|
||||
padding: 14px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,351 @@
|
|||
<template>
|
||||
<!-- <j-modal :title="title" :width="width" :maskClosable="false" :fullscreen="true" :visible="visible" @ok="handleOk" :okButtonProps="{ class: { 'jee-hidden': disableSubmit } }" @cancel="handleCancel" cancelText="关闭">
|
||||
<DirectivePackageForm ref="registerForm" @ok="submitCallback" :formDisabled="disableSubmit" :formBpm="false"></DirectivePackageForm>
|
||||
</j-modal> -->
|
||||
<a-drawer v-model:open="visible" v-if="visible" :title="title" width="80vw" :closable="false"
|
||||
:footer-style="{ textAlign: 'right' }" @close="handleCancel">
|
||||
<div style="display:flex;justify-content:space-between">
|
||||
|
||||
<div style="background-color: #fafafa;border-radius: 8px;padding: 10px;width: 25vw">
|
||||
<div style="font-size: 18px;font-weight:700;padding: 15px">服务指令包详情</div>
|
||||
<DirectivePackageForm ref="registerForm" @ok="submitCallback" :formDisabled="disableSubmit" :formBpm="false">
|
||||
</DirectivePackageForm>
|
||||
</div>
|
||||
|
||||
<div style="background-color: #fafafa;border-radius: 8px;padding: 10px;width: 25vw;height: 80vh;overflow:auto;">
|
||||
<div style="padding: 15px;height: 30px;width:100%;">
|
||||
<a-row>
|
||||
<a-col :span="12">
|
||||
<span style="font-size: 18px;font-weight:700;">服务指令</span>
|
||||
</a-col>
|
||||
<a-col :span="12" style="text-align: right;">
|
||||
<span style="color: #777;">
|
||||
<Icon icon="ant-design:reconciliation-outlined" /><a href="javascript:void(0);" @click="handleQuoteDirectives" style="color: #777;">引用 </a>
|
||||
</span>
|
||||
<span style="color: #777;margin-left: 10px;">
|
||||
<Icon icon="ant-design:file-add-outlined" /><a href="javascript:void(0);" @click="handleAddDirectives" style="color: #777;">新增</a>
|
||||
</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
<div style="margin-top: 15px;">
|
||||
<a-row>
|
||||
<a-col :span="22" :push="1" v-for="directive of seletedRecord.directives" :key="directive.id"
|
||||
style="margin-top: 15px;border-radius: 8px;" @click="directiveInfo(directive)" :class="{ 'selected': selectedDirective === directive.id }">
|
||||
<a-card size="small">
|
||||
<div >
|
||||
<a-row :span="24">
|
||||
<a-col :span="12" >
|
||||
<span style="background-color: #67b4eb;border-radius: 50%;padding: 3px;color: white;width:27px;display: block;text-align: center;" v-if="selectedDirective === directive.id">
|
||||
<a-popconfirm title="是否确认移除？" ok-text="确认" cancel-text="取消"
|
||||
@confirm="deleteDirective(directive.id)">
|
||||
<Icon icon="ant-design:delete-outlined" size="18"/>
|
||||
</a-popconfirm>
|
||||
</span>
|
||||
</a-col>
|
||||
<a-col :span="12" style="text-align: right;">
|
||||
<span v-if="directive.cycleType=='1'" style="background-color: #1c9ef9;border-radius: 0 15px 15px 15px;padding: 5px 10px;color:white;">{{filterDictTextByCache('period_type', directive.cycleType)}}</span>
|
||||
<span v-if="directive.cycleType=='2'" style="background-color: #7a5ffd;border-radius: 0 15px 15px 15px;padding: 5px 10px;color:white;">{{filterDictTextByCache('period_type', directive.cycleType)}}</span>
|
||||
<span v-if="directive.cycleType=='3'" style="background-color: #35b082;border-radius: 0 15px 15px 15px;padding: 5px 10px;color:white;">{{filterDictTextByCache('period_type', directive.cycleType)}}</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
</div>
|
||||
<div style="margin-top: 10px;">
|
||||
<div>
|
||||
{{ directive.directiveName }}
|
||||
</div>
|
||||
<div>
|
||||
体型标签：{{ handleBodyTags('', directive, '') }}
|
||||
</div>
|
||||
<div>
|
||||
情绪标签：{{ handleEmotionTags('', directive, '') }}
|
||||
</div>
|
||||
</div>
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div style="border-radius: 8px;padding: 10px;width: 25vw;height: 80vh;overflow:auto;border: 1px solid #dcdfe6;">
|
||||
<div style="padding: 15px;height: 30px;width:100%;">
|
||||
<a-row>
|
||||
<a-col :span="24">
|
||||
<span style="font-size: 18px;font-weight:700;">服务指令详情</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
<div style="margin-top: 20px;padding: 15px;">
|
||||
<div class="directiveInfoClass">服务类别：{{ derectiveInfo.categoryName || derectiveInfo.categoryId_dictText }}</div>
|
||||
<div class="directiveInfoClass">服务类型：{{ derectiveInfo.typeName || derectiveInfo.typeId_dictText }}</div>
|
||||
<div class="directiveInfoClass">服务指令名称：{{ derectiveInfo.directiveName }}</div>
|
||||
<div class="directiveInfoClass">周期类型：{{ filterDictTextByCache('period_type', derectiveInfo.cycleType) }}</div>
|
||||
<div class="directiveInfoClass">服务时长(分钟)：{{ derectiveInfo.serviceDuration }}</div>
|
||||
<div class="directiveInfoClass">服务说明：{{ derectiveInfo.serviceContent }}</div>
|
||||
<div class="directiveInfoClass">体型标签：{{ handleBodyTags('', derectiveInfo, '') }}</div>
|
||||
<div class="directiveInfoClass">情绪标签：{{ handleEmotionTags('', derectiveInfo, '') }}</div>
|
||||
<div class="directiveInfoClass">语音文件：
|
||||
<span v-if="!derectiveInfo.mp3FileMedia">暂无文件</span>
|
||||
<audio controls disabled="false" v-else>
|
||||
<source :src="getFileAccessHttpUrl(derectiveInfo.mp3FileMedia)">
|
||||
</audio>
|
||||
</div>
|
||||
<div class="directiveInfoClass">视频文件：
|
||||
<span v-if="!derectiveInfo.mp4FileMedia">暂无文件</span>
|
||||
<video controls v-else>
|
||||
<source :src="getFileAccessHttpUrl(derectiveInfo.mp4FileMedia)">
|
||||
</video>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 服务指令列表编辑页 -->
|
||||
<a-drawer v-model:open="directiveEditDrawer" title="选择服务指令" width="70vw" :closable="false"
|
||||
:footer-style="{ textAlign: 'right' }" :body-style="{ padding: 0 }">
|
||||
<ConfigServiceDirectiveList ref="configServiceDirectiveListRef" :directiveList="seletedRecord.directives"
|
||||
@deleteDirective="deleteDirective" @addDirective="addDirective">
|
||||
</ConfigServiceDirectiveList>
|
||||
<template #footer>
|
||||
<a-button style="margin-right: 8px" @click="handleDirectiveCancel">关闭</a-button>
|
||||
<a-button type="primary" @click="handleDirectiveOk">确定</a-button>
|
||||
</template>
|
||||
</a-drawer>
|
||||
|
||||
<!-- 引用 -->
|
||||
<a-drawer v-model:open="directiveQuoteDrawer" title="引用服务指令包" width="80vw" :closable="false"
|
||||
:footer-style="{ textAlign: 'right' }">
|
||||
<PackageList ref="directivePackageListRef"></PackageList>
|
||||
<template #footer>
|
||||
<a-button style="margin-right: 8px" @click="handleQuoteDrawCancel">关闭</a-button>
|
||||
<a-button type="primary" @click="handleQuoteDrawOk">确定</a-button>
|
||||
</template>
|
||||
</a-drawer>
|
||||
|
||||
<template #footer>
|
||||
<a-button style="margin-right: 8px" @click="handleCancel">关闭</a-button>
|
||||
<a-button type="primary" @click="handleOk">确定</a-button>
|
||||
</template>
|
||||
</a-drawer>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, nextTick, defineExpose, computed } from 'vue';
|
||||
import DirectivePackageForm from './DirectivePackageForm.vue'
|
||||
import ConfigServiceDirectiveList from './ConfigServiceDirectiveList.vue'
|
||||
import { getFileAccessHttpUrl } from '/@/utils/common/compUtils';
|
||||
import PackageList from './PackageList.vue'
|
||||
import { filterDictTextByCache } from '/@/utils/dict/JDictSelectUtil';
|
||||
import { useMessage } from '/@/hooks/web/useMessage';
|
||||
|
||||
const title = ref<string>('');
|
||||
const visible = ref<boolean>(false);
|
||||
const disableSubmit = ref<boolean>(false);
|
||||
const registerForm = ref();
|
||||
const emit = defineEmits(['directiveOk', 'register', 'success']);
|
||||
const directiveEditDrawer = ref<boolean>(false);
|
||||
const configServiceDirectiveListRef = ref()
|
||||
const derectiveInfo = ref({})
|
||||
const selectedDirective = ref()
|
||||
const directiveQuoteDrawer = ref(false)
|
||||
const directivePackageListRef = ref()
|
||||
const seletedRecord = ref({ directives: [] })//里面记录了已选择的服务指令，其他页面都需要操作这个对象
|
||||
const { createMessage } = useMessage();
|
||||
|
||||
/**
|
||||
* 处理体型标签翻译
|
||||
* @param directive_
|
||||
*/
|
||||
function handleBodyTags(prefix, directive_, suffix) {
|
||||
if (!!directive_.bodyTagList && directive_.bodyTagList.length > 0) {
|
||||
let str = directive_.bodyTagList.map(item => item.tagName).join('、 ');
|
||||
return prefix + str + suffix
|
||||
} else {
|
||||
return ''
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 处理情绪标签翻译
|
||||
* @param directive_
|
||||
*/
|
||||
function handleEmotionTags(prefix, directive_, suffix) {
|
||||
if (!!directive_.emotionTagList && directive_.emotionTagList.length > 0) {
|
||||
let str = directive_.emotionTagList.map(item => item.tagName).join('、 ');
|
||||
return prefix + str + suffix
|
||||
} else {
|
||||
return ''
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 新增
|
||||
*/
|
||||
function add() {
|
||||
title.value = '新增服务指令包';
|
||||
visible.value = true;
|
||||
selectedDirective.value = ''
|
||||
seletedRecord.value = { directives: [] }
|
||||
derectiveInfo.value = {}
|
||||
nextTick(() => {
|
||||
registerForm.value.add();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 编辑
|
||||
* @param record
|
||||
*/
|
||||
function edit(record) {
|
||||
selectedDirective.value = ''
|
||||
derectiveInfo.value = {}
|
||||
seletedRecord.value = record
|
||||
title.value = disableSubmit.value ? '详情' : '编辑';
|
||||
visible.value = true;
|
||||
nextTick(() => {
|
||||
registerForm.value.edit(record);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 确定按钮点击事件
|
||||
*/
|
||||
function handleOk() {
|
||||
registerForm.value.submitForm(seletedRecord.value.directives);
|
||||
}
|
||||
|
||||
/**
|
||||
* form保存回调事件
|
||||
*/
|
||||
function submitCallback() {
|
||||
handleCancel();
|
||||
emit('success');
|
||||
}
|
||||
|
||||
/**
|
||||
* 取消按钮回调事件
|
||||
*/
|
||||
function handleCancel() {
|
||||
visible.value = false;
|
||||
}
|
||||
|
||||
/**
|
||||
* 新增/编辑服务指令
|
||||
*/
|
||||
const handleAddDirectives = () => {
|
||||
directiveEditDrawer.value = true;
|
||||
};
|
||||
|
||||
/**
|
||||
* 管理服务指令编辑页
|
||||
*/
|
||||
function handleDirectiveCancel() {
|
||||
directiveEditDrawer.value = false;
|
||||
}
|
||||
|
||||
/**
|
||||
* 保存服务指令编辑结果
|
||||
*/
|
||||
function handleDirectiveOk() {
|
||||
directiveEditDrawer.value = false;
|
||||
}
|
||||
|
||||
/**
|
||||
* 点击服务指令卡片时触发：右侧展示指令详细信息
|
||||
* @param directive
|
||||
*/
|
||||
function directiveInfo(directive) {
|
||||
selectedDirective.value = directive.id
|
||||
derectiveInfo.value = directive
|
||||
}
|
||||
|
||||
/**
|
||||
* 移除单个服务指令
|
||||
* @param directiveId
|
||||
*/
|
||||
function deleteDirective(directiveId) {
|
||||
setTimeout(() => {
|
||||
derectiveInfo.value = {}
|
||||
}, 200)
|
||||
seletedRecord.value.directives = seletedRecord.value.directives.filter(item => item.id !== directiveId)
|
||||
}
|
||||
|
||||
/**
|
||||
* 新增单个服务指令
|
||||
* @param directive_
|
||||
*/
|
||||
function addDirective(directive_) {
|
||||
let res_ = seletedRecord.value.directives.filter(item => item.id == directive_.id)
|
||||
if (res_.length > 0) {
|
||||
createMessage.warning('服务指令已选择');
|
||||
} else {
|
||||
createMessage.success('选择成功');
|
||||
seletedRecord.value.directives.push(directive_)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 引用
|
||||
*/
|
||||
function handleQuoteDirectives() {
|
||||
directiveQuoteDrawer.value = true
|
||||
}
|
||||
|
||||
/**
|
||||
* 处理引用确认操作
|
||||
*/
|
||||
function handleQuoteDrawOk() {
|
||||
directiveQuoteDrawer.value = false
|
||||
//将数据合并（有去重操作）
|
||||
seletedRecord.value.directives = [
|
||||
...seletedRecord.value.directives,
|
||||
...directivePackageListRef.value.selectedDirective.directives.reduce((acc, current) => {
|
||||
if (!seletedRecord.value.directives.some((item) => item.id === current.id)) {
|
||||
acc.push(current);
|
||||
}
|
||||
return acc;
|
||||
}, []),
|
||||
];
|
||||
}
|
||||
|
||||
/**
|
||||
* 处理引用取消操作
|
||||
*/
|
||||
function handleQuoteDrawCancel() {
|
||||
directiveQuoteDrawer.value = false
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
add,
|
||||
edit,
|
||||
disableSubmit,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
/**隐藏样式-modal确定按钮 */
|
||||
.jee-hidden {
|
||||
display: none !important;
|
||||
}
|
||||
</style>
|
||||
<style lang="less" scoped>
|
||||
.selected {
|
||||
border: 1px solid #1890ff;
|
||||
}
|
||||
|
||||
.directiveInfoClass {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.scrollable-content {
|
||||
height: 70vh;
|
||||
/* 设置固定高度为视口的50% */
|
||||
overflow-y: auto;
|
||||
/* 垂直方向超出时显示滚动条 */
|
||||
padding-right: 8px;
|
||||
/* 防止滚动条遮挡内容 */
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,494 @@
|
|||
<template>
|
||||
<!-- <j-modal :title="title" :width="width" :maskClosable="false" :fullscreen="true" :visible="visible" @ok="handleOk" :okButtonProps="{ class: { 'jee-hidden': disableSubmit } }" @cancel="handleCancel" cancelText="关闭">
|
||||
<DirectivePackageForm ref="registerForm" @ok="submitCallback" :formDisabled="disableSubmit" :formBpm="false"></DirectivePackageForm>
|
||||
</j-modal> -->
|
||||
<a-drawer v-model:open="visible" v-if="visible" :title="title" width="80vw" :closable="false"
|
||||
:footer-style="{ textAlign: 'right' }" @close="handleCancel">
|
||||
<a-row>
|
||||
<a-col :span="18">
|
||||
<DirectivePackageForm ref="registerForm" @ok="submitCallback" :formDisabled="disableSubmit" :formBpm="false">
|
||||
</DirectivePackageForm>
|
||||
</a-col>
|
||||
<a-col :span="6" style="padding-top: 19px;">
|
||||
<span style="color: #fff; padding: 8px 10px; background: #dfdfdf; border-radius: 5px;" @click="handleQuoteDirectives">
|
||||
<Icon icon="ant-design:reconciliation-outlined" /><a href="javascript:void(0);" style="color:#fff;">引用服务指令包</a>
|
||||
</span>
|
||||
<span style="color: #43cbd9; padding: 8px 10px; background: #fff; border-radius: 5px;margin-left:10px;border: 1px solid;" @click="handleAddDirectives">
|
||||
<Icon icon="ant-design:file-add-outlined" /><a href="javascript:void(0);" style="color:#43cbd9;" >选择服务指令</a>
|
||||
</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-row>
|
||||
<a-col :span="6" v-for="directive of seletedRecord.directives" :key="directive.id" style="padding: 5px;" @click="directiveInfo(directive)" >
|
||||
<div class="directiveClass" :class="{ 'selected': selectedDirective === directive.id }">
|
||||
<div class="fenleiClass">
|
||||
<a-row>
|
||||
<a-col :span="12" class="ellipsis-two-lines">
|
||||
{{directive.instructionTagName||directive.instructionTagId_dictText}}
|
||||
</a-col>
|
||||
<a-col :span="12" style="text-align: right;padding-right: 10px;" v-show="selectedDirective === directive.id">
|
||||
<span style="background-color: #67b4eb;border-radius: 50%;padding: 3px;color: white;width:27px;cursor: pointer;">
|
||||
<a-popconfirm title="是否确认移除？" ok-text="确认" cancel-text="取消"
|
||||
@confirm="deleteDirective(directive.id)">
|
||||
<Icon icon="ant-design:delete-outlined" size="18"/>
|
||||
</a-popconfirm>
|
||||
</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
<!-- <div class="fwsjClass">10:00 - 10:10</div> -->
|
||||
<div class="imgClass" style="margin-top: 10px;">
|
||||
<img :src="getImgPath(directive.previewFile)" style="width: 100px;height:100px"/>
|
||||
</div>
|
||||
<a-row style="margin-top: 10px;">
|
||||
<a-col :span="14">
|
||||
<span class="ellipsis-two-lines" style="margin-left:10px;font-size:20px;">{{ directive.directiveName }}</span>
|
||||
</a-col>
|
||||
<a-col :span="10" style="text-align: right;">
|
||||
<span class="yuanClass">
|
||||
<a-popover title="服务说明">
|
||||
<template #content>
|
||||
<p v-if="directive.serviceContent">{{directive.serviceContent}}</p>
|
||||
<p v-else>暂无</p>
|
||||
</template>
|
||||
<img style="width: 15px;height: 15px;" src="/src/assets/wlb/edit.png"></img>
|
||||
</a-popover>
|
||||
</span>
|
||||
<span class="yuanClass">
|
||||
<a-popover title="音频介绍">
|
||||
<template #content>
|
||||
<audio controls disabled="false" v-if="directive.mp3File">
|
||||
<source :src="getFileAccessHttpUrl(directive.mp3File)">
|
||||
</audio>
|
||||
<span v-else>暂无</span>
|
||||
</template>
|
||||
<img style="width: 15px;height: 15px;" src="/src/assets/wlb/mp3.png"></img>
|
||||
</a-popover>
|
||||
</span>
|
||||
<span class="yuanClass">
|
||||
<a-popover title="视频介绍">
|
||||
<template #content>
|
||||
<video controls v-if="directive.mp4File">
|
||||
<source :src="getFileAccessHttpUrl(directive.mp4File)">
|
||||
</video>
|
||||
<span v-else>暂无</span>
|
||||
</template>
|
||||
<img style="width: 15px;height: 15px;" src="/src/assets/wlb/mp4.png"></img>
|
||||
</a-popover>
|
||||
</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<div style="margin-top: 10px;">
|
||||
<div style="display: flex; width:100% ;height: 50rpx;">
|
||||
<view style="background-color: rgb(240,240,240);width: 100px;height: 25px;border-radius: 5px;position: relative;margin-left: 10px;">
|
||||
<view style="position: absolute;top: 0;left: 0;width: 50%;height: 100%;">
|
||||
<img style="width: 100%;height: 100%;position: absolute;top: 0;left: 0;" src="/src/assets/wlb/wlb-type1.png"></img>
|
||||
<div style="color: #fff;z-index: 999;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);font-size: 12px;">
|
||||
医保
|
||||
</div>
|
||||
</view>
|
||||
<view style="position: absolute;top: 0;left: 40%;width: 70%;height: 100%;">
|
||||
<div style="z-index: 999;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);font-size: 12px;margin-left: -2px;">
|
||||
{{directive.izReimbursement=='1'?'报销':'不报销'}}
|
||||
</div>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view style="background-color: rgb(240,240,240);width: 100px;height: 25px;border-radius: 5px;position: relative;margin-left: 10px;">
|
||||
<view style="position: absolute;top: 0;left: 0;width: 50%;height: 100%;">
|
||||
<img style="width: 100%;height: 100%;position: absolute;top: 0;left: 0;" src="/src/assets/wlb/wlb-type2.png"></img>
|
||||
<div style="color: #fff;z-index: 999;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);font-size: 12px;">
|
||||
优惠
|
||||
</div>
|
||||
</view>
|
||||
<view style="position: absolute;top: 0;left: 40%;width: 70%;height: 100%;">
|
||||
<div style="z-index: 999;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);font-size: 12px;margin-left: -2px;">
|
||||
{{directive.izPreferential=='1'?'参与':'不参与'}}
|
||||
</div>
|
||||
</view>
|
||||
</view>
|
||||
</div>
|
||||
</div>
|
||||
<a-divider />
|
||||
<a-row>
|
||||
<a-col :span="16">
|
||||
<span class="typeClass" v-if="directive.typeName">{{ directive.typeName }}</span>
|
||||
<span class="typeClass" v-if="handleBodyTags('', directive, '')">{{ handleBodyTags('', directive, '') }}</span>
|
||||
<span class="typeClass" v-if="handleEmotionTags('', directive, '')">{{ handleEmotionTags('', directive, '') }}</span>
|
||||
</a-col>
|
||||
<a-col :span="8" style="text-align: right;">
|
||||
<span class="rchlClass" v-if="directive.cycleType=='1'">日常护理</span>
|
||||
<span class="zqhlClass" v-if="directive.cycleType=='2'">周期护理</span>
|
||||
<span class="jshlClass" v-if="directive.cycleType=='3'">即时护理</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<!-- 服务指令列表编辑页 -->
|
||||
<a-drawer v-model:open="directiveEditDrawer" title="选择服务指令" width="70vw" :closable="false"
|
||||
:footer-style="{ textAlign: 'right' }" :body-style="{ padding: 0 }">
|
||||
<ConfigServiceDirectiveList ref="configServiceDirectiveListRef"
|
||||
:directiveList="seletedRecord.directives"
|
||||
@deleteDirective="deleteDirective" @addDirective="addDirective">
|
||||
</ConfigServiceDirectiveList>
|
||||
<template #footer>
|
||||
<a-button style="margin-right: 8px" @click="handleDirectiveCancel">关闭</a-button>
|
||||
<a-button type="primary" @click="handleDirectiveOk">确定</a-button>
|
||||
</template>
|
||||
</a-drawer>
|
||||
|
||||
<!-- 引用 -->
|
||||
<a-drawer v-model:open="directiveQuoteDrawer" title="引用服务指令包" width="80vw" :closable="false"
|
||||
:footer-style="{ textAlign: 'right'}" :body-style="{ background: '#dfdfdf' }" >
|
||||
<PackageList ref="directivePackageListRef" ></PackageList>
|
||||
<template #footer>
|
||||
<a-button style="margin-right: 8px" @click="handleQuoteDrawCancel">关闭</a-button>
|
||||
<a-button type="primary" @click="handleQuoteDrawOk">确定</a-button>
|
||||
</template>
|
||||
</a-drawer>
|
||||
|
||||
<template #footer>
|
||||
<a-button style="margin-right: 8px" @click="handleCancel">关闭</a-button>
|
||||
<a-button type="primary" @click="handleOk">确定</a-button>
|
||||
</template>
|
||||
</a-drawer>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, nextTick, defineExpose, computed } from 'vue';
|
||||
import DirectivePackageForm from './DirectivePackageForm.vue'
|
||||
import ConfigServiceDirectiveList from './ConfigServiceDirectiveList.vue'
|
||||
import { getFileAccessHttpUrl } from '/@/utils/common/compUtils';
|
||||
import PackageList from './PackageList.vue'
|
||||
import { filterDictTextByCache } from '/@/utils/dict/JDictSelectUtil';
|
||||
import { useMessage } from '/@/hooks/web/useMessage';
|
||||
|
||||
const title = ref<string>('');
|
||||
const visible = ref<boolean>(false);
|
||||
const disableSubmit = ref<boolean>(false);
|
||||
const registerForm = ref();
|
||||
const emit = defineEmits(['directiveOk', 'register', 'success']);
|
||||
const directiveEditDrawer = ref<boolean>(false);
|
||||
const configServiceDirectiveListRef = ref()
|
||||
const derectiveInfo = ref({})
|
||||
const selectedDirective = ref()
|
||||
const directiveQuoteDrawer = ref(false)
|
||||
const directivePackageListRef = ref()
|
||||
const seletedRecord = ref({ directives: [] })//里面记录了已选择的服务指令，其他页面都需要操作这个对象
|
||||
const { createMessage } = useMessage();
|
||||
|
||||
/**
|
||||
* 处理体型标签翻译
|
||||
* @param directive_
|
||||
*/
|
||||
function handleBodyTags(prefix, directive_, suffix) {
|
||||
if (!!directive_.bodyTagList && directive_.bodyTagList.length > 0) {
|
||||
let str = directive_.bodyTagList.map(item => item.tagName).join('、 ');
|
||||
return prefix + str + suffix
|
||||
} else {
|
||||
return ''
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 处理情绪标签翻译
|
||||
* @param directive_
|
||||
*/
|
||||
function handleEmotionTags(prefix, directive_, suffix) {
|
||||
if (!!directive_.emotionTagList && directive_.emotionTagList.length > 0) {
|
||||
let str = directive_.emotionTagList.map(item => item.tagName).join('、 ');
|
||||
return prefix + str + suffix
|
||||
} else {
|
||||
return ''
|
||||
}
|
||||
}
|
||||
|
||||
function getImgPath(pathUrl){
|
||||
if(pathUrl && pathUrl.length>0){
|
||||
return getFileAccessHttpUrl(pathUrl);
|
||||
}else{
|
||||
return '../../resource/img/logo.png';
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 新增
|
||||
*/
|
||||
function add() {
|
||||
title.value = '新增服务指令包';
|
||||
visible.value = true;
|
||||
selectedDirective.value = ''
|
||||
seletedRecord.value = { directives: [] }
|
||||
derectiveInfo.value = {}
|
||||
nextTick(() => {
|
||||
registerForm.value.add();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 编辑
|
||||
* @param record
|
||||
*/
|
||||
function edit(record) {
|
||||
console.log("🚀 ~ edit ~ record:", record)
|
||||
selectedDirective.value = ''
|
||||
derectiveInfo.value = {}
|
||||
seletedRecord.value = record
|
||||
title.value = disableSubmit.value ? '详情' : '编辑';
|
||||
visible.value = true;
|
||||
nextTick(() => {
|
||||
registerForm.value.edit(record);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 确定按钮点击事件
|
||||
*/
|
||||
function handleOk() {
|
||||
registerForm.value.submitForm(seletedRecord.value.directives);
|
||||
}
|
||||
|
||||
/**
|
||||
* form保存回调事件
|
||||
*/
|
||||
function submitCallback() {
|
||||
handleCancel();
|
||||
emit('success');
|
||||
}
|
||||
|
||||
/**
|
||||
* 取消按钮回调事件
|
||||
*/
|
||||
function handleCancel() {
|
||||
visible.value = false;
|
||||
}
|
||||
|
||||
/**
|
||||
* 新增/编辑服务指令
|
||||
*/
|
||||
const handleAddDirectives = () => {
|
||||
directiveEditDrawer.value = true;
|
||||
nextTick(() => {
|
||||
configServiceDirectiveListRef.value.edit(seletedRecord.value);
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 管理服务指令编辑页
|
||||
*/
|
||||
function handleDirectiveCancel() {
|
||||
directiveEditDrawer.value = false;
|
||||
}
|
||||
|
||||
/**
|
||||
* 保存服务指令编辑结果
|
||||
*/
|
||||
function handleDirectiveOk() {
|
||||
directiveEditDrawer.value = false;
|
||||
}
|
||||
|
||||
/**
|
||||
* 点击服务指令卡片时触发：右侧展示指令详细信息
|
||||
* @param directive
|
||||
*/
|
||||
function directiveInfo(directive) {
|
||||
selectedDirective.value = directive.id
|
||||
derectiveInfo.value = directive
|
||||
}
|
||||
|
||||
/**
|
||||
* 移除单个服务指令
|
||||
* @param directiveId
|
||||
*/
|
||||
function deleteDirective(directiveId) {
|
||||
setTimeout(() => {
|
||||
derectiveInfo.value = {}
|
||||
}, 200)
|
||||
seletedRecord.value.directives = seletedRecord.value.directives.filter(item => item.id !== directiveId)
|
||||
}
|
||||
|
||||
/**
|
||||
* 新增单个服务指令
|
||||
* @param directive_
|
||||
*/
|
||||
function addDirective(directive_) {
|
||||
console.log("🚀 ~ addDirective ~ directive_:", directive_)
|
||||
let res_ = seletedRecord.value.directives.filter(item => item.id == directive_.id)
|
||||
if (res_.length > 0) {
|
||||
createMessage.warning('服务指令已选择');
|
||||
} else {
|
||||
createMessage.success('选择成功');
|
||||
seletedRecord.value.directives.push(directive_)
|
||||
}
|
||||
console.log('seletedRecord.value--->',seletedRecord.value);
|
||||
}
|
||||
|
||||
/**
|
||||
* 引用
|
||||
*/
|
||||
function handleQuoteDirectives() {
|
||||
directiveQuoteDrawer.value = true
|
||||
}
|
||||
|
||||
/**
|
||||
* 处理引用确认操作
|
||||
*/
|
||||
function handleQuoteDrawOk() {
|
||||
directiveQuoteDrawer.value = false
|
||||
//将数据合并（有去重操作）
|
||||
seletedRecord.value.directives = [
|
||||
...seletedRecord.value.directives,
|
||||
...directivePackageListRef.value.selectedDirective.directives.reduce((acc, current) => {
|
||||
if (!seletedRecord.value.directives.some((item) => item.id === current.id)) {
|
||||
acc.push(current);
|
||||
}
|
||||
return acc;
|
||||
}, []),
|
||||
];
|
||||
}
|
||||
|
||||
/**
|
||||
* 处理引用取消操作
|
||||
*/
|
||||
function handleQuoteDrawCancel() {
|
||||
directiveQuoteDrawer.value = false
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
add,
|
||||
edit,
|
||||
disableSubmit,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
/**隐藏样式-modal确定按钮 */
|
||||
.jee-hidden {
|
||||
display: none !important;
|
||||
}
|
||||
</style>
|
||||
<style lang="less" scoped>
|
||||
.selected {
|
||||
border: 1px solid #59bffe;
|
||||
border-radius: 8px;
|
||||
// padding: 0px
|
||||
}
|
||||
|
||||
.directiveInfoClass {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.scrollable-content {
|
||||
height: 70vh;
|
||||
/* 设置固定高度为视口的50% */
|
||||
overflow-y: auto;
|
||||
/* 垂直方向超出时显示滚动条 */
|
||||
padding-right: 8px;
|
||||
/* 防止滚动条遮挡内容 */
|
||||
}
|
||||
|
||||
|
||||
|
||||
.directiveClass{
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
border-radius: 8px;
|
||||
height: 320px;
|
||||
background: linear-gradient(to bottom, #e1f3ff, #ffffff);
|
||||
width: 100%;
|
||||
box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.directiveClass:hover{
|
||||
background: linear-gradient(to bottom, #e1f3ff, #ffffff);
|
||||
border-radius: 8px;
|
||||
height: 320px;
|
||||
box-shadow:
|
||||
0 0 0 1px #59bffe, /* 描边 */
|
||||
0 4px 8px rgba(0, 0, 0, 0.1); /* 阴影 */
|
||||
transform: translate(-2px , -2px); /* 轻微上浮效果 */
|
||||
}
|
||||
|
||||
.fenleiClass{
|
||||
background-image: url('/src/assets/wlb/wlb-title.png');
|
||||
background-size: 100% 100%;
|
||||
height: 36px;
|
||||
color: #ffffff;
|
||||
padding: 7px 0 0 20px;
|
||||
}
|
||||
|
||||
.fwsjClass{
|
||||
text-align: center;
|
||||
font-weight: 700;
|
||||
font-size: 20px;
|
||||
margin: 7px;
|
||||
}
|
||||
.imgClass{
|
||||
text-align: center;
|
||||
}
|
||||
.ybClass{
|
||||
// background: #f0f0f0;padding:5px;margin:5px;
|
||||
// border-radius: 5px;
|
||||
// color: #ffffff;
|
||||
background-image: url("/src/assets/wlb/wlb-type1.png");
|
||||
background-size: 50px 23px;
|
||||
width: 50px;
|
||||
display: block;
|
||||
padding-left: 10px;
|
||||
color: #fff;
|
||||
}
|
||||
.jgyhClass{
|
||||
background: #f0f0f0;padding:5px;margin:5px;
|
||||
border-radius: 5px;
|
||||
// color: #ffffff;
|
||||
}
|
||||
.typeClass{
|
||||
margin-left: 10px;
|
||||
padding: 5px;
|
||||
border-radius: 5px;
|
||||
background: #f0f0f0;
|
||||
}
|
||||
.rchlClass{
|
||||
margin-left: 10px;
|
||||
padding: 5px;
|
||||
border-radius: 5px;
|
||||
background: #f5fafe;
|
||||
border: 1px solid #59bffe;
|
||||
color: #59bffe;
|
||||
margin-right:5px;
|
||||
}
|
||||
.zqhlClass{
|
||||
margin-left: 10px;
|
||||
padding: 5px;
|
||||
border-radius: 5px;
|
||||
background: #fff2df;
|
||||
border: 1px solid #fb9f65;
|
||||
color: #fb9f65;
|
||||
margin-right:5px;
|
||||
}
|
||||
.jshlClass{
|
||||
margin-left: 10px;
|
||||
padding: 5px;
|
||||
border-radius: 5px;
|
||||
background: #e9e5fe;
|
||||
border: 1px solid #9986fc;
|
||||
color: #9986fc;
|
||||
margin-right:5px;
|
||||
}
|
||||
.yuanClass{
|
||||
margin-right:10px;background-color: #e3e6e8; border-radius: 50%; padding: 0px 5px 5px 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.ellipsis-two-lines {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 1; /* 限制文本为2行 */
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,421 @@
|
|||
<template>
|
||||
<div class="p-2" style="background: #dfdfdf;">
|
||||
<!--查询区域-->
|
||||
<div class="jeecg-basic-table-form-container">
|
||||
<a-form ref="formRef" :model="searchForm" :label-col="labelCol" :wrapper-col="wrapperCol">
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="14">
|
||||
<a-form-item name="packageName">
|
||||
<template #label><span title="服务指令包名称">服务指令包</span></template>
|
||||
<a-input v-model:value="searchForm.packageName" allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="10">
|
||||
<span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
|
||||
<a-col :lg="9">
|
||||
<a-button type="primary" preIcon="ant-design:search-outlined" @click="searchQuery">查询</a-button>
|
||||
<a-button type="primary" preIcon="ant-design:reload-outlined" @click="searchReset"
|
||||
style="margin-left: 8px">重置</a-button>
|
||||
</a-col>
|
||||
</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</div>
|
||||
<a-row style="padding: 5px;">
|
||||
<a-col v-for="directive of tableData.records" :key="directive.id" :xs="24" :sm="24" :md="12" :lg="12" :xl="8" :xxl="4" style="padding: 5px 10px 0 0;height: 200px;">
|
||||
<a-row class="cardDivClass" @click="handlePackageClick(directive)" :class="{ 'selected': selectedDirective.id === directive.id }">
|
||||
<a-col :span="24">
|
||||
<a-row style="padding: 10px">
|
||||
<a-col :span="12">
|
||||
<img src="/src/assets/images/logo.png" style="width: 25px;height:25px;" />
|
||||
</a-col>
|
||||
<a-col :span="12" style="text-align: right;position:relative;">
|
||||
<span>
|
||||
<a-switch :checked="directive.izEnabled == '0'" @change="handleChangeIzEnabled(directive)" checked-children="启" un-checked-children="停" disabled />
|
||||
</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-col>
|
||||
<a-col :span="24" style="text-align: center;">
|
||||
<span class="titleOne ellipsis-two-lines">
|
||||
{{ getHHMM(directive.startTimeStr) }}
|
||||
~
|
||||
{{ getHHMM(directive.endTimeStr) }}
|
||||
</span>
|
||||
</a-col>
|
||||
<a-col :span="24" style="text-align: center;">
|
||||
<a-popover :title="directive.packageName">
|
||||
<template #content>
|
||||
<div style="min-width: 240px;">
|
||||
<div style="max-width: 400px;line-height:30px;padding:5px;border-radius:5px;margin:5px;background:#f5f5f5;" v-for="(item,index) in directive.directives">{{ item.directiveName }}</div>
|
||||
|
||||
<div style="max-width: 400px;line-height:30px;padding:5px;border-radius:5px;margin:5px;background:#f5f5f5;color:red;" v-if="directive.directives.length==0">未配置</div>
|
||||
</div>
|
||||
</template>
|
||||
<span class="titleOne ellipsis-two-lines">{{ directive.packageName }}</span>
|
||||
</a-popover>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<a-divider style="margin: 10px 0 5px 0;"/>
|
||||
</a-col>
|
||||
<a-col :span="12" style="padding: 0px 10px">
|
||||
{{ directive.createBy_dictText }}
|
||||
</a-col>
|
||||
<a-col :span="12" style="text-align: right;padding: 0px 10px;">
|
||||
{{ directive.createTime.substring(0,10) }}
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-col>
|
||||
|
||||
<!-- <a-col :span="11" :push="1" v-for="(directive, index) of tableData.records" :key="index">
|
||||
<a-card :bordered="false" size="small" class="smart-card"
|
||||
style="margin: 10px;box-shadow: 1px 1px 5px #b0b0b0;" @click="handlePackageClick(directive)"
|
||||
:class="{ 'selected': selectedDirective.id === directive.id }">
|
||||
<div class="selected-indicator" v-if="selectedDirective.id === directive.id"></div>
|
||||
<div>{{ directive.packageName }}</div>
|
||||
<div> {{ directive.createBy }}</div>
|
||||
<div>{{ directive.createTime }}</div>
|
||||
</a-card>
|
||||
</a-col> -->
|
||||
<!-- </a-row>
|
||||
</div> -->
|
||||
<!-- <a-col :span="8">
|
||||
<a-card title="服务指令" style="width: 100%">
|
||||
<div class="scrollable-content">
|
||||
<a-row>
|
||||
<a-col :span="22" :push="1" v-for="directive of selectedDirective.directives" :key="directive.id"
|
||||
style="margin-top: 15px;" @click="directiveInfo(directive)">
|
||||
<a-badge-ribbon :text="filterDictTextByCache('period_type', directive.cycleType)"
|
||||
:style="{ top: '-10px' }">
|
||||
<a-card size="small">
|
||||
<div :class="{ 'selected-dire': directiveId === directive.id }">
|
||||
<div>
|
||||
{{ directive.directiveName }}
|
||||
</div>
|
||||
<div>
|
||||
体型标签：{{ handleBodyTags('', directive, '') }}
|
||||
</div>
|
||||
<div>
|
||||
情绪标签：{{ handleEmotionTags('', directive, '') }}
|
||||
</div>
|
||||
</div>
|
||||
</a-card>
|
||||
</a-badge-ribbon>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :span="6" style="margin-left: 1vw;">
|
||||
<div>
|
||||
<a-card title="服务指令详情" style="width: 100%">
|
||||
<div class="">分类标签：{{ filterDictTextByCache('instruction_tag', derectiveInfo.instructionTagId) }}</div>
|
||||
<div class="directiveInfoClass">服务类别：{{ derectiveInfo.categoryName }}</div>
|
||||
<div class="directiveInfoClass">服务类型：{{ derectiveInfo.typeName }}</div>
|
||||
<div class="directiveInfoClass">服务指令名称：{{ derectiveInfo.directiveName }}</div>
|
||||
<div class="directiveInfoClass">周期类型：{{ filterDictTextByCache('period_type', derectiveInfo.cycleType) }}
|
||||
</div>
|
||||
<div class="directiveInfoClass">服务时长(分钟)：{{ derectiveInfo.serviceDuration }}</div>
|
||||
<div class="directiveInfoClass">服务说明：{{ derectiveInfo.serviceContent }}</div>
|
||||
<div class="directiveInfoClass">体型标签：{{ handleBodyTags('', derectiveInfo, '') }}</div>
|
||||
<div class="directiveInfoClass">情绪标签：{{ handleEmotionTags('', derectiveInfo, '') }}</div>
|
||||
<div class="directiveInfoClass">语音文件：
|
||||
<span v-if="!derectiveInfo.mp3File">暂无文件</span>
|
||||
<audio controls disabled="false" v-else>
|
||||
<source :src="getFileAccessHttpUrl(derectiveInfo.mp3File)">
|
||||
</audio>
|
||||
</div>
|
||||
<div class="directiveInfoClass">视频文件：
|
||||
<span v-if="!derectiveInfo.mp4File">暂无文件</span>
|
||||
<video controls v-else>
|
||||
<source :src="getFileAccessHttpUrl(derectiveInfo.mp4File)">
|
||||
</video>
|
||||
</div>
|
||||
</a-card>
|
||||
</div>
|
||||
</a-col> -->
|
||||
</a-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, onMounted, defineExpose } from 'vue';
|
||||
import { list, queryById, deleteOne } from '../DirectivePackage.api'
|
||||
import { getFileAccessHttpUrl } from '/@/utils/common/compUtils';
|
||||
import { filterDictTextByCache } from '/@/utils/dict/JDictSelectUtil';
|
||||
import dayjs from "dayjs";
|
||||
|
||||
const selectedDirective = ref({ id: '' })
|
||||
const registerModal = ref();
|
||||
const searchForm = ref({})
|
||||
const tableData = ref({})
|
||||
const derectiveInfo = ref({})
|
||||
const labelCol = reactive({
|
||||
xs: 24,
|
||||
sm: 4,
|
||||
xl: 9,
|
||||
xxl: 9
|
||||
});
|
||||
const wrapperCol = reactive({
|
||||
xs: 24,
|
||||
sm: 20,
|
||||
xl: 18,
|
||||
xxl: 18
|
||||
});
|
||||
|
||||
/**
|
||||
* 搜索
|
||||
*/
|
||||
function searchQuery() {
|
||||
queryList({})
|
||||
}
|
||||
|
||||
function getHHMM(value){
|
||||
if(value){
|
||||
return dayjs(value).format('HH:mm')
|
||||
}else{
|
||||
return '未配置'
|
||||
}
|
||||
}
|
||||
/**
|
||||
* 重置
|
||||
*/
|
||||
function searchReset() {
|
||||
searchForm.value = {}
|
||||
queryList({})
|
||||
}
|
||||
|
||||
/**
|
||||
* 新增
|
||||
*/
|
||||
function handleAdd() {
|
||||
registerModal.value.disableSubmit = false;
|
||||
registerModal.value.add();
|
||||
}
|
||||
/**
|
||||
* 成功回调
|
||||
*/
|
||||
function handleSuccess() {
|
||||
queryList({})
|
||||
}
|
||||
|
||||
/**
|
||||
* 数据查询
|
||||
*/
|
||||
function queryList(params) {
|
||||
resetSeletedDirectiveInfo()
|
||||
list({ pageNo: 1, pageSize: -1, packageName: searchForm.value.packageName }).then(res => {
|
||||
tableData.value = res
|
||||
selectedDirective.value = { id: '' }
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 编辑
|
||||
* @param data
|
||||
*/
|
||||
function packageEdit(data) {
|
||||
queryById({ id: data.id }).then(item => {
|
||||
registerModal.value.edit(item);
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 移除
|
||||
* @param data
|
||||
*/
|
||||
function remove(data) {
|
||||
deleteOne({ id: data.id }, handleSuccess())
|
||||
}
|
||||
|
||||
/**
|
||||
* 处理体型标签翻译
|
||||
* @param directive_
|
||||
*/
|
||||
function handleBodyTags(prefix, directive_, suffix) {
|
||||
if (!!directive_.bodyTagList && directive_.bodyTagList.length > 0) {
|
||||
let str = directive_.bodyTagList.map(item => item.tagName).join('、 ');
|
||||
return prefix + str + suffix
|
||||
} else {
|
||||
return ''
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 处理情绪标签翻译
|
||||
* @param directive_
|
||||
*/
|
||||
function handleEmotionTags(prefix, directive_, suffix) {
|
||||
if (!!directive_.emotionTagList && directive_.emotionTagList.length > 0) {
|
||||
let str = directive_.emotionTagList.map(item => item.tagName).join('、 ');
|
||||
return prefix + str + suffix
|
||||
} else {
|
||||
return ''
|
||||
}
|
||||
}
|
||||
|
||||
const directiveId = ref('')
|
||||
/**
|
||||
* 点击服务指令卡片时触发：右侧展示指令详细信息
|
||||
* @param directive
|
||||
*/
|
||||
function directiveInfo(directive_) {
|
||||
derectiveInfo.value = directive_
|
||||
directiveId.value = directive_.id
|
||||
}
|
||||
|
||||
/**
|
||||
* 指令包点击事件
|
||||
* @param directive_
|
||||
*/
|
||||
function handlePackageClick(directive_) {
|
||||
resetSeletedDirectiveInfo()
|
||||
//重新赋值当前选择的包信息
|
||||
selectedDirective.value = directive_
|
||||
}
|
||||
|
||||
/**
|
||||
* 重置已选择服务指令及服务指令详情
|
||||
*/
|
||||
function resetSeletedDirectiveInfo() {
|
||||
//重置已选择服务指令及服务指令详情
|
||||
derectiveInfo.value = {}
|
||||
directiveId.value = ''
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
queryList({ pageNo: 1, pageSize: -1 })
|
||||
})
|
||||
|
||||
defineExpose({
|
||||
selectedDirective
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.jeecg-basic-table-form-container {
|
||||
padding: 0;
|
||||
|
||||
.table-page-search-submitButtons {
|
||||
display: block;
|
||||
margin-bottom: 24px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.query-group-cust {
|
||||
min-width: 100px !important;
|
||||
}
|
||||
|
||||
.query-group-split-cust {
|
||||
width: 30px;
|
||||
display: inline-block;
|
||||
text-align: center
|
||||
}
|
||||
|
||||
.ant-form-item:not(.ant-form-item-with-help) {
|
||||
margin-bottom: 16px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
:deep(.ant-picker),
|
||||
:deep(.ant-input-number) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-drawer .ant-drawer-body {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
padding: 24px;
|
||||
overflow: auto;
|
||||
background: #dfdfdf;
|
||||
}
|
||||
|
||||
.selected {
|
||||
// background: url("@/assets/icons/success.svg") no-repeat;
|
||||
// background-position: calc(100% - 5px) calc(100% - 5px);
|
||||
// background-size: auto 30%;
|
||||
// transition: none !important;
|
||||
background: #edf8ff !important;
|
||||
border: 1px solid #7cc3f0;
|
||||
}
|
||||
|
||||
.selected-dire {
|
||||
color: rgb(0, 156, 0);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.derectiveInfoClass {
|
||||
border: 1px solid grey;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.smart-card {
|
||||
margin: 10px;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
||||
|
||||
// 悬停效果
|
||||
&:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
// 点击动画
|
||||
&:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
// 选中状态
|
||||
&.active-card {
|
||||
border-left: 4px solid #1890ff;
|
||||
|
||||
.selected-indicator {
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
top: 8px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: #1890ff;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.scrollable-content {
|
||||
height: 70vh;
|
||||
/* 设置固定高度为视口的50% */
|
||||
overflow-y: auto;
|
||||
/* 垂直方向超出时显示滚动条 */
|
||||
padding-right: 8px;
|
||||
/* 防止滚动条遮挡内容 */
|
||||
}
|
||||
|
||||
.titleOne {
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.cardDivClass{
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
padding: 5px;background-color: white;border-radius: 8px;height: 180px;
|
||||
box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.cardDivClass:hover{
|
||||
padding: 5px;background-color: #f4fcff;border-radius: 8px;height: 180px;
|
||||
box-shadow:
|
||||
0 0 0 2px #d3d3d3, /* 描边 */
|
||||
0 4px 8px rgba(0, 0, 0, 0.1); /* 阴影 */
|
||||
transform: translate(-2px , -2px); /* 轻微上浮效果 */
|
||||
}
|
||||
|
||||
.iconEditClass{
|
||||
position:absolute;top:0;right:54px;background: #dfdfdf;border-radius:50%;width: 25px;height: 25px;display:flex;justify-content: center;align-items: center;align-items: center;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue