943 lines
29 KiB
Vue
943 lines
29 KiB
Vue
<template>
|
||
<page-title :title="getTitle"/>
|
||
|
||
<div class="ns-table-wrapper">
|
||
<div class="ns-table" :class="{ 'ns-table-no-search': !(formConfig?.schemas.length > 0) }">
|
||
<a-spin :spinning="tableState.loading">
|
||
<a-row type="flex" class="ns-table-main">
|
||
<a-col flex="180px">
|
||
<ns-table-header
|
||
:headerActions="headerActions"
|
||
:searchData="formModel"
|
||
:tableTitle="tableTitle"
|
||
:data="tableState.selectedRows">
|
||
<template #header="data">
|
||
<slot name="header" v-bind="data || {}"></slot>
|
||
</template>
|
||
</ns-table-header>
|
||
<Skeleton :loading="loadingTree" active>
|
||
<div class="type-tree-wrapper">
|
||
<div class="tree-top-header">
|
||
<div class="tree-node-content-wrapper" :class="{'selected': allSelected}" @click="onAllSelect">全部类别</div>
|
||
<ns-button type="link" @click="onContextMenuClick(null, 'add')" v-if="authMap['add']">
|
||
<PlusCircleOutlined/>
|
||
添加类别
|
||
</ns-button>
|
||
</div>
|
||
<a-tree v-model:expandedKeys="expandedKeys" :tree-data="treeData" v-model:selectedKeys="selectedKeys"
|
||
@expand="onExpand" @select="onTreeSelect">
|
||
<template #title="{ key: treeKey, title, dataRef }">
|
||
<a-dropdown :trigger="['contextmenu']">
|
||
<span style="min-width: 80px; display: block">{{ title }}</span>
|
||
<template #overlay>
|
||
<a-menu @click="({ key: menuKey }) => onContextMenuClick(treeKey, menuKey, dataRef)">
|
||
<a-menu-item key="edit" v-if="authMap['edit']">
|
||
<EditOutlined/>
|
||
编辑
|
||
</a-menu-item>
|
||
<a-menu-item key="add" v-if="authMap['add']">
|
||
<PlusCircleOutlined/>
|
||
添加
|
||
</a-menu-item>
|
||
<a-menu-item key="remove" v-if="authMap['remove']">
|
||
<DeleteOutlined/>
|
||
删除
|
||
</a-menu-item>
|
||
</a-menu>
|
||
</template>
|
||
</a-dropdown>
|
||
</template>
|
||
</a-tree>
|
||
</div>
|
||
</Skeleton>
|
||
</a-col>
|
||
<a-col flex="auto">
|
||
<!-- {{ formConfig }} -->
|
||
<div class="ns-table-search">
|
||
<ns-form
|
||
ref="formElRef"
|
||
class="ns-table-form"
|
||
:showAction="true"
|
||
v-bind="formConfig"
|
||
formLayout="flex"
|
||
:expand="expand"
|
||
:showExpand="showExpand"
|
||
:model="formModel"
|
||
@finish="formFinish"/>
|
||
</div>
|
||
<Skeleton :loading="loadingTable" active>
|
||
<div class="section0">
|
||
<div class="section-content" v-if="tableData && tableData.length>0">
|
||
<template v-for="(item) in tableData">
|
||
<div class="item card-item" @click="onCLickCard(item)">
|
||
<header class="item-header">
|
||
<div class="info-card-header">
|
||
<div class="card-title">{{ item['alias'] }}</div>
|
||
</div>
|
||
</header>
|
||
<div class="info-item-block">
|
||
<div class="card-icon"><img :src="imgSrc + item['iconID']" alt=""></div>
|
||
<div class="card-description-wrapper">
|
||
<div class="card-description"><span>{{ item['desc'] }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<footer class="item-footer">
|
||
<div class="card-item-footer">
|
||
<div class="card-footer-left">
|
||
{{ item['typeClassAlias'] }}
|
||
</div>
|
||
<div class="card-footer-right">
|
||
<div class="card-status">
|
||
<span v-if="item['shelfState']"> <i class="iconfont iconGreen font-12"></i> 已上架
|
||
</span>
|
||
<span v-if="!item['shelfState']"><i class="iconfont iconRed font-12"></i> 待上架
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
</div>
|
||
</template>
|
||
</div>
|
||
<div class="section-content" v-if="tableData && tableData.length === 0 || !tableData">
|
||
<div class="ns-table-content"> <a-empty /> </div>
|
||
</div>
|
||
</div>
|
||
<div class="pagination" v-if="tableData && tableData.length === 0 || tableData!=null">
|
||
<a-pagination
|
||
v-bind="getPagination"
|
||
show-quick-jumper
|
||
show-size-changer
|
||
@change=" (current,pageSize) => onChange({current,pageSize})"
|
||
size="small"
|
||
:show-total="(total, range) => `显示 ${range[0]} 到 ${range[1]} 条数据，共计${total}条`"
|
||
/>
|
||
</div>
|
||
</Skeleton>
|
||
</a-col>
|
||
</a-row>
|
||
</a-spin>
|
||
</div>
|
||
</div>
|
||
<a-modal v-model:visible="modalVisible" :title="modalOperation.title" @ok="handleOk" @cancel="cancel" v-if="modalVisible">
|
||
<div class="add-form" id="app" v-if="typeSchema.length">
|
||
<ns-form
|
||
ref="configRef"
|
||
formLayout="ns-vertical-form"
|
||
:schemas="typeSchema"
|
||
:model="typeData"
|
||
/>
|
||
</div>
|
||
</a-modal>
|
||
</template>
|
||
|
||
<script lang="ts">
|
||
import {computed, defineComponent, reactive, ref, unref, watch} from "vue";
|
||
import {Skeleton, Pagination} from "ant-design-vue";
|
||
import {debounce, cloneDeep, isArray, get} from "lodash-es";
|
||
import {tableProps} from "../../../lib/component/table/props";
|
||
import {http, PropTypes, stringUtil} from "../../../lib/util";
|
||
import {useRoute} from "vue-router";
|
||
import {PlusCircleOutlined, EditOutlined, DeleteOutlined, ExclamationCircleOutlined} from "@ant-design/icons-vue";
|
||
import {NsMessage, NsModal} from "../../../lib/component";
|
||
import {RequestParams} from "/nerv-lib/component/table/table";
|
||
import {AxiosRequestConfig} from "axios";
|
||
import {useApi, useParams} from "/nerv-lib/use";
|
||
import {useTableRefresh} from "/nerv-lib/component/table/use-table-refresh";
|
||
import {useTableSession} from "/nerv-lib/component/table/use-table-session";
|
||
import {APP} from "/@/router/index.ts";
|
||
import {authorizationService} from "/nerv-lib/paas";
|
||
|
||
export default defineComponent({
|
||
name: 'TreeAndTableList',
|
||
components: {
|
||
Skeleton,
|
||
PlusCircleOutlined,
|
||
EditOutlined,
|
||
DeleteOutlined,
|
||
'a-pagination': Pagination,
|
||
},
|
||
props: {
|
||
...tableProps,
|
||
title: PropTypes.string,
|
||
tableTitle: PropTypes.func,
|
||
showTitle: {
|
||
type: Boolean,
|
||
default: true,
|
||
},
|
||
resultField: PropTypes.string
|
||
},
|
||
setup: (props, {attrs, emit}) => {
|
||
const nsTableRef = ref();
|
||
const route = useRoute();
|
||
const formModel = ref({});
|
||
// 搜索form参数
|
||
const formParamsRef = ref({});
|
||
// table参数
|
||
const tableState = reactive({
|
||
selectedRowKeys: [],
|
||
selectedRows: [],
|
||
loading: false,
|
||
loadError: false,
|
||
loadErrorMessage: '',
|
||
});
|
||
const expandedKeys = ref()
|
||
const { delayFetch } = useTableRefresh({ props, reload });
|
||
const defaultPageRef = ref(0);
|
||
const { getParams } = useParams();
|
||
const treeParamsRef = ref({});
|
||
const dataRef = ref([]);
|
||
const orderRef = ref({});
|
||
const { setTableSession } = useTableSession(formModel.value, formParamsRef, defaultPageRef);
|
||
const tableData = ref<Recordable[]>([]);
|
||
let allSelected = ref(true);
|
||
const selectedKeys = ref([]);
|
||
let loadingTable = ref<boolean>(false);
|
||
let loadingTree = ref<boolean>(false);
|
||
const imgSrc = ref(`/api/${APP}/objs/Images/`)
|
||
let typeFieldErrors = ref({});
|
||
// 缓存
|
||
function initTableSession() {
|
||
const { fullPath } = route;
|
||
const tableSession = JSON.parse(sessionStorage[fullPath] || '{}');
|
||
if (!props.enableTableSession) return;
|
||
if (tableSession['formModel']) {
|
||
Object.assign(formModel.value, tableSession['formModel']);
|
||
let code = formModel.value['typeClassCode'];
|
||
if(code){
|
||
treeParamsRef.value['typeClassCode'] = code;
|
||
selectedKeys.value =[ code];
|
||
allSelected.value = false;
|
||
}
|
||
}
|
||
}
|
||
initTableSession();
|
||
//权限部分
|
||
let authMap = ref({});
|
||
const resourceTypeClassOp= ['add', 'edit', 'remove'];
|
||
resourceTypeClassOp.forEach( key => {
|
||
authMap.value[key]= authorizationService().checkPermission('resourceRepo', 'resourceTypeClass', key);
|
||
})
|
||
// 页面标题
|
||
const getTitle = computed(() => {
|
||
const {title} = props;
|
||
if (title) return title;
|
||
const {
|
||
params: {pageTitle},
|
||
} = route;
|
||
if (pageTitle) return pageTitle;
|
||
});
|
||
// 搜索参数
|
||
const formFinish = debounce((data) => {
|
||
formParamsRef.value = data;
|
||
fetch({
|
||
page: 1,
|
||
});
|
||
}, 300);
|
||
const tableChangeEvent = (pagination: Props, filters: [], sorter?: any) => {
|
||
// console.log('params', pagination, filters, sorter);
|
||
if (sorter?.field) {
|
||
if (sorter.order) {
|
||
orderRef.value = {
|
||
[props.paramsOrderField]: stringUtil.toLine(
|
||
`${sorter.field} ${sorter.order.replace('end', '')}`,
|
||
),
|
||
};
|
||
} else {
|
||
orderRef.value = { [props.paramsOrderField]: '' }; //覆盖默认params
|
||
}
|
||
fetch({
|
||
page: pagination?.current || getPagination.value?.current || 1,
|
||
pageSize: pagination?.pageSize,
|
||
});
|
||
} else if (pagination?.current) {
|
||
fetch({
|
||
page: pagination?.current,
|
||
pageSize: pagination.pageSize,
|
||
});
|
||
}
|
||
};
|
||
// pagination
|
||
const getPagination: Recordable | Boolean = computed(() => {
|
||
const { pagination } = props;
|
||
if (pagination) {
|
||
const current = get(dataRef.value, props.pageField);
|
||
return {
|
||
showQuickJumper: true,
|
||
showLessItems: true,
|
||
showSizeChanger: true,
|
||
showTotal: (total: number, range: Array<number>) =>
|
||
`显示第${range[0]}到${range[1]}条记录 ,共 ${total} 条记录`,
|
||
...(pagination as Props),
|
||
total: get(dataRef.value, props.totalField),
|
||
current: (current >= 0 ? current : 0) + props.pageFieldOffset, // 后端0 开始
|
||
pageSize: get(dataRef.value, props.sizeField),
|
||
}
|
||
}
|
||
return false;
|
||
});
|
||
|
||
const getTableBindValues = computed(() => {
|
||
const { params, dynamicParams } = props;
|
||
return {
|
||
...attrs,
|
||
...props,
|
||
params: dynamicParams
|
||
? getParams({ ...route.params, ...route.query }, dynamicParams, params)
|
||
: params || {},
|
||
pagination: getPagination.value,
|
||
onChange: tableChangeEvent,
|
||
};
|
||
});
|
||
|
||
watch(
|
||
() => getTableBindValues.value.api,
|
||
() => {
|
||
fetch();
|
||
},
|
||
{
|
||
immediate: true,
|
||
},
|
||
);
|
||
|
||
function fetch(requestParams: RequestParams = {}, clearDelay = true) {
|
||
clearDelay && delayFetch();
|
||
const { api, pagination } = props;
|
||
const { page, pageSize } = requestParams;
|
||
if (api) {
|
||
let pageParams: Recordable = {};
|
||
|
||
if (pagination !== false) {
|
||
pageParams = {
|
||
[props.paramsPageField]: page ? page - props.pageFieldOffset : defaultPageRef.value, // 后端0 开始
|
||
[props.paramsPageSizeField]:
|
||
pageSize || getPagination.value?.pageSize || props.defaultPageSize,
|
||
};
|
||
} else {
|
||
pageParams = {
|
||
[props.paramsPageField]: defaultPageRef.value, // 后端0 开始
|
||
[props.paramsPageSizeField]:
|
||
pageSize || getPagination.value?.pageSize || props.defaultPageSize,
|
||
};
|
||
}
|
||
const httpParams = {
|
||
...getTableBindValues.value.params,
|
||
...pageParams,
|
||
...formParamsRef.value,
|
||
...treeParamsRef.value,
|
||
...orderRef.value,
|
||
|
||
};
|
||
|
||
setTableSession(pageParams[props.paramsPageField]);
|
||
|
||
clearDelay && setLoading(true);
|
||
|
||
const requestConfig: AxiosRequestConfig = { method: 'get' };
|
||
const { httpRequest } = useApi();
|
||
httpRequest({
|
||
api,
|
||
params: httpParams,
|
||
pathParams: { ...route.params, ...route.query },
|
||
requestConfig,
|
||
}).then((res: any) => {
|
||
|
||
tableState.loadError = false;
|
||
tableState.loadErrorMessage = '';
|
||
dataRef.value = res;
|
||
tableData.value = get(unref(dataRef), props.listField);
|
||
emit('update:dataSource', tableData.value);
|
||
clearDelay && setLoading(false);
|
||
loadingTable.value = false;
|
||
})
|
||
.catch((error: any) => {
|
||
const { response, code, message } = error || {};
|
||
let errMessage = response?.data?.msg;
|
||
const err: string = error?.toString?.() ?? '';
|
||
if (code === 'ECONNABORTED' && message.indexOf('timeout') !== -1) {
|
||
errMessage = '接口请求超时,请刷新页面重试!';
|
||
}
|
||
if (err?.includes('Network Error')) {
|
||
errMessage = '网络异常，请检查您的网络连接是否正常!';
|
||
}
|
||
tableState.loadError = true;
|
||
tableState.loadErrorMessage = errMessage;
|
||
clearDelay && setLoading(false);
|
||
loadingTable.value = false;
|
||
});
|
||
}
|
||
}
|
||
|
||
function setLoading(loading: boolean) {
|
||
tableState.loading = loading;
|
||
}
|
||
|
||
|
||
// 右侧树形结构
|
||
const treeData = ref( []);
|
||
// 树形结构添加
|
||
let typeSchema = ref([]);
|
||
const getTypeSchema = (mode) => {
|
||
let schema = [
|
||
{
|
||
field: 'alias',
|
||
component: 'NsInput',
|
||
label: '类别名称',
|
||
rules: [
|
||
{
|
||
required: true,
|
||
trigger: 'change',
|
||
validator: async (rule, value) => {
|
||
if (!value) {
|
||
return Promise.reject('类别名称不能为空');
|
||
}
|
||
if (!/^[a-zA-Z0-9\u4e00-\u9fa5][a-zA-Z0-9-_\u4e00-\u9fa5]{0,50}$/.test(value)) {
|
||
return Promise.reject(
|
||
'只能包括大小写字母、中文、数字和短横线（-）、下划线(_)。必须以字母、中文、数字开头。长度必须在1–50字符之间。'
|
||
);
|
||
}
|
||
},
|
||
},
|
||
{
|
||
trigger: 'change',
|
||
validator: async (rule, value) => {
|
||
if (Object.keys(typeFieldErrors.value).indexOf('alias') !== -1) {
|
||
const errorInfo = typeFieldErrors.value['alias'];
|
||
delete typeFieldErrors.value['alias'];
|
||
return Promise.reject(errorInfo);
|
||
}
|
||
},
|
||
},
|
||
],
|
||
},
|
||
];
|
||
if (mode === 'add') {
|
||
schema.push(
|
||
{
|
||
field: 'code',
|
||
component: 'NsInput',
|
||
label: '类别代码',
|
||
rules: [
|
||
{
|
||
required: true,
|
||
trigger: 'change',
|
||
validator: async (rule, value) => {
|
||
if (!value) {
|
||
return Promise.reject('类别代码不能为空');
|
||
}
|
||
if (!/^[a-zA-Z0-9\u4e00-\u9fa5][a-zA-Z0-9-_\u4e00-\u9fa5]{0,50}$/.test(value)) {
|
||
return Promise.reject(
|
||
'只能包括大小写字母、中文、数字和短横线（-）、下划线(_)。必须以字母、中文、数字开头。长度必须在1–50字符之间。'
|
||
);
|
||
}
|
||
},
|
||
},
|
||
{
|
||
trigger: 'change',
|
||
validator: async (rule, value) => {
|
||
if (Object.keys(typeFieldErrors.value).indexOf('code') !== -1) {
|
||
const errorInfo = typeFieldErrors.value['code'];
|
||
delete typeFieldErrors.value['code'];
|
||
return Promise.reject(errorInfo);
|
||
}
|
||
},
|
||
},
|
||
],
|
||
})
|
||
} else if (mode === 'edit') {
|
||
schema.push(
|
||
{
|
||
field: 'code',
|
||
component: 'NsInputText',
|
||
label: '类别代码',
|
||
})
|
||
}
|
||
return schema || [];
|
||
}
|
||
const typeData = ref({});
|
||
let modalVisible = ref(false);
|
||
let modalOperation = ref({
|
||
title: '添加类别',
|
||
key: 'add'
|
||
});
|
||
// 搜索
|
||
const formElRef = ref(null);
|
||
const getFormConfig = computed(() => {
|
||
const formConfig = cloneDeep(props.formConfig);
|
||
if (formConfig) {
|
||
formConfig.showAction = false;
|
||
if (!isArray(formConfig.schemas)) {
|
||
formConfig.schemas = [];
|
||
}
|
||
if (formConfig.keySearch !== false) {
|
||
formConfig.schemas.push({
|
||
field: 'alias',
|
||
label: '关键字',
|
||
component: 'NsInputSearch',
|
||
rules: [
|
||
{
|
||
message: '请输入关键字',
|
||
trigger: 'change',
|
||
},
|
||
],
|
||
componentProps: {
|
||
maxlength: 50,
|
||
onSearch: () => {
|
||
unref(formElRef)?.triggerSubmit()
|
||
// unref(nsTableRef)?.formElRef?.triggerSubmit();
|
||
},
|
||
onKeydown: (event) => {
|
||
//fix 单个input回车会提交表单 造成重复提交
|
||
if (event.key === 'Enter' || event.code === 'Enter') {
|
||
event.preventDefault();
|
||
}
|
||
},
|
||
placeholder: '请输入关键字',
|
||
},
|
||
});
|
||
}
|
||
}
|
||
return formConfig;
|
||
});
|
||
// 卡片列表分页信息
|
||
function onTreeSelect(selectedKeys: never[],
|
||
e: {
|
||
selected: boolean;
|
||
selectedNodes: { props: { dataRef: any } }[];
|
||
node: any;
|
||
event: any;
|
||
})
|
||
{
|
||
allSelected.value = false;
|
||
const dataRef = e.selectedNodes[0];
|
||
treeParamsRef.value = getParams(dataRef, {typeClassCode: 'code'});
|
||
unref(formElRef)?.triggerSubmit();
|
||
let key = 'typeClassCode';
|
||
if (e.selected) {
|
||
formModel.value[key] = treeParamsRef.value[key];
|
||
} else {
|
||
updateFormModel();
|
||
}
|
||
}
|
||
function reload(clearDelay = true) {
|
||
const pagination = unref(getPagination);
|
||
fetch(
|
||
{
|
||
page: pagination === false ? 1 : pagination.current,
|
||
},
|
||
clearDelay,
|
||
);
|
||
}
|
||
const updateFormModel = function (value?:any) {
|
||
const key = 'typeClassCode';
|
||
const model: object = formModel.value;
|
||
if (value) {
|
||
if (Object.keys(model).includes(key) && model[key] === value) {
|
||
delete model[key];
|
||
}
|
||
} else if (Object.keys(model).includes(key)){
|
||
delete model[key];
|
||
}
|
||
}
|
||
return {
|
||
tableState,
|
||
getTitle,
|
||
treeData,
|
||
expandedKeys,
|
||
formModel,
|
||
formFinish,
|
||
tableData,
|
||
typeSchema,
|
||
typeData,
|
||
modalVisible,
|
||
modalOperation,
|
||
typeFieldErrors,
|
||
getTypeSchema,
|
||
formConfig: getFormConfig.value,
|
||
nsTableRef,
|
||
formElRef,
|
||
getParams,
|
||
onTreeSelect,
|
||
|
||
onChange: tableChangeEvent,
|
||
allSelected,
|
||
selectedKeys,
|
||
treeParamsRef,
|
||
loadingTable,
|
||
loadingTree,
|
||
imgSrc,
|
||
getTableBindValues,
|
||
getPagination,
|
||
authMap,
|
||
updateFormModel,
|
||
setTableSession
|
||
}
|
||
},
|
||
mounted() {
|
||
this.getDataTree()
|
||
},
|
||
methods: {
|
||
onCLickCard(item) {
|
||
this.$router.push(item['code'] + '/detail' );
|
||
},
|
||
// 转换树结构数据
|
||
transferTree(data) {
|
||
if( isArray(data) && data.length > 0) {
|
||
data.forEach(it=>{
|
||
it['title'] = it['alias'];
|
||
it['key']=it['code'];
|
||
if(it['children'] ) {
|
||
this.transferTree(it['children']);
|
||
}
|
||
})
|
||
} else {
|
||
return;
|
||
}
|
||
},
|
||
getDataTree() {
|
||
http.get(`/api/${APP}/objs/ResourceTypeClasses`).then(res => {
|
||
this.transferTree(res)
|
||
this.treeData = res;
|
||
|
||
this.loadingTree = false;
|
||
}).catch( err => {
|
||
this.loadingTree = false;
|
||
})
|
||
},
|
||
onAllSelect() {
|
||
this.allSelected = !this.allSelected;
|
||
this.selectedKeys = [];
|
||
this.treeParamsRef = null;
|
||
this.updateFormModel();
|
||
this.formElRef.triggerSubmit();
|
||
},
|
||
// onExpand(keys) {
|
||
// this.expandedKeys = keys;
|
||
// },
|
||
onContextMenuClick(treeKey, menuKey, data) {
|
||
this.modalOperation.key = menuKey
|
||
if (menuKey === 'add') {
|
||
this.modalOperation.title = '添加类别';
|
||
this.modalVisible = true;
|
||
this.typeData['parentID'] = data?.id || null;
|
||
this.typeSchema = this.getTypeSchema('add')
|
||
}
|
||
if (menuKey === 'edit') {
|
||
this.modalOperation.title = '编辑类别';
|
||
this.modalVisible = true;
|
||
this.typeData = {
|
||
alias: data['title'],
|
||
code: data['code'],
|
||
id: data['id'],
|
||
parentID: data['parentID']
|
||
}
|
||
this.typeSchema = [
|
||
{
|
||
field: 'alias',
|
||
component: 'NsInput',
|
||
label: '类别名称',
|
||
rules: [
|
||
{
|
||
required: true,
|
||
trigger: 'change',
|
||
validator: async (rule, value) => {
|
||
if (!value) {
|
||
return Promise.reject('类别名称不能为空');
|
||
}
|
||
if (!/^[a-zA-Z0-9\u4e00-\u9fa5][a-zA-Z0-9-_\u4e00-\u9fa5]{0,50}$/.test(value)) {
|
||
return Promise.reject(
|
||
'只能包括大小写字母、中文、数字和短横线（-）、下划线(_)。必须以字母、中文、数字开头。长度必须在1–50字符之间。'
|
||
);
|
||
}
|
||
},
|
||
},
|
||
],
|
||
},
|
||
{
|
||
field: 'code',
|
||
component: 'NsInputText',
|
||
label: '类别代码'
|
||
},
|
||
{
|
||
field: 'parentID',
|
||
label: '类别',
|
||
component: 'NsSelectTreeApi',
|
||
componentProps: {
|
||
showCheckedStrategy: 'TreeSelect.SHOW_ALL',
|
||
selectType: 'tree',
|
||
api: `/api/${APP}/objs/ResourceTypeClasses`,
|
||
labelField: 'alias',
|
||
valueField: 'id',
|
||
resultField: '',
|
||
immediate: true,
|
||
placeholder: '请选择类型',
|
||
allowClear: true,
|
||
unSelectable: {
|
||
level: -1,
|
||
}
|
||
}
|
||
}
|
||
];
|
||
}
|
||
if (menuKey === 'remove') {
|
||
const thisObj = this;
|
||
NsModal.confirm(
|
||
{
|
||
title: '警告',
|
||
content: `确定要删除该项吗？\n删除后不可恢复，请谨慎操作！`,
|
||
okText: '确认',
|
||
cancelText: '取消',
|
||
onOk() {
|
||
http.delete(`/api/${APP}/objs/ResourceTypeClasses`, {id: data['id']}).then(() => {
|
||
NsMessage.success('删除成功');
|
||
if (data['code']) {
|
||
thisObj.updateFormModel( data['code']);
|
||
thisObj.setTableSession(thisObj.getPagination.current);
|
||
}
|
||
thisObj.getDataTree();
|
||
})
|
||
}
|
||
});
|
||
}
|
||
},
|
||
handleArgumentError(data) {
|
||
const error = data?.response?.data;
|
||
if(error && error['errType'] === 'ArgumentError') {
|
||
this.typeFieldErrors = error['fieldErrors'];
|
||
this.$refs.configRef.triggerSubmit();
|
||
}
|
||
},
|
||
addType() {
|
||
http.post(`/api/${APP}/objs/ResourceTypeClasses`, this.typeData).then((res) => {
|
||
NsMessage.success('操作成功');
|
||
this.getDataTree();
|
||
this.typeData = {};
|
||
this.modalVisible = false;
|
||
}).catch((e)=>{
|
||
this.handleArgumentError(e)
|
||
})
|
||
},
|
||
editType() {
|
||
if (Object.keys(this.typeData).includes('parentID')) {
|
||
this.typeData['parentID'] = 0;
|
||
}
|
||
http.put(`/api/${APP}/objs/ResourceTypeClasses`, this.typeData).then((res) => {
|
||
NsMessage.success('操作成功');
|
||
this.getDataTree();
|
||
this.typeData = {};
|
||
this.modalVisible = false;
|
||
}).catch((e)=>{
|
||
this.handleArgumentError(e)
|
||
})
|
||
},
|
||
removeType() {
|
||
console.log(this.typeData)
|
||
},
|
||
handleOk() {
|
||
if (['add'].includes(this.modalOperation.key)) {
|
||
this.$refs.configRef.triggerSubmit().then(() => {
|
||
this.addType();
|
||
});
|
||
}
|
||
if (['edit'].includes(this.modalOperation.key)) {
|
||
this.$refs.configRef.triggerSubmit().then(() => {
|
||
this.editType();
|
||
});
|
||
}
|
||
if (['remove'].includes(this.modalOperation.key)) {
|
||
this.removeType();
|
||
}
|
||
},
|
||
cancel() {
|
||
this.typeData = {};
|
||
this.modalVisible = false;
|
||
this.typeFieldErrors = {};
|
||
}
|
||
},
|
||
});
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.ns-table-main {
|
||
flex-wrap: nowrap;
|
||
}
|
||
|
||
:deep(.ns-table-header) {
|
||
min-width: unset;
|
||
.ant-btn {
|
||
margin-left: 0 !important;
|
||
}
|
||
}
|
||
|
||
.ns-table-wrapper {
|
||
margin: 0 24px;
|
||
}
|
||
|
||
:deep(.ns-table-search .ns-form-item label) {
|
||
display: none;
|
||
}
|
||
.type-tree-wrapper {
|
||
color: rgba(0, 0, 0, 0.65);
|
||
border-right: 1px solid rgba(0, 0, 0, 0.08);
|
||
height: 800px;
|
||
overflow-y: auto;
|
||
|
||
.tree-top-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
cursor: pointer;
|
||
margin-bottom: 4px;
|
||
.tree-node-content-wrapper {
|
||
padding: 0 4px;
|
||
line-height: 30px;
|
||
&.selected {
|
||
background-color: rgba(0, 172, 255, 0.1);
|
||
color: #00acff;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
:deep(.ant-tree ) {
|
||
color: rgba(0, 0, 0, 0.65);
|
||
|
||
.ant-tree-node-content-wrapper.ant-tree-node-selected {
|
||
background-color: rgba(0, 172, 255, 0.1);
|
||
color: #00acff
|
||
}
|
||
}
|
||
|
||
// 卡片列表
|
||
.section0 {
|
||
height: 100%;
|
||
max-height: 600px;
|
||
overflow-y: auto;
|
||
.iconRed {
|
||
color: #EB5757;
|
||
}
|
||
.iconGreen {
|
||
color: #0DCB70;
|
||
}
|
||
.font-12 {
|
||
font-size: 12px;
|
||
}
|
||
margin: 0 6px 0 24px;
|
||
|
||
.section-content {
|
||
.item {
|
||
width: 24%;
|
||
//border: 1px solid #dedede;
|
||
margin-right: 8px;
|
||
display: inline-block;
|
||
margin-bottom: 10px;
|
||
cursor: pointer;
|
||
//transition: box-shadow 400ms;
|
||
//box-shadow: none;s
|
||
|
||
transition-property: box-shadow, border;
|
||
transition-duration: 400ms, 400ms;
|
||
|
||
|
||
border: 1px solid #F1F3F5;
|
||
box-shadow: 0 0 16px rgba(0, 0, 0, 0.09);
|
||
border-radius: 6px;
|
||
|
||
&:hover {
|
||
//box-shadow: 0 2px 12px rgba(0, 172, 255, .7);
|
||
border: 1px solid #6DCFFF;
|
||
box-shadow: 0 0 16px rgba(0, 172, 255, 0.3);
|
||
}
|
||
|
||
.item-header {
|
||
background-color: inherit;
|
||
display: flex;
|
||
height: auto;
|
||
padding: 10px 14px 0 14px;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
//border-bottom: .05rem solid #dedede;
|
||
.info-card-header {
|
||
flex: 1;
|
||
height: 32px;
|
||
max-height: 32px;
|
||
overflow: hidden;
|
||
.card-title {
|
||
font-size: 16px;
|
||
font-weight: 500;
|
||
overflow-x: hidden;
|
||
overflow-y: hidden;
|
||
text-overflow: ellipsis
|
||
}
|
||
}
|
||
}
|
||
|
||
.info-item-block {
|
||
height: 90px;
|
||
overflow: hidden;
|
||
align-items: center;
|
||
//border-bottom: .05rem solid #dedede;
|
||
padding: 4px 14px;
|
||
display: flex;
|
||
|
||
.card-icon {
|
||
display: flex;
|
||
align-items: center;
|
||
text-align: center;
|
||
//width: 54px;
|
||
max-height: 88px;
|
||
img {
|
||
width: 64px;
|
||
max-height: 88px;
|
||
}
|
||
}
|
||
|
||
.card-description-wrapper {
|
||
display: grid;
|
||
height: 88px;
|
||
width: 100%;
|
||
align-items: center;
|
||
overflow: hidden;
|
||
.card-description {
|
||
max-height: 88px;
|
||
padding-left: 6px;
|
||
|
||
span {
|
||
line-height: 20px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.item-footer {
|
||
padding: 10px 14px;
|
||
background-color: #fafbfe;
|
||
border-bottom-left-radius: 6px;
|
||
border-bottom-right-radius: 6px;
|
||
|
||
.card-item-footer {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
width: 100%;
|
||
overflow-x: auto;
|
||
|
||
.card-footer-left {
|
||
line-height: 22px;
|
||
}
|
||
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.pagination {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
padding: 6px;
|
||
}
|
||
// 无数据
|
||
.ant-empty-description {
|
||
color: #bfbfbf;
|
||
}
|
||
</style>
|