szh-new
张同海 2 months ago
parent cc5967910b
commit 185f1c2c49

@ -3,14 +3,20 @@
v-bind="$attrs"
:use-wrapper="true"
:title="getTitle"
width="80%"
:width="670"
@register="registerModal"
@ok="handleSave"
>
<!-- 费用模版表单 -->
<BasicForm @register="registerForm" />
<BasicForm @register="registerForm" @linkageForm="ChangeColumnView" />
<!-- 费用字段表格 -->
<FeeField ref="feeField"></FeeField>
<columnView
ref="RefcolumnView"
title=""
:IsApi="false"
:schemas="ColumnViewschemas"
v-show="columnViewType"
></columnView>
<!--右下角按钮-->
<template #footer>
<a-button
@ -48,7 +54,7 @@
//
import { BasicModal, useModalInner } from '/@/components/Modal'
import { BasicForm, useForm } from '/@/components/Form/index'
import FeeField from './feeField.vue'
import columnView from './columnView.vue'
//
import { formSchema } from './columns'
//
@ -66,6 +72,9 @@
// loading
const loading = ref(false)
const rowId = ref('')
const ColumnViewschemas = ref<any>([])
const RefcolumnView = ref()
const columnViewType = ref(false)
const { createMessage } = useMessage()
const [registerForm, { resetFields, setFieldsValue, getFieldsValue, validate, updateSchema }] =
useForm({
@ -73,6 +82,19 @@
schemas: formSchema,
showActionButtonGroup: false,
})
function ChangeColumnView(data) {
columnViewType.value = false
ColumnViewschemas.value.splice(0)
data.forEach((item) => {
ColumnViewschemas.value.push({
field: item.dbColumnName,
label: item.columnDescription,
})
})
console.log(ColumnViewschemas.value)
columnViewType.value = true
}
const [registerModal, { setModalProps, closeModal, updateFormField }] = useModalInner(
async (data) => {
resetFields()
@ -86,8 +108,8 @@
setFieldsValue({
...res.data,
})
feeField.value.SetData(res.data.details)
feeField.value.condition = res.data.condition
// feeField.value.SetData(res.data.details)
RefcolumnView.value.condition = JSON.parse(res.data.dataRules)
detailId.value = res.data.id
}
} else {
@ -96,21 +118,22 @@
customerName: props.customerName,
customerId: props.customerId,
})
feeField.value.SetData([])
feeField.value.condition = ''
// feeField.value.SetData([])
// feeField.value.condition = ''
}
RefcolumnView.value.init(null)
setModalProps({ loading: false })
},
)
const getTitle = computed(() => (!unref(isUpdate) ? '新增' : '编辑'))
const getTitle = computed(() => (!unref(isUpdate) ? '新增数据权限' : '编辑数据权限'))
//
const feeField = ref()
// const feeField = ref()
async function handleSave(exit) {
try {
const values = await validate()
const feeList = feeField.value.validate()
values['details'] = feeList
values['condition'] = feeField.value.condition
// const feeList = feeField.value.validate()
// values['details'] = feeList
values['dataRules'] = JSON.stringify(RefcolumnView.value.queryData)
loading.value = true
setModalProps({ confirmLoading: true, loading: true })
const res: API.DataResult = await ApiEdit(values)

@ -2,10 +2,11 @@
import { request } from '/@/utils/request'
import { DataResult, PageRequest } from '/@/api/model/baseModel'
enum Api {
list = '/feeApi/FeeCustTemplate/GetList',
edit = '/feeApi/FeeCustTemplate/Edit',
info = '/feeApi/FeeCustTemplate/Edit',
delete = '/feeApi/FeeCustTemplate/Delete',
list = '/mainApi/CodeDataRuleTemplate/GetDataRuleTemplateList',
edit = '/mainApi/CodeDataRuleTemplate/EditDataRuleTemplate',
info = '/mainApi/CodeDataRuleTemplate/GetDataRuleTemplateInfo',
delete = '/mainApi/CodeDataRuleTemplate/BatchDelDataRuleTemplate',
GetColumns = '/mainApi/Common/GetColumnsByClient',
DeleteDetails = '/feeApi/FeeCustTemplate/DeleteDetails',
}

@ -0,0 +1,444 @@
<template>
<div class="columnViewBox">
<a-spin :spinning="loading">
<div class="flex ant-form-small">
<a-switch
v-model:checked="queryData.logicalOperator"
class="mt10"
checked-value="1"
un-checked-value="0"
checked-children="或"
un-checked-children="且"
/>
<div style="flex: 1">
<div
v-for="(item, index) in queryData.conditions"
class="ds-advanced-search-item flex"
:key="`f-${index}`"
>
<data
:style="{ left: index == 0 ? '-30px' : '-15px' }"
class="v-line"
style="top: 21px"
></data>
<data
v-if="index != queryData.conditions.length - 1"
class="r-line r-height"
style="left: -15px; top: 21px"
></data>
<a-switch
v-model:checked="item.logicalOperator"
checked-value="1"
class="mt2"
un-checked-value="0"
checked-children="或"
un-checked-children="且"
/>
<div style="flex: 1; margin-left: 30px">
<div
v-for="(row, key) in item.conditions"
:key="`c-${key}`"
style="margin-bottom: 6px; position: relative"
>
<div v-if="key != item.conditions.length - 1" class="r-line"></div>
<div :style="{ left: key == 0 ? '-29px' : '-16px' }" class="v-line"></div>
<a-select
v-model:value="row.field"
style="width: 150px; margin-right: 6px"
placeholder="查询字段"
@change="changeHandle($event, row)"
>
<a-select-option v-for="item in schemas" :key="item.field" :value="item.field">
{{ item.label }}
</a-select-option>
</a-select>
<a-select
v-model:value="row.operator"
style="width: 90px; margin-right: 6px"
placeholder="筛选符"
>
<a-select-option
v-for="item in operatorOptions"
:key="item.value"
:value="item.value"
>
{{ item.label }}
</a-select-option>
</a-select>
<a-date-picker
v-if="row.component == 'RangePicker'"
placeholder="请选择"
style="width: 150px"
v-model:value="row.value"
/>
<a-input
v-else
v-model:value="row.value"
placeholder="请输入"
style="width: 150px"
></a-input>
<span
v-if="item.conditions.length != 1"
@click="deleteItem(index, key)"
class="iconfont icon-shanchu21"
></span>
</div>
<div class="item-btns">
<a-button type="link" @click="addRow(index)">
<span class="iconfont icon-new_document"></span>
添加条件
</a-button>
<a-button
v-if="queryData.conditions.length != 1"
type="link"
@click="deleteGroup(index)"
>
<span class="iconfont icon-shanchuzu"></span>
删除整组
</a-button>
</div>
</div>
</div>
</div>
</div>
</a-spin>
<a-button class="add-group" type="link" @click="addGroup">
<span class="iconfont icon-calendar"></span>
添加条件组
</a-button>
</div>
</template>
<script lang="ts" setup name="AdvancedSearch">
import {
defineComponent,
PropType,
ref,
watchEffect,
defineProps,
defineEmits,
defineExpose,
unref,
watch,
reactive,
} from 'vue'
// idname
import { permissionsInfo } from '/@/hooks/web/usePermission'
import {
GetUserQuerySet,
UpdateUserQuerySet,
} from '/@/views/operation/seaexport/api/BookingLedger.js'
import { Modal } from 'ant-design-vue'
import { get, omit } from 'lodash-es'
//
import { useI18n } from '/@/hooks/web/useI18n'
const props = defineProps({
schemas: {
type: Array,
default: () => [],
},
title: {
type: String,
default: '高级查询',
},
IsApi: {
type: Boolean,
default: true,
},
})
watch(
() => props.schemas,
() => {
console.log(1111111111111111)
init(null)
},
{ deep: true },
)
const emit = defineEmits(['toSearch'])
//
const modalFlag = ref(false)
const queryData = reactive({
logicalOperator: '0',
conditions: [],
})
//
const queryOldData = reactive({
logicalOperator: '0',
conditions: [
{
logicalOperator: '0',
conditions: [
{
field: null,
operator: null,
value: null,
component: '',
},
{
field: null,
operator: null,
value: null,
component: '',
},
{
field: null,
operator: null,
value: null,
component: '',
},
{
field: null,
operator: null,
value: null,
component: '',
},
],
},
{
logicalOperator: '1',
conditions: [
{
field: null,
operator: null,
value: null,
component: '',
},
{
field: null,
operator: null,
value: null,
component: '',
},
{
field: null,
operator: null,
value: null,
component: '',
},
{
field: null,
operator: null,
value: null,
component: '',
},
],
},
],
})
// options
const operatorOptions = [
{
value: 0,
label: '等于',
},
{
value: 10,
label: '不等于',
},
{
value: 2,
label: '大于',
},
{
value: 3,
label: '大于等于',
},
{
value: 4,
label: '小于',
},
{
value: 5,
label: '小于等于',
},
{
label: '包含',
value: 1,
},
{
label: '不包含',
value: 13,
},
]
//
const sourceData = {
logicalOperator: '',
conditions: '',
}
const loading = ref(false)
//
const init = (IsApiData) => {
modalFlag.value = true
if (props.IsApi) {
loading.value = true
const permissionId = permissionsInfo().permissionId
GetUserQuerySet({ permissionId })
.then((res) => {
loading.value = false
const { data } = res
const content = JSON.parse(data?.content || '{}')
const source = JSON.parse(JSON.stringify(queryOldData))
if (content && content?.conditions?.length) {
// sourceData.logicalOperator = JSON.stringify(JSON.parse(content.logicalOperator))
// sourceData.conditions = JSON.stringify(JSON.parse(content.conditions))
queryData.logicalOperator = content.logicalOperator
queryData.conditions = content.conditions
// queryData.logicalOperator = source.logicalOperator
// queryData.conditions = source.conditions
} else {
queryData.logicalOperator = source.logicalOperator
queryData.conditions = source.conditions
}
})
.catch(() => {
loading.value = false
})
} else {
let source = JSON.parse(JSON.stringify(queryOldData))
if (IsApiData) {
source = JSON.parse(IsApiData)
}
// const source = JSON.parse(JSON.stringify(queryOldData))
queryData.logicalOperator = source.logicalOperator
queryData.conditions = source.conditions
}
}
const reset = () => {
const source = JSON.parse(JSON.stringify(queryOldData))
queryData.logicalOperator = source.logicalOperator
queryData.conditions = source.conditions
}
//
const search = () => {
//
// if (JSON.stringify(sourceData) != JSON.stringify(queryData)) {
// }
modalFlag.value = false
emit('toSearch', queryData)
const propsData = {
permissionId: permissionsInfo().permissionId,
content: JSON.stringify(queryData),
}
if (props.IsApi) {
UpdateUserQuerySet(propsData).then((res) => {})
}
}
const changeHandle = (e, row) => {
row.value = null
props.schemas.forEach((item) => {
if (item.field == e) {
row.component = item.component
}
})
}
//
const deleteItem = (index, key) => {
queryData.conditions[index].conditions.splice(key, 1)
}
//
const addRow = (index) => {
queryData.conditions[index].conditions.push({
field: null,
operator: null,
value: '',
component: '',
})
}
//
const deleteGroup = (index) => {
queryData.conditions.splice(index, 1)
}
//
const addGroup = () => {
queryData.conditions.push({
logicalOperator: 'and',
conditions: [
{
field: null,
operator: null,
value: null,
component: '',
},
],
})
}
defineExpose({
init,
queryData,
})
</script>
<style lang="less" scoped>
.columnViewBox {
position: relative;
}
// .ds-advanced-search-modal {
.ant-form-small {
margin-top: 15px;
min-height: 400px;
}
.ds-advanced-search-item {
position: relative;
margin-left: 30px;
padding: 10px 15px;
border-left: 1px solid #257afa;
background: #f5f9fc;
margin-bottom: 20px;
border-radius: 2px;
.icon-shanchu21 {
margin-left: 6px;
color: #257afa;
cursor: pointer;
}
.item-btns {
text-align: right;
color: #257afa;
.iconfont {
cursor: pointer;
}
padding-right: 18px;
}
}
.ds-advanced-search-item:last-child {
margin-bottom: 0;
}
.add-group {
position: absolute;
bottom: 16px;
margin-left: 65px;
}
.ant-switch {
background: #257afa;
font-weight: 600;
}
.ant-switch-checked {
background: #17a6a3;
font-weight: 600;
}
.r-line {
width: 0.8px;
height: 35px;
background: #cccccc;
display: inline-block;
position: absolute;
left: -16px;
top: 13px;
}
.r-line:last-child {
height: 10px;
}
.r-height {
height: calc(100% + 20px);
}
.v-line {
width: 30px;
height: 0.8px;
background: #cccccc;
display: inline-block;
position: absolute;
left: -16px;
top: 13px;
}
// }
</style>

@ -1,15 +1,22 @@
import { ref } from 'vue'
import { BasicColumn, FormSchema } from '/@/components/Table'
import { getTablesByClient } from '/@/views/baseinfo/formcopy/api'
import { getColumns, getClientPermissionList } from '/@/api/system/role'
import { Tag } from 'ant-design-vue'
// 引入字典数据
import { getDictOption } from '/@/utils/dictUtil'
const columnViewData: any = []
const res: API.DataResult = await getTablesByClient()
if (res.succeeded) {
res.data.forEach((item) => {
columnViewData.push({
label: item.description,
value: item.description,
})
})
}
// 下拉框数据接口
import { GetClientListByCode } from '/@/api/common'
// 往来单位下拉框数据
const companyDict = ref([])
let businessType: any = [
{ value: 1, label: '海运出口' },
{ value: 2, label: '海运进口' },
]
export const columns: BasicColumn[] = [
{
title: '权限模板类型',
@ -23,7 +30,7 @@ export const columns: BasicColumn[] = [
},
{
title: '资源标识',
dataIndex: 'permissionId',
dataIndex: 'permissionEntity',
width: 200,
},
{
@ -37,25 +44,40 @@ export const columns: BasicColumn[] = [
// width: 200,
},
{
title: '可视/可操作???',
dataIndex: 'note',
// width: 200,
title: '可视/可操作',
dataIndex: 'ruleType',
customRender: ({ text }) => {
if (text === 'visible') {
return '可视'
} else if (text === 'operate') {
return '可操作'
}
return text
},
},
{
title: '是否启用',
dataIndex: 'note',
// width: 200,
dataIndex: 'status',
width: 80,
customRender: ({ text }) => {
if (text === 0) {
return <Tag color="success"></Tag>
} else if (text === 1) {
return <Tag color="error"></Tag>
}
return text
},
{
title: '权限描述',
dataIndex: 'note',
width: 200,
},
{
title: '备注',
dataIndex: 'note',
title: '权限描述',
dataIndex: 'description',
width: 200,
},
// {
// title: '备注??',
// dataIndex: 'note',
// width: 200,
// },
]
export const searchFormSchema: FormSchema[] = [
@ -75,100 +97,160 @@ export const formSchema: FormSchema[] = [
show: false,
},
{
field: 'name',
label: '模板名称',
field: 'templateName',
label: '权限模板类型',
component: 'Input',
required: true,
colProps: { span: 8 },
// required: true,
colProps: { span: 12 },
},
{
field: 'businessType',
label: '业务类型',
component: 'Select',
required: true,
colProps: { span: 8 },
componentProps: () => {
label: '权限模板范围名称',
field: 'ruleScopeName',
component: 'Input',
defaultValue: '',
show: false,
},
{
label: '权限模板范围',
field: 'ruleScope',
component: 'ApiSelect',
colProps: { span: 12 },
componentProps: ({ formModel }) => {
return {
options: businessType,
api: () => {
return new Promise((resolve) => {
getDictOption('datarule_scope_type').then((res) => {
resolve(res)
})
})
},
labelField: 'label',
valueField: 'value',
resultField: 'data',
allowClear: true,
filterOption: (input: string, option: any) => {
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
},
getPopupContainer: () => document.body,
onChange: async (e, obj) => {
if (e && obj) {
formModel.ruleScope = obj.value
formModel.ruleScopeName = obj.label
}
if (!e && !obj) {
formModel.ruleScope = ''
formModel.ruleScopeName = ''
}
},
}
},
},
// {
// field: 'customerType',
// label: '客户类别',
// defaultValue: '',
// component: 'ApiSelect',
// colProps: { span: 5 },
// componentProps: ({ formModel }) => {
// return {
// api: () => {
// return new Promise((resolve) => {
// getDictOption('djy_cust_prop').then((res) => {
// console.log(res, 111111111111111)
// resolve(res)
// })
// })
// },
// labelField: 'label',
// valueField: 'value',
// resultField: 'data',
// filterOption: (input: string, option: any) => {
// return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
// },
// onChange: (v: string, obj) => {
// GetClientListByCode({ code: v }).then((res) => {
// const { data } = res
// data.forEach((item) => {
// item['label'] = item.shortName
// item['value'] = item.codeName
// })
// companyDict.value = data
// })
// },
// }
// },
// },
{
field: 'customerId',
label: '结算对象',
defaultValue: '',
label: '权限实体',
field: 'permissionEntity',
component: 'Input',
defaultValue: '',
show: false,
colProps: { span: 8 },
},
{
field: 'customerName',
label: '结算对象',
component: 'Input',
defaultValue: '',
dynamicDisabled: true,
colProps: { span: 8 },
field: 'permissionId',
label: '资源标识',
component: 'ApiSelect',
colProps: { span: 12 },
componentProps: ({ formModel }) => {
return {
api: getClientPermissionList,
labelField: 'permissionName',
valueField: 'id',
immediate: false,
resultField: 'data',
filterOption: (input: string, option: any) => {
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
},
getPopupContainer: () => document.body,
onChange: async (e, obj) => {
if (e && obj) {
formModel.permissionId = obj.id
formModel.permissionEntity = obj.permissionEntity
}
if (!e && !obj) {
formModel.permissionId = ''
formModel.permissionEntity = ''
}
},
}
},
},
// {
// label: '',
// field: 'customerId',
// component: 'Input',
// defaultValue: '',
// show: false,
// },
// {
// label: '',
// field: 'customerType',
// component: 'Input',
// defaultValue: '',
// show: false,
// },
{
field: 'description',
label: '模板说明',
component: 'Input',
colProps: { span: 8 },
field: 'columnView',
label: '中文视图名',
component: 'Select',
required: true,
colProps: { span: 12 },
componentProps: ({ formActionType }) => {
return {
options: columnViewData,
getPopupContainer: () => document.body,
onChange: async (e: any) => {
let tableViewName = ''
columnViewData.forEach((item) => {
if (item.description == e) {
tableViewName = item.name
}
})
const res: any = await getColumns({ tableViewName })
if (res.succeeded) {
formActionType.linkageForm(res.data)
}
},
}
},
},
{
field: 'note',
label: '备注',
field: 'orderNo',
label: '排序号',
component: 'Input',
colProps: { span: 16 },
colProps: { span: 12 },
},
{
field: 'ruleType',
label: '可视/可操作',
component: 'Switch',
colProps: { span: 6 },
defaultValue: false,
componentProps: {
checkedChildren: '可视',
checkedValue: 'visible',
unCheckedChildren: '可操作',
unCheckedValue: 'operate',
},
},
{
field: 'status',
label: '是否启用',
component: 'Switch',
colProps: { span: 6 },
defaultValue: 0,
componentProps: {
checkedChildren: '禁用',
checkedValue: 1,
unCheckedChildren: '启用',
unCheckedValue: 0,
},
},
{
field: 'description',
label: '权限描述',
component: 'InputTextArea',
colProps: { span: 12 },
componentProps: {
rows: 2,
},
},
// {
// field: 'description',
// label: '备注',
// component: 'Input',
// colProps: { span: 12 },
// },
]

@ -28,7 +28,7 @@
<div style="position: relative">
<input class="ds-tb-check" type="checkbox" v-model="allCheck" :indeterminate="someCheck" />
<hot-table ref="hotTb" :data="list" :settings="settings">
<img v-show="!list.length" src="../../../../assets/images/nodata.png" alt="" />
<img v-show="!list.length" src="../../../assets/images/nodata.png" alt="" />
</hot-table>
</div>
</a-spin>

Loading…
Cancel
Save