wms-antdvue/.svn/pristine/e1/e17e117bb1f166b51a404f885faa7734652d3f29.svn-base
2024-11-07 16:33:03 +08:00

148 lines
3.3 KiB
Plaintext

<template>
<a-modal
v-model:visible="props.visible"
title="选择文章"
width="1000px"
@cancel="dialogClose"
style="top:20px;"
>
<BasicForm @register="register" @submit="handleSubmit" @reset="handleReset"></BasicForm>
<BasicTable
:columns="columnsType()"
:request="loadDataTable"
ref="tableRef"
:customRow="rowClick"
:showTableSetting="false"
:row-class-name="setRowClassName"
>
</BasicTable>
<template #footer>
<span class="dialog-footer">
<a-button @click="dialogClose">取消</a-button>
<a-button type="primary" @click="handleSubmits">确定</a-button>
</span>
</template>
</a-modal>
</template>
<script lang="ts" setup>
import { getArticleList } from '@/api/content/article';
import { getNoticeList } from '@/api/data/notice';
import {onMounted, reactive,ref} from "vue";
import { useForm } from '@/components/Form/index';
import { message } from 'ant-design-vue';
import { columns } from './article/columns';
import { schemas } from './article/querySchemas';
import { columns2 } from './notice/columns';
import { schemas2 } from './notice/querySchemas';
const emit = defineEmits(["success", "update:visible"]);
const props = defineProps({
visible: {
type: Boolean,
required: true,
default: false
},
type: {
type: Number,
required: true,
default: 1
},
});
const selectRow = ref({})
const tableRef = ref();
const formParams = reactive({
title:'',
status:''
});
const columnsType =()=>{
if(props.type==1){
return columns
} else if (props.type==2) {
return columns2
}
}
const handleSubmits = async () => {
if(!selectRow.value.id) {
return message.error("请选择文字文章");
}
emit("update:visible", false);
emit("success",selectRow.value);
};
const dialogClose = () => {
emit("update:visible", false);
};
const loadDataTable = async (res: any) => {
let result = []
if(props.type==1) {
result = await getArticleList({ ...formParams, ...res });
} else {
result = await getNoticeList({ ...formParams, ...res });
}
return result
};
function reloadTable(noRefresh='') {
tableRef.value.reload(noRefresh?{}:{pageNo:1});
}
const [register, {}] = useForm({
rowProps: { gutter: [16, 0] },
colProps: {
xs: 24,
sm: 24,
md: 12,
lg: 8,
xl: 6,
},
labelCol: { span: 8, offset: 0 },
schemas:props.type==1?schemas:schemas2
});
function handleSubmit(values) {
for (const key in formParams) {
formParams[key] ='';
}
for (const key in values) {
formParams[key] = values[key]
}
reloadTable();
}
function handleReset() {
for (const key in formParams) {
formParams[key] ='';
}
reloadTable();
}
const setRowClassName=(record)=> {
return record.id === selectRow.value.id ? 'clickRowStyle' : ''
}
const rowClick=(record) =>{
return {
onClick: () => {
selectRow.value = record
},
}
}
onMounted(() => {
});
</script>
<style lang="less">
.ant-table-tbody {
.ant-table-row.clickRowStyle,.ant-table-cell-row.clickRowStyle {
td {
background-color: #e7eeff!important;
}
&:hover {
td {
background-color: #e7eeff!important;
}
}
}
}
</style>