|
@@ -1,8 +1,9 @@
|
|
|
<template>
|
|
|
- <div >
|
|
|
+ <div>
|
|
|
<BasicTable @register="registerTable" :rowSelection="rowSelection">
|
|
|
<template #tableTitle>
|
|
|
- <a-button preIcon="ant-design:plus-outlined" type="primary" @click="handleAdd">新增</a-button><span style="color: #f00;">(注:新增时请先选择系统类型 <b style="color: rgb(255, 191, 0); font-size: 20px;">↑</b>)</span>
|
|
|
+ <a-button preIcon="ant-design:plus-outlined" type="primary" @click="handleAdd">新增</a-button
|
|
|
+ ><span style="color: #f00">(注:新增时请先选择系统类型 <b style="color: rgb(255, 191, 0); font-size: 20px">↑</b>)</span>
|
|
|
<a-dropdown v-if="selectedRowKeys.length > 0" :getPopupContainer="getPopupContainer">
|
|
|
<template #overlay>
|
|
|
<a-menu>
|
|
@@ -20,10 +21,7 @@
|
|
|
</template>
|
|
|
<template #action="{ record }">
|
|
|
<a class="table-action-link" @click="handleEdit(record)">编辑</a>
|
|
|
- <a-popconfirm
|
|
|
- title="确定删除?"
|
|
|
- @confirm="handleDelete(record)"
|
|
|
- >
|
|
|
+ <a-popconfirm title="确定删除?" @confirm="handleDelete(record)">
|
|
|
<a class="table-action-link">删除</a>
|
|
|
</a-popconfirm>
|
|
|
<slot name="action" v-bind="{ record }"></slot>
|
|
@@ -38,233 +36,246 @@
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
-//ts语法
|
|
|
-import { ref, provide, reactive, toRaw, defineExpose, watch } from 'vue';
|
|
|
-import { BasicTable, ActionItem, EditRecordRow, BasicColumn } from '/@/components/Table';
|
|
|
-import { useModal } from '/@/components/Modal';
|
|
|
-import DeviceModal from '../comment/DeviceModal.vue';
|
|
|
-// import { getToken } from '/@/utils/auth';
|
|
|
-// import { useGlobSetting } from '/@/hooks/setting';
|
|
|
-import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
|
|
|
-import { useListPage } from '/@/hooks/system/useListPage';
|
|
|
-import { getPopupContainer } from '/@/utils';
|
|
|
-import { message } from 'ant-design-vue';
|
|
|
+ //ts语法
|
|
|
+ import { ref, provide, reactive, toRaw, defineExpose, watch } from 'vue';
|
|
|
+ import { BasicTable, ActionItem, EditRecordRow, BasicColumn } from '/@/components/Table';
|
|
|
+ import { useModal } from '/@/components/Modal';
|
|
|
+ import DeviceModal from '../comment/DeviceModal.vue';
|
|
|
+ // import { getToken } from '/@/utils/auth';
|
|
|
+ // import { useGlobSetting } from '/@/hooks/setting';
|
|
|
+ import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
|
|
|
+ import { useListPage } from '/@/hooks/system/useListPage';
|
|
|
+ import { getPopupContainer } from '/@/utils';
|
|
|
+ import { message } from 'ant-design-vue';
|
|
|
|
|
|
-const props = defineProps({
|
|
|
- columnsType: {
|
|
|
- type: String,
|
|
|
- // required: true,
|
|
|
- },
|
|
|
- columns: {
|
|
|
- type: Array,
|
|
|
- // required: true,
|
|
|
- default: () => [],
|
|
|
- },
|
|
|
- searchFormSchema: {
|
|
|
- type: Array,
|
|
|
- default: () => [],
|
|
|
- },
|
|
|
- formSchema: {
|
|
|
- type: Array,
|
|
|
- required: true,
|
|
|
- },
|
|
|
- list: {
|
|
|
- type: Function,
|
|
|
- required: true,
|
|
|
- },
|
|
|
- getImportUrl: {
|
|
|
- type: String,
|
|
|
- },
|
|
|
- getExportUrl: {
|
|
|
- type: String,
|
|
|
- },
|
|
|
- deleteById: {
|
|
|
- type: Function,
|
|
|
- required: true,
|
|
|
- },
|
|
|
- batchDelete: {
|
|
|
- type: Function,
|
|
|
- },
|
|
|
- saveOrUpdate: {
|
|
|
- type: Function,
|
|
|
- required: true,
|
|
|
- },
|
|
|
- pointList: {
|
|
|
- type: Function,
|
|
|
- },
|
|
|
- showTab: {
|
|
|
- type: Boolean,
|
|
|
- default: false,
|
|
|
- },
|
|
|
- designScope: {
|
|
|
- type: String,
|
|
|
- },
|
|
|
- title: {
|
|
|
- type: String,
|
|
|
- },
|
|
|
- deviceType: {
|
|
|
- type: String,
|
|
|
- },
|
|
|
-});
|
|
|
+ const props = defineProps({
|
|
|
+ columnsType: {
|
|
|
+ type: String,
|
|
|
+ // required: true,
|
|
|
+ },
|
|
|
+ columns: {
|
|
|
+ type: Array,
|
|
|
+ // required: true,
|
|
|
+ default: () => [],
|
|
|
+ },
|
|
|
+ searchFormSchema: {
|
|
|
+ type: Array,
|
|
|
+ default: () => [],
|
|
|
+ },
|
|
|
+ formSchema: {
|
|
|
+ type: Array,
|
|
|
+ required: true,
|
|
|
+ },
|
|
|
+ list: {
|
|
|
+ type: Function,
|
|
|
+ required: true,
|
|
|
+ },
|
|
|
+ getImportUrl: {
|
|
|
+ type: String,
|
|
|
+ },
|
|
|
+ getExportUrl: {
|
|
|
+ type: String,
|
|
|
+ },
|
|
|
+ deleteById: {
|
|
|
+ type: Function,
|
|
|
+ required: true,
|
|
|
+ },
|
|
|
+ batchDelete: {
|
|
|
+ type: Function,
|
|
|
+ },
|
|
|
+ saveOrUpdate: {
|
|
|
+ type: Function,
|
|
|
+ required: true,
|
|
|
+ },
|
|
|
+ pointList: {
|
|
|
+ type: Function,
|
|
|
+ },
|
|
|
+ showTab: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false,
|
|
|
+ },
|
|
|
+ designScope: {
|
|
|
+ type: String,
|
|
|
+ },
|
|
|
+ title: {
|
|
|
+ type: String,
|
|
|
+ },
|
|
|
+ deviceType: {
|
|
|
+ type: String,
|
|
|
+ },
|
|
|
+ });
|
|
|
|
|
|
-const emit = defineEmits(['submitSuccess', 'editHandler']);
|
|
|
+ const emit = defineEmits(['submitSuccess', 'editHandler']);
|
|
|
|
|
|
-const isUpdate = ref(false);
|
|
|
-const record = reactive({});
|
|
|
-const formSchemaData = ref(props.formSchema)
|
|
|
-const deviceTypeId = ref('')
|
|
|
-const pageType = ref('')
|
|
|
+ const isUpdate = ref(false);
|
|
|
+ const record = reactive({});
|
|
|
+ const formSchemaData = ref(props.formSchema);
|
|
|
+ const deviceTypeId = ref('');
|
|
|
+ const pageType = ref('');
|
|
|
|
|
|
-watch(() => props.formSchema, (val) => {
|
|
|
- formSchemaData.value = val
|
|
|
-})
|
|
|
+ watch(
|
|
|
+ () => props.formSchema,
|
|
|
+ (val) => {
|
|
|
+ formSchemaData.value = val;
|
|
|
+ }
|
|
|
+ );
|
|
|
|
|
|
-provide('formSchema', formSchemaData);
|
|
|
-provide('isUpdate', isUpdate);
|
|
|
-provide('formData', record);
|
|
|
-provide('deviceType', props.deviceType);
|
|
|
-// const glob = useGlobSetting();
|
|
|
-const [registerModal, { openModal, closeModal }] = useModal();
|
|
|
+ provide('formSchema', formSchemaData);
|
|
|
+ provide('isUpdate', isUpdate);
|
|
|
+ provide('formData', record);
|
|
|
+ provide('deviceType', props.deviceType);
|
|
|
+ // const glob = useGlobSetting();
|
|
|
+ const [registerModal, { openModal, closeModal }] = useModal();
|
|
|
|
|
|
-const columnList = getTableHeaderColumns(props.columnsType);
|
|
|
+ const columnList = getTableHeaderColumns(props.columnsType);
|
|
|
|
|
|
-// 列表页面公共参数、方法
|
|
|
-const { prefixCls, tableContext, onExportXls, onImportXls, doRequest } = useListPage({
|
|
|
- designScope: props.designScope,
|
|
|
- tableProps: {
|
|
|
- showTableSetting: false,
|
|
|
- title: props.title,
|
|
|
- api: props.list,
|
|
|
- columns: props.columns.length > 0 ? (props.columns as any[]) : columnList,
|
|
|
- // size: 'small',
|
|
|
- // bordered: false,
|
|
|
- formConfig: {
|
|
|
- showAdvancedButton: true,
|
|
|
- // labelWidth: 100,
|
|
|
- labelAlign: 'left',
|
|
|
- labelCol: {
|
|
|
- xs: 24,
|
|
|
- sm: 24,
|
|
|
- md: 24,
|
|
|
- lg: 9,
|
|
|
- xl: 7,
|
|
|
- xxl: 5,
|
|
|
+ // 列表页面公共参数、方法
|
|
|
+ const { prefixCls, tableContext, onExportXls, onImportXls, doRequest } = useListPage({
|
|
|
+ designScope: props.designScope,
|
|
|
+ tableProps: {
|
|
|
+ showTableSetting: false,
|
|
|
+ title: props.title,
|
|
|
+ api: props.list,
|
|
|
+ columns: props.columns.length > 0 ? (props.columns as any[]) : columnList,
|
|
|
+ // size: 'small',
|
|
|
+ // bordered: false,
|
|
|
+ showIndexColumn: true,
|
|
|
+ formConfig: {
|
|
|
+ showAdvancedButton: true,
|
|
|
+ // labelWidth: 100,
|
|
|
+ labelAlign: 'left',
|
|
|
+ labelCol: {
|
|
|
+ xs: 24,
|
|
|
+ sm: 24,
|
|
|
+ md: 24,
|
|
|
+ lg: 9,
|
|
|
+ xl: 7,
|
|
|
+ xxl: 5,
|
|
|
+ },
|
|
|
+ schemas: props.searchFormSchema as any[],
|
|
|
+ },
|
|
|
+ useSearchForm: props.searchFormSchema.length > 0 ? true : false,
|
|
|
+ striped: true,
|
|
|
+ actionColumn: {
|
|
|
+ width: 180,
|
|
|
+ },
|
|
|
+ beforeFetch: (params) => {
|
|
|
+ return Object.assign(params, { column: 'createTime', devicekind: props.deviceType });
|
|
|
},
|
|
|
- schemas: props.searchFormSchema as any[],
|
|
|
- },
|
|
|
- useSearchForm: props.searchFormSchema.length > 0 ? true : false,
|
|
|
- striped: true,
|
|
|
- actionColumn: {
|
|
|
- width: 180,
|
|
|
- },
|
|
|
- beforeFetch: (params) => {
|
|
|
- return Object.assign(params, { column: 'createTime', devicekind: props.deviceType });
|
|
|
},
|
|
|
- },
|
|
|
-});
|
|
|
-
|
|
|
+ });
|
|
|
|
|
|
-//注册table数据
|
|
|
-const [registerTable, { reload, getForm }, { rowSelection, selectedRowKeys }] = tableContext;
|
|
|
+ //注册table数据
|
|
|
+ const [registerTable, { reload, getForm }, { rowSelection, selectedRowKeys }] = tableContext;
|
|
|
|
|
|
-const saveOrUpdateHandler = async (params) => {
|
|
|
- try {
|
|
|
- await props.saveOrUpdate(params, isUpdate.value);
|
|
|
- !props.showTab ? closeModal() : '';
|
|
|
- await doRequest(props.list, { confirm: false });
|
|
|
- emit('submitSuccess', params)
|
|
|
- } catch (error) {
|
|
|
- message.error('保存失败,请联系管理员');
|
|
|
- }
|
|
|
-};
|
|
|
+ const saveOrUpdateHandler = async (params) => {
|
|
|
+ try {
|
|
|
+ await props.saveOrUpdate(params, isUpdate.value);
|
|
|
+ !props.showTab ? closeModal() : '';
|
|
|
+ await doRequest(props.list, { confirm: false });
|
|
|
+ emit('submitSuccess', params);
|
|
|
+ } catch (error) {
|
|
|
+ message.error('保存失败,请联系管理员');
|
|
|
+ }
|
|
|
+ };
|
|
|
|
|
|
-// const closeModalFn = () => {
|
|
|
-// closeModal()
|
|
|
-// }
|
|
|
-/**
|
|
|
- * 新增事件
|
|
|
- */
|
|
|
-function handleAdd() {
|
|
|
- const searchFormData = getForm().getFieldsValue()
|
|
|
- if(searchFormData && searchFormData['strtype']){
|
|
|
- emit('editHandler', searchFormData)
|
|
|
- for (let key in record) {
|
|
|
- if(key == 'strtype'){
|
|
|
- record[key] = searchFormData['strtype']
|
|
|
- }else{
|
|
|
- delete record[key];
|
|
|
+ // const closeModalFn = () => {
|
|
|
+ // closeModal()
|
|
|
+ // }
|
|
|
+ /**
|
|
|
+ * 新增事件
|
|
|
+ */
|
|
|
+ function handleAdd() {
|
|
|
+ const searchFormData = getForm().getFieldsValue();
|
|
|
+ if (searchFormData && searchFormData['strtype']) {
|
|
|
+ emit('editHandler', searchFormData);
|
|
|
+ for (let key in record) {
|
|
|
+ if (key == 'strtype') {
|
|
|
+ record[key] = searchFormData['strtype'];
|
|
|
+ } else {
|
|
|
+ delete record[key];
|
|
|
+ }
|
|
|
}
|
|
|
+ isUpdate.value = false;
|
|
|
+ openModal(
|
|
|
+ true,
|
|
|
+ {
|
|
|
+ record: { strtype: searchFormData['strtype'] },
|
|
|
+ },
|
|
|
+ false
|
|
|
+ );
|
|
|
+ } else {
|
|
|
+ message.info('请先选择系统类型!!');
|
|
|
}
|
|
|
- isUpdate.value = false;
|
|
|
- openModal(true, {
|
|
|
- record: { strtype : searchFormData['strtype'] }
|
|
|
- }, false);
|
|
|
- }else{
|
|
|
- message.info('请先选择系统类型!!')
|
|
|
}
|
|
|
-}
|
|
|
-
|
|
|
-/**
|
|
|
- * 编辑事件
|
|
|
- */
|
|
|
-function handleEdit(data) {
|
|
|
- emit('editHandler', data)
|
|
|
- isUpdate.value = true;
|
|
|
- Object.assign(record, toRaw(data));
|
|
|
- openModal(true, {
|
|
|
- record,
|
|
|
- }, false);
|
|
|
-}
|
|
|
-
|
|
|
-/**
|
|
|
- * 删除事件
|
|
|
- */
|
|
|
-async function handleDelete(record) {
|
|
|
- await props.deleteById({ id: record.id }, reload);
|
|
|
-}
|
|
|
|
|
|
-/**
|
|
|
- * 批量删除事件
|
|
|
- */
|
|
|
-async function batchHandleDelete() {
|
|
|
- doRequest(() => props.batchDelete({ ids: selectedRowKeys.value }));
|
|
|
-}
|
|
|
-/**
|
|
|
- * 查看
|
|
|
- */
|
|
|
-// function handleDetail(record) {
|
|
|
-// iframeUrl.value = `${glob.uploadUrl}/sys/annountCement/show/${record.id}?token=${getToken()}`;
|
|
|
-// openDetail(true);
|
|
|
-// }
|
|
|
-/**
|
|
|
- * 操作列定义
|
|
|
- * @param record
|
|
|
- */
|
|
|
-function getActions(record: EditRecordRow, column: BasicColumn): ActionItem[] {
|
|
|
- return [
|
|
|
- {
|
|
|
- label: '编辑',
|
|
|
- onClick: handleEdit.bind(null, record, column),
|
|
|
- },
|
|
|
- {
|
|
|
- label: '删除',
|
|
|
- popConfirm: {
|
|
|
- title: '是否确认删除',
|
|
|
- confirm: handleDelete.bind(null, record, column),
|
|
|
+ /**
|
|
|
+ * 编辑事件
|
|
|
+ */
|
|
|
+ function handleEdit(data) {
|
|
|
+ emit('editHandler', data);
|
|
|
+ isUpdate.value = true;
|
|
|
+ Object.assign(record, toRaw(data));
|
|
|
+ openModal(
|
|
|
+ true,
|
|
|
+ {
|
|
|
+ record,
|
|
|
},
|
|
|
- },
|
|
|
- // {
|
|
|
- // label: '查看',
|
|
|
- // onClick: handleDetail.bind(null, record),
|
|
|
- // },
|
|
|
- ];
|
|
|
-}
|
|
|
+ false
|
|
|
+ );
|
|
|
+ }
|
|
|
|
|
|
+ /**
|
|
|
+ * 删除事件
|
|
|
+ */
|
|
|
+ async function handleDelete(record) {
|
|
|
+ await props.deleteById({ id: record.id }, reload);
|
|
|
+ }
|
|
|
|
|
|
-defineExpose({
|
|
|
- doRequest, onExportXls, onImportXls, reload, getForm
|
|
|
-});
|
|
|
+ /**
|
|
|
+ * 批量删除事件
|
|
|
+ */
|
|
|
+ async function batchHandleDelete() {
|
|
|
+ doRequest(() => props.batchDelete({ ids: selectedRowKeys.value }));
|
|
|
+ }
|
|
|
+ /**
|
|
|
+ * 查看
|
|
|
+ */
|
|
|
+ // function handleDetail(record) {
|
|
|
+ // iframeUrl.value = `${glob.uploadUrl}/sys/annountCement/show/${record.id}?token=${getToken()}`;
|
|
|
+ // openDetail(true);
|
|
|
+ // }
|
|
|
+ /**
|
|
|
+ * 操作列定义
|
|
|
+ * @param record
|
|
|
+ */
|
|
|
+ function getActions(record: EditRecordRow, column: BasicColumn): ActionItem[] {
|
|
|
+ return [
|
|
|
+ {
|
|
|
+ label: '编辑',
|
|
|
+ onClick: handleEdit.bind(null, record, column),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '删除',
|
|
|
+ popConfirm: {
|
|
|
+ title: '是否确认删除',
|
|
|
+ confirm: handleDelete.bind(null, record, column),
|
|
|
+ },
|
|
|
+ },
|
|
|
+ // {
|
|
|
+ // label: '查看',
|
|
|
+ // onClick: handleDetail.bind(null, record),
|
|
|
+ // },
|
|
|
+ ];
|
|
|
+ }
|
|
|
|
|
|
+ defineExpose({
|
|
|
+ doRequest,
|
|
|
+ onExportXls,
|
|
|
+ onImportXls,
|
|
|
+ reload,
|
|
|
+ getForm,
|
|
|
+ });
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="less">
|