|
@@ -1,235 +0,0 @@
|
|
|
-<template>
|
|
|
|
|
- <div>
|
|
|
|
|
- <TitleCommon_shangfei
|
|
|
|
|
- v-model="cardaddDrawer"
|
|
|
|
|
- :type="props.type"
|
|
|
|
|
- :pagesize="currentPageSize"
|
|
|
|
|
- :pagenumber="currentPage"
|
|
|
|
|
- :drawer="cardaddDrawer"
|
|
|
|
|
- :tab="props.tab"
|
|
|
|
|
- @find-data-by-name="searchDataByName"
|
|
|
|
|
- @submit-drawer="addData"
|
|
|
|
|
- @add-form="clickAddData"
|
|
|
|
|
- @handle-close="closeDrawer"
|
|
|
|
|
- @clear-data="clearData"
|
|
|
|
|
- >
|
|
|
|
|
- </TitleCommon_shangfei>
|
|
|
|
|
-
|
|
|
|
|
- <div style="margin-top: 20px">
|
|
|
|
|
- <el-table style="width: 100%" :data="tableData" highlight-current-row>
|
|
|
|
|
- <el-table-column :label="props.type + `名称`" prop="name" />
|
|
|
|
|
- <!-- <el-table-column :label="props.type + `代码`" prop="code" /> -->
|
|
|
|
|
-
|
|
|
|
|
- <el-table-column prop="status" label="状态">
|
|
|
|
|
- <template #default="scope">
|
|
|
|
|
- <el-tag v-if="scope.row.status === 0" type="success">启用</el-tag>
|
|
|
|
|
- <el-tag v-else type="danger">禁用</el-tag>
|
|
|
|
|
- </template>
|
|
|
|
|
- </el-table-column>
|
|
|
|
|
-
|
|
|
|
|
- <el-table-column label="备注" prop="remark" />
|
|
|
|
|
- <el-table-column label="创建时间" prop="createdAt" />
|
|
|
|
|
- <el-table-column label="操作">
|
|
|
|
|
- <template #default="scoped">
|
|
|
|
|
- <el-popconfirm title="确认要删除吗?" @confirm="deleteTableData(scoped.row)">
|
|
|
|
|
- <template #reference>
|
|
|
|
|
- <img
|
|
|
|
|
- :src="del"
|
|
|
|
|
- alt="delete"
|
|
|
|
|
- class="actionIcon"
|
|
|
|
|
- style="height: 30px; width: 30px; padding: 5px"
|
|
|
|
|
- />
|
|
|
|
|
- </template>
|
|
|
|
|
- </el-popconfirm>
|
|
|
|
|
- <img
|
|
|
|
|
- :src="edit"
|
|
|
|
|
- alt="edit"
|
|
|
|
|
- class="actionIcon"
|
|
|
|
|
- @click="showEditDrawer(scoped.row)"
|
|
|
|
|
- style="height: 30px; width: 30px; padding: 5px"
|
|
|
|
|
- v-if="props.type === '标签'"
|
|
|
|
|
- />
|
|
|
|
|
- </template>
|
|
|
|
|
- </el-table-column>
|
|
|
|
|
- </el-table>
|
|
|
|
|
-
|
|
|
|
|
- <div>
|
|
|
|
|
- <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="handleSizeChangeFun"
|
|
|
|
|
- @current-change="handlePageChangeFun"
|
|
|
|
|
- />
|
|
|
|
|
- </div>
|
|
|
|
|
- </div>
|
|
|
|
|
-
|
|
|
|
|
- <el-drawer
|
|
|
|
|
- v-model="cardeditDrawer"
|
|
|
|
|
- direction="rtl"
|
|
|
|
|
- :title="type === '模板' ? '编辑模板' : '编辑标签'"
|
|
|
|
|
- :before-close="handleClose"
|
|
|
|
|
- >
|
|
|
|
|
- <DrawerCommonVue_shangfei
|
|
|
|
|
- :detail="currentdrawerFormData"
|
|
|
|
|
- :type="props.type"
|
|
|
|
|
- v-if="currentdrawerFormData"
|
|
|
|
|
- @submit-drawer="submitDrawer"
|
|
|
|
|
- />
|
|
|
|
|
- </el-drawer>
|
|
|
|
|
- </div>
|
|
|
|
|
-</template>
|
|
|
|
|
-
|
|
|
|
|
-<script setup lang="ts">
|
|
|
|
|
- import { onMounted, ref } from 'vue';
|
|
|
|
|
- import { ElDrawer, ElMessageBox } from 'element-plus';
|
|
|
|
|
- import DrawerCommonVue_shangfei, { FormModelCommon } from './DrawerCommon_shangfei.vue';
|
|
|
|
|
- import TitleCommon_shangfei, { DataCommon } from './TitleCommon_shangfei.vue';
|
|
|
|
|
- import { Records, SceneModule } from '@/api/template/template';
|
|
|
|
|
- import del from '@/assets/icons/del.png';
|
|
|
|
|
- import edit from '@/assets/icons/edit.png';
|
|
|
|
|
- import { LabelType } from './constant';
|
|
|
|
|
-
|
|
|
|
|
- // const currentFormType = ref('场景');
|
|
|
|
|
-
|
|
|
|
|
- export type CreateType = '添加模板' | '编辑模板' | '添加标签' | '编辑标签';
|
|
|
|
|
- export interface TableModel {
|
|
|
|
|
- id: number;
|
|
|
|
|
- name: string;
|
|
|
|
|
- code: string;
|
|
|
|
|
- status: number;
|
|
|
|
|
- remark: string;
|
|
|
|
|
- createAt: string;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- export interface ModelCommon {
|
|
|
|
|
- drawerFormData: FormModelCommon | null;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- export interface Page {
|
|
|
|
|
- page: number;
|
|
|
|
|
- size: number;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- // const currentType = ref<CreateType>('编辑模板');
|
|
|
|
|
- const currentdrawerFormData = ref<FormModelCommon>({} as FormModelCommon);
|
|
|
|
|
- const cardeditDrawer = ref(false);
|
|
|
|
|
- const cardaddDrawer = ref(false);
|
|
|
|
|
- const currentPage = ref(1);
|
|
|
|
|
- const currentPageSize = ref(10);
|
|
|
|
|
- const total = ref(100);
|
|
|
|
|
- const tableData = ref<Records[]>([]);
|
|
|
|
|
-
|
|
|
|
|
- const props = defineProps<{
|
|
|
|
|
- type: string;
|
|
|
|
|
- tab: LabelType;
|
|
|
|
|
- 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>;
|
|
|
|
|
- }>();
|
|
|
|
|
-
|
|
|
|
|
- // 删除数据-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) => {
|
|
|
|
|
- done();
|
|
|
|
|
- closeDrawer();
|
|
|
|
|
- };
|
|
|
|
|
-
|
|
|
|
|
- // 编辑提交数据
|
|
|
|
|
- function submitDrawer(data: SceneModule) {
|
|
|
|
|
- console.log('编辑提交数据:', data);
|
|
|
|
|
- props.submitDrawer(data).then((res) => {
|
|
|
|
|
- console.log('submitDrawer', res);
|
|
|
|
|
- closeDrawer();
|
|
|
|
|
- getData({ page: currentPage.value, size: currentPageSize.value });
|
|
|
|
|
- });
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- // 查询数据列表-finish
|
|
|
|
|
- function getData(data: Page) {
|
|
|
|
|
- props.getData(data).then((res) => {
|
|
|
|
|
- console.log('getData', res);
|
|
|
|
|
- tableData.value = res.records;
|
|
|
|
|
- total.value = res.totalRow;
|
|
|
|
|
- });
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- // 根据名称找到数据-finish
|
|
|
|
|
- function searchDataByName(data: DataCommon) {
|
|
|
|
|
- props.searchDataByName(data).then((res) => {
|
|
|
|
|
- console.log('searchDataByName', res);
|
|
|
|
|
- tableData.value = res.records;
|
|
|
|
|
- });
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- // 单机添加按钮,控制弹框显示-finish
|
|
|
|
|
- function clickAddData() {
|
|
|
|
|
- cardaddDrawer.value = true;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- // 添加数据-finish
|
|
|
|
|
- function addData(data: SceneModule) {
|
|
|
|
|
- props.addData(data).then((res) => {
|
|
|
|
|
- console.log('addData', res);
|
|
|
|
|
- closeDrawer();
|
|
|
|
|
-
|
|
|
|
|
- getData({ page: currentPage.value, size: currentPageSize.value });
|
|
|
|
|
- });
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- function closeDrawer() {
|
|
|
|
|
- cardaddDrawer.value = false;
|
|
|
|
|
- cardeditDrawer.value = false;
|
|
|
|
|
- getData({ page: currentPage.value, size: currentPageSize.value });
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- // 清空输入框数据-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({ page: currentPage.value, size: currentPageSize.value });
|
|
|
|
|
- });
|
|
|
|
|
-</script>
|
|
|
|
|
-
|
|
|
|
|
-<style scoped>
|
|
|
|
|
- .actionIcon {
|
|
|
|
|
- display: inline-block;
|
|
|
|
|
- cursor: pointer;
|
|
|
|
|
- }
|
|
|
|
|
-</style>
|
|
|