探索配置模板管理 - 新建、搜索和管理模板
<p>"<template>\n <div>\n <div class="template-operation">\n <t-button @click="formVisible = true">新建模板</t-button>\n <t-input v-model="searchValue" class="search-input" placeholder="请输入你需要搜索的内容" clearable>\n <template #suffix-icon>\n <search-icon v-if="searchValue === ''" size="20px" />\n </template>\n </t-input>\n </div>\n <!-- 卡片列表 -->\n <template v-if="pagination.total > 0 && !dataLoading">\n <div class="template-list-items">\n <t-row :gutter="[16, 16]">\n <t-col\n :lg="4"\n :xs="6"\n :xl="3"\n v-for="(template, index) in exploreConfigTemplateList.slice (\n pagination.pageSize * (pagination.current - 1),\n pagination.pageSize * pagination.current,\n )"\n :key="index"\n >\n <explore-config-template-card :template="template" @delete-item="handleDeleteItem" @manage-template="handleManagetemplate" />\n </t-col>\n </t-row>\n </div>\n <div class="template-list-pagination">\n <t-pagination\n v-model="pagination.current"\n :total="pagination.total"\n :pageSizeOptions="[12, 24, 36]"\n :page-size.sync="pagination.pageSize"\n @page-size-change="onPageSizeChange"\n @current-change="onCurrentChange"\n />\n </div>\n </template>\n <div v-else-if="dataLoading" class="list-card-loading">\n <t-loading text="加载中..."></t-loading>\n </div>\n <!-- 模板管理弹窗 -->\n <t-dialog header="新建模板" :visible.sync="formVisible" :width="680" :footer="false">\n <div slot="body">\n <!-- 表单内容 -->\n <t-form :data="formData" ref="form" :rules="rules" @submit="onSubmit" :labelWidth="100">\n <t-form-item label="模板名称" name="template_name">\n <t-input :style="{ width: '480px' }" v-model="formData.template_name" placeholder="请输入模板名称"></t-input>\n </t-form-item>\n <t-form-item label="模板类型" name="template_type">\n <t-select v-model="formData.template_type" clearable :style="{ width: '480px' }">\n <t-option v-for="(item, index) in options" :value="item.value" :label="item.label" :key="index">\n {{ item.label }}\n </t-option>\n </t-select>\n </t-form-item>\n <t-form-item label="模板介绍" name="template_description">\n <t-input :style="{ width: '480px' }" v-model="formData.template_description" placeholder="请输入模板描述"></t-input>\n </t-form-item>\n <t-form-item style="float: right">\n <t-button variant="outline" @click="onClickCloseBtn">取消</t-button>\n <t-button theme="primary" type="submit">提交</t-button>\n </t-form-item>\n </t-form>\n </div>\n </t-dialog>\n <!-- 删除操作弹窗 -->\n <t-dialog\n header="确认删除所选模板？"\n :body="confirmBody"\n :visible.sync="confirmVisible"\n @confirm="onConfirmDelete"\n :onCancel="onCancel"\n >\n </t-dialog>\n </div>\n</template>\n<script lang="ts">\nimport { prefix } from '@/config/global';\nimport { SearchIcon } from 'tdesign-icons-vue';\nimport ExploreConfigTemplateCard from '@/components/explore-config-template-card/index.vue';\n\n\nconst INITIAL_DATA = {\n name: '',\n status: '',\n description: '',\n type: '',\n mark: '',\n amount: 0,\n};\n\nexport default {\n name: 'ExploreConfigTemplates',\n components: {\n SearchIcon,\n ExploreConfigTemplateCard,\n },\n data() {\n return {\n pagination: { current: 1, pageSize: 12, total: 0 },\n prefix,\n exploreConfigTemplateList: [],\n value: 'first',\n rowKey: 'index',\n tableLayout: 'auto',\n verticalAlign: 'top',\n bordered: true,\n hover: true,\n\n rowClassName: (rowKey) => <code>${rowKey}-class</code>,\n formData: { ...INITIAL_DATA },\n options: [\n { label: '基础模板', value: 'basic' },\n { label: 'ai模板', value: 'ai' },\n ],\n formVisible: false,\n textareaValue: '',\n rules: {\n template_name: [{ required: true, message: '请输入模板名称', type: 'error' }],\n template_type: [{ required: true, message: '请输入模板类型', type: 'error' }],\n },\n searchValue: '',\n confirmVisible: false, // 控制确认弹窗\n deletetemplate: undefined,\n dataLoading: false,\n };\n },\n computed: {\n confirmBody(): string {\n const { deletetemplate } = this;\n return deletetemplate ? <code>删除后，${deletetemplate.name}的所有模板信息将被清空, 且无法恢复</code> : '';\n },\n },\n watch: {\n // eslint-disable-next-line func-names\n '$route': function(to, from) {\n if (to.path.endsWith('/templates')) {\n console.log('to templates')\n\n this.loadPageData();\n }\n }\n },\n mounted() {\n console.log("templates page")\n this.loadPageData();\n },\n methods: {\n loadPageData(): void {\n if (!this.$route ||!this.$route.params||this.$route.params.id === undefined||this.$route.params.tid === undefined)\n return // TODO 返回错误页面\n this.dataLoading = true;\n this.$request\n .get(<code>/web/projects/${this.$route.params.id}/tasks/${this.$route.params.tid}/explore_config_templates</code>, {\n withCredentials: true\n })\n .then((res) => {\n console.log(res)\n if (res.status === 200) {\n const list = res.data;\n console.log(list)\n this.exploreConfigTemplateList = list.reverse();\n this.pagination = {\n ...this.pagination,\n total: list.length,\n };\n } else {\n console.error(res);\n this.exploreConfigTemplateList = [];\n }\n })\n .catch((e: Error) => {\n console.log(e);\n })\n .finally(() => {\n this.dataLoading = false;\n });\n },\n onPageSizeChange(size: number): void {\n this.pagination.pageSize = size;\n this.pagination.current = 1;\n },\n onCurrentChange(current: number): void {\n this.pagination.current = current;\n },\n onSubmit({ result, firstError }): void {\n if (!firstError) {\n this.formVisible = false;\n this.$request.post(<code>web/projects/${this.$route.params.id}/tasks/${this.$route.params.tid}/explore_config_templates</code>, {\n template_title: this.formData.template_name,\n template_type: this.formData.template_type,\n template_description: this.formData.template_description,\n },{headers: {'Content-Type': 'application/json'},\n },\n {withCredentials: true}\n )\n .then((res) => {\n console.log(res);\n if (res.status === 200) {\n this.$message.success('提交成功');\n // 新建任务成功，重新加载任务列表\n // this.loadPageData();\n const newTemplate = res.data;\n newTemplate.template_name = this.formData.template_name;\n newTemplate.template_description = this.formData.template_description;\n // 添加新项目到项目列表\n this.exploreConfigTemplateList.unshift(newTemplate);\n // 更新当前页的总数量\n // eslint-disable-next-line no-plusplus\n this.pagination.total++;\n } else {\n console.error(res);\n }\n })\n .catch((e: Error) => {\n console.log(e);\n });\n } else {\n console.log('Errors: ', result);\n this.$message.warning(firstError);\n }\n },\n onClickCloseBtn(): void {\n this.formVisible = false;\n this.formData = {};\n },\n handleDeleteItem(template): void {\n this.confirmVisible = true;\n this.deletetemplate = template;\n },\n onConfirmDelete(): void {\n // const { index } = this.deletetask;\n // this.taskList.splice(index - 1, 1);\n console.log(this.deletetemplate.ID);\n this.confirmVisible = false;\n // 向服务器发送删除请求\n console.log(<code>web/projects/${this.$route.params.id}/tasks/${this.$route.params.tid}/explore_config_templates/${this.deletetemplate.ID}</code>);\n this.$request\n .delete(<code>web/projects/${this.$route.params.id}/tasks/${this.$route.params.tid}/explore_config_templates/${this.deletetemplate.ID}</code>, {\n withCredentials: true,\n })\n .then((res) => {\n console.log(res);\n if (res.status === 200) {\n this.$message.success(<code>${this.deletetemplate.template_name}删除成功</code>);\n console.log('删除成功');\n // eslint-disable-next-line no-plusplus\n this.pagination.total--;\n // 更新任务列表\n this.$request\n .get(<code>web/projects/${this.$route.params.id}/tasks/${this.$route.params.tid}/explore_config_templates</code>)\n .then((res) => {\n this.exploreConfigTemplateList = res.data.reverse();\n })\n .catch((err) => {\n console.error(err);\n this.$message.error('获取任务列表失败', err);\n });\n }\n })\n .catch((err) => {\n console.error(err);\n this.$message.error('删除失败', err);\n });\n },\n onCancel(): void {\n this.deletetemplate = undefined;\n this.formData = {};\n },\n handleManagetemplate(template): void {\n this.formVisible = true;\n this.formData = { ...template, status: template?.isSetup ? '1' : '0' };\n },\n },\n};\n</script>\n</p>
原文地址: http://www.cveoy.top/t/topic/qwRg 著作权归作者所有。请勿转载和采集!