|
|
@@ -2,15 +2,15 @@
|
|
|
<div>
|
|
|
|
|
|
|
|
|
- <TitleCommon v-model="cardaddDrawer" :type="currentFormType" :pagesize="props.currentPageSize"
|
|
|
- :pagenumber="props.currentPage" :drawer="cardaddDrawer" @find-data-by-name="SearchDataByName"
|
|
|
- @submit-drawer="AddData" @add-form="ClickAddData" @handle-close="CloseDrawer" @clear-data="ClearData">
|
|
|
+ <TitleCommon v-model="cardaddDrawer" :type="props.type" :pagesize="currentPageSize" :pagenumber="currentPage"
|
|
|
+ :drawer="cardaddDrawer" @find-data-by-name="searchDataByName" @submit-drawer="addData" @add-form="clickAddData"
|
|
|
+ @handle-close="closeDrawer" @clear-data="clearData">
|
|
|
</TitleCommon>
|
|
|
|
|
|
<div class="table" style="margin-top: 20px;">
|
|
|
<el-table style="width: 100%" :data="tableData" highlight-current-row>
|
|
|
- <el-table-column :label="currentFormType + `名称`" width="250" prop="name" />
|
|
|
- <el-table-column :label="currentFormType + `代码`" width="200" prop="code" />
|
|
|
+ <el-table-column :label="props.type + `名称`" width="250" prop="name" />
|
|
|
+ <el-table-column :label="props.type + `代码`" width="200" prop="code" />
|
|
|
|
|
|
<el-table-column prop="status" label="状态" width="150">
|
|
|
<template #default="scope">
|
|
|
@@ -24,32 +24,32 @@
|
|
|
<el-table-column label="操作" width="200">
|
|
|
<template #default="scoped">
|
|
|
<el-button size="small" @click="deleteTableData(scoped.row)">删除</el-button>
|
|
|
- <el-button size="small" @click="ShowEditDrawer(scoped.row)">编辑</el-button>
|
|
|
+ <el-button size="small" @click="showEditDrawer(scoped.row)">编辑</el-button>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
|
|
|
- <el-pagination v-model:currentPage="props.currentPage" v-model:currentPageSize="props.currentPageSize"
|
|
|
+ <el-pagination v-model:currentPage="currentPage" v-model:currentPageSize="currentPageSize"
|
|
|
:page-sizes="[10, 20, 50, 100, 200]" layout="total,sizes,prev,pager,next,jumper" :total="total"
|
|
|
- @size-change="handeSizeChange" @current-change="handleCurrentPageChange"
|
|
|
+ @size-change="handleSizeChangeFun" @current-change="handlePageChangeFun"
|
|
|
style="margin-left: 600px; margin-top: 20px" />
|
|
|
</div>
|
|
|
|
|
|
<el-drawer v-model="cardeditDrawer" direction="rtl" :title="currentType" :before-close="handleClose">
|
|
|
- <DrawerCommonVue :detail="props.drawerFormData" v-if="currentdrawerFormData" @submit-drawer="submitDrawer" />
|
|
|
+ <DrawerCommonVue :detail="currentdrawerFormData" v-if="currentdrawerFormData" @submit-drawer="submitDrawer" />
|
|
|
</el-drawer>
|
|
|
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
-import { onMounted, ref, watch } from 'vue';
|
|
|
+import { onMounted, ref } from 'vue';
|
|
|
import { ElDrawer, ElMessageBox, } from 'element-plus';
|
|
|
import DrawerCommonVue, { FormModelCommon } from './DrawerCommon.vue';
|
|
|
-import TitleCommon from './TitleCommon.vue';
|
|
|
-import { Records } from '@/api/template/template';
|
|
|
+import TitleCommon, { DataCommon } from './TitleCommon.vue';
|
|
|
+import { Records, SceneModule } from '@/api/template/template';
|
|
|
|
|
|
-const currentFormType = ref('场景');
|
|
|
+// const currentFormType = ref('场景');
|
|
|
|
|
|
export type CreateType = '添加模板' | '修改模板';
|
|
|
export interface TableModel {
|
|
|
@@ -65,75 +65,55 @@ export interface ModelCommon {
|
|
|
drawerFormData: FormModelCommon | null
|
|
|
}
|
|
|
|
|
|
+export interface Page {
|
|
|
+ page: number,
|
|
|
+ size: number,
|
|
|
+}
|
|
|
|
|
|
-
|
|
|
-const props = defineProps<{ adddrawer: boolean, editdrawer: boolean, total: number, currentPage: number, currentPageSize: number, tableData: Records[], drawerFormData: FormModelCommon }>();
|
|
|
const currentType = ref<CreateType>('添加模板');
|
|
|
const currentdrawerFormData = ref<FormModelCommon>({} as FormModelCommon);
|
|
|
-
|
|
|
-
|
|
|
-const emit = defineEmits(['ClearData', 'ClickAddData', 'CloseDrawer', 'ShowEditDrawer', 'AddData', 'SearchDataByName', 'deleteTableData', 'submitDrawer', 'handeSizeChange', 'handleCurrentPageChange', 'GetData'])
|
|
|
const cardeditDrawer = ref(false);
|
|
|
const cardaddDrawer = ref(false);
|
|
|
+const currentPage = ref(1);
|
|
|
+const currentPageSize = ref(10);
|
|
|
+const total = ref(100);
|
|
|
+const tableData = ref<Records[]>([]);
|
|
|
|
|
|
-watch(
|
|
|
- () => props.editdrawer,
|
|
|
- (newdrawer) => {
|
|
|
- console.log('cardcommon-editdrawer0', cardeditDrawer.value);
|
|
|
- cardeditDrawer.value = newdrawer;
|
|
|
- console.log('cardcommon-editdrawer1', cardeditDrawer.value);
|
|
|
- },
|
|
|
- { immediate: true },
|
|
|
-);
|
|
|
-
|
|
|
-watch(
|
|
|
- () => props.adddrawer,
|
|
|
- (newdrawer) => {
|
|
|
- console.log('cardcommon-adddrawer0', cardaddDrawer.value);
|
|
|
- cardaddDrawer.value = newdrawer;
|
|
|
- console.log('cardcommon-adddrawer1', cardaddDrawer.value);
|
|
|
- },
|
|
|
- { immediate: true },
|
|
|
-);
|
|
|
-
|
|
|
-watch(
|
|
|
- () => props.drawerFormData,
|
|
|
- (newdrawerFormData) => {
|
|
|
- console.log('cardcommon-drawerFormData0', currentdrawerFormData.value);
|
|
|
- currentdrawerFormData.value = newdrawerFormData;
|
|
|
- console.log('cardcommon-drawerFormData1', currentdrawerFormData.value);
|
|
|
- },
|
|
|
- { immediate: true },
|
|
|
-);
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-function handeSizeChange(val: number) {
|
|
|
- emit('handeSizeChange', val)
|
|
|
-}
|
|
|
-function handleCurrentPageChange(val: number) {
|
|
|
- emit('handleCurrentPageChange', val)
|
|
|
|
|
|
-}
|
|
|
|
|
|
-function deleteTableData(row: TableModel) {
|
|
|
|
|
|
- emit('deleteTableData', row)
|
|
|
-}
|
|
|
+const props = defineProps<{
|
|
|
+ type: string,
|
|
|
+ addData: (d: SceneModule) => Promise<unknown>,
|
|
|
+ searchDataByName: (d: DataCommon) => Promise<unknown>
|
|
|
+ deleteTableData: (d: TableModel) => Promise<unknown>,
|
|
|
+ submitDrawer: (d: SceneModule) => Promise<unknown>,
|
|
|
+ getData: (d: Page) => Promise<unknown>,
|
|
|
+}>();
|
|
|
+
|
|
|
|
|
|
-// 编辑数据弹框
|
|
|
-function ShowEditDrawer(row: TableModel) {
|
|
|
- emit('ShowEditDrawer', row);
|
|
|
+// 删除数据-finish
|
|
|
+function deleteTableData(row: TableModel) {
|
|
|
+ // emit('deleteTableData', row);
|
|
|
+ props.deleteTableData(row).then(res => {
|
|
|
+ console.log('deleteTableData', res);
|
|
|
+ getData({ page: currentPage.value, size: currentPageSize.value });
|
|
|
+ })
|
|
|
+}
|
|
|
|
|
|
+// 编辑数据弹框-finish
|
|
|
+function showEditDrawer(row: TableModel) {
|
|
|
+ cardeditDrawer.value = true;
|
|
|
+ console.log('row', row)
|
|
|
+ currentdrawerFormData.value = row;
|
|
|
}
|
|
|
|
|
|
-// 弹框关闭事件
|
|
|
+// 弹框关闭事件-finish
|
|
|
const handleClose = (done: () => void) => {
|
|
|
ElMessageBox.confirm('是否确认关闭?')
|
|
|
.then(() => {
|
|
|
done();
|
|
|
- CloseDrawer();
|
|
|
+ closeDrawer();
|
|
|
|
|
|
})
|
|
|
.catch(() => {
|
|
|
@@ -144,43 +124,82 @@ const handleClose = (done: () => void) => {
|
|
|
|
|
|
|
|
|
// 编辑提交数据
|
|
|
-function submitDrawer(data) {
|
|
|
- emit('submitDrawer', data);
|
|
|
-
|
|
|
+function submitDrawer(data: SceneModule) {
|
|
|
+ console.log('编辑提交数据:', data)
|
|
|
+ props.submitDrawer(data).then(res => {
|
|
|
+ console.log('submitDrawer', res)
|
|
|
+ closeDrawer();
|
|
|
+ getData({ page: currentPage.value, size: currentPageSize.value });
|
|
|
+ })
|
|
|
}
|
|
|
|
|
|
|
|
|
-// 查询数据列表
|
|
|
-function GetData(currentPage: number, currentPageSize: number) {
|
|
|
- emit('GetData', currentPage, currentPageSize)
|
|
|
+
|
|
|
+// 查询数据列表-finish
|
|
|
+function getData(data: Page) {
|
|
|
+ props.getData(data).then(res => {
|
|
|
+ console.log('getData', res)
|
|
|
+ tableData.value = res.records;
|
|
|
+ total.value = res.totalRow;
|
|
|
+ });
|
|
|
+
|
|
|
}
|
|
|
|
|
|
-// 根据名称找到数据
|
|
|
-function SearchDataByName(data) {
|
|
|
- emit('SearchDataByName', data)
|
|
|
+// 根据名称找到数据-finish
|
|
|
+function searchDataByName(data: DataCommon) {
|
|
|
+ props.searchDataByName(data).then(res => {
|
|
|
+ console.log('searchDataByName', res);
|
|
|
+ tableData.value = res.records;
|
|
|
+ })
|
|
|
}
|
|
|
|
|
|
-function ClickAddData() {
|
|
|
- emit('ClickAddData');
|
|
|
+// 单机添加按钮,控制弹框显示-finish
|
|
|
+function clickAddData() {
|
|
|
+ cardaddDrawer.value = true;
|
|
|
+
|
|
|
}
|
|
|
|
|
|
-// 添加数据
|
|
|
-function AddData(data) {
|
|
|
- emit('AddData', data);
|
|
|
+// 添加数据-finish
|
|
|
+function addData(data: SceneModule) {
|
|
|
+
|
|
|
+ props.addData(data).then(res => {
|
|
|
+ console.log('addData', res);
|
|
|
+ closeDrawer();
|
|
|
|
|
|
+ getData({ page: currentPage.value, size: currentPageSize.value });
|
|
|
+ })
|
|
|
|
|
|
}
|
|
|
|
|
|
-function CloseDrawer() {
|
|
|
- emit('CloseDrawer');
|
|
|
+function closeDrawer() {
|
|
|
+ cardaddDrawer.value = false;
|
|
|
+ cardeditDrawer.value = false;
|
|
|
+ getData({ page: currentPage.value, size: currentPageSize.value });
|
|
|
}
|
|
|
|
|
|
-function ClearData() {
|
|
|
- emit('ClearData');
|
|
|
+// 清空输入框数据-finish
|
|
|
+function clearData() {
|
|
|
+ // getSceneLabelList(currentPage.value, currentPageSize.value);
|
|
|
+ getData({ page: currentPage.value, size: currentPageSize.value });
|
|
|
}
|
|
|
|
|
|
+// 页数-finish
|
|
|
+function handleSizeChangeFun(val: number) {
|
|
|
+ currentPageSize.value = val;
|
|
|
+ getData({ page: currentPage.value, size: currentPageSize.value });
|
|
|
+}
|
|
|
+
|
|
|
+// 翻页-finish
|
|
|
+function handlePageChangeFun(val: number) {
|
|
|
+ currentPage.value = val;
|
|
|
+ console.log('currentPage:' + currentPage.value);
|
|
|
+ getData({ page: currentPage.value, size: currentPageSize.value });
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
onMounted(() => {
|
|
|
- GetData(props.currentPage, props.currentPageSize);
|
|
|
+ // getData(props.currentPage, props.currentPageSize);
|
|
|
+ getData({ page: currentPage.value, size: currentPageSize.value });
|
|
|
|
|
|
});
|
|
|
</script>
|