DEBUG
This commit is contained in:
@@ -77,3 +77,6 @@ export const getTemplateListUrl = "/site/template/list";
|
||||
export const getSubjectFomartGroupList = "/site/subject/fomart/group/list";
|
||||
// 替换模板列表
|
||||
export const getSubjectFomartList = "/site/subject/fomart/list";
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -27,7 +27,7 @@ export const saveData = (params: SiteList.saveParams) => {
|
||||
/**
|
||||
* @name 上传域名站点
|
||||
*/
|
||||
export const uploadData = (params: SiteList.saveParams) => {
|
||||
export const uploadExcel = (params: SiteList.saveParams) => {
|
||||
return http.post<ResPage<ResultData>>('/site/domain/upload', params);
|
||||
};
|
||||
|
||||
|
||||
@@ -1,44 +1,42 @@
|
||||
<template>
|
||||
<el-dialog v-model="dialogVisible" :title="`批量添加${parameter.title}`" :destroy-on-close="true" width="520px" draggable>
|
||||
<el-form class="drawer-multiColumn-form" label-width="100px">
|
||||
<el-form-item label="模板下载 :">
|
||||
<el-button type="primary" :icon="Download" @click="downloadTemp"> 点击下载 </el-button>
|
||||
</el-form-item>
|
||||
<el-form-item label="文件上传 :">
|
||||
<el-upload
|
||||
action="#"
|
||||
class="upload"
|
||||
:drag="true"
|
||||
:limit="excelLimit"
|
||||
:multiple="true"
|
||||
:show-file-list="true"
|
||||
:http-request="uploadExcel"
|
||||
:before-upload="beforeExcelUpload"
|
||||
:on-exceed="handleExceed"
|
||||
:on-success="excelUploadSuccess"
|
||||
:on-error="excelUploadError"
|
||||
:accept="parameter.fileType!.join(',')"
|
||||
>
|
||||
<slot name="empty">
|
||||
<el-icon class="el-icon--upload">
|
||||
<upload-filled />
|
||||
</el-icon>
|
||||
<div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
|
||||
<!-- <el-dialog v-model="dialogVisible" :title="`批量添加${parameter.title}`" :destroy-on-close="true" width="520px" draggable> -->
|
||||
<el-form class="drawer-multiColumn-form" label-width="100px">
|
||||
<el-form-item label="模板下载 :">
|
||||
<el-button type="primary" :icon="Download" @click="downloadTemp"> 点击下载 </el-button>
|
||||
</el-form-item>
|
||||
<el-form-item label="文件上传 :">
|
||||
<el-upload
|
||||
action="#"
|
||||
class="upload"
|
||||
:drag="true"
|
||||
:limit="excelLimit"
|
||||
:multiple="true"
|
||||
:show-file-list="true"
|
||||
:http-request="uploadExcel"
|
||||
:before-upload="beforeExcelUpload"
|
||||
:on-exceed="handleExceed"
|
||||
:on-success="excelUploadSuccess"
|
||||
:on-error="excelUploadError"
|
||||
:accept="parameter.fileType!.join(',')"
|
||||
>
|
||||
<slot name="empty">
|
||||
<el-icon class="el-icon--upload">
|
||||
<upload-filled />
|
||||
</el-icon>
|
||||
<div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
|
||||
</slot>
|
||||
<template #tip>
|
||||
<slot name="tip">
|
||||
<div class="el-upload__tip">请上传 .xls , .xlsx 标准格式文件,文件最大为 {{ parameter.fileSize }}M</div>
|
||||
</slot>
|
||||
<template #tip>
|
||||
<slot name="tip">
|
||||
<div class="el-upload__tip">
|
||||
请上传 .xls , .xlsx 标准格式文件,文件最大为 {{ parameter.fileSize }}M
|
||||
</div>
|
||||
</slot>
|
||||
</template>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
<el-form-item style="display: none" label="数据覆盖 :">
|
||||
<el-switch v-model="isCover" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-dialog>
|
||||
</template>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
<el-form-item style="display: none" label="数据覆盖 :">
|
||||
<el-switch v-model="isCover" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<!-- </el-dialog> -->
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="ImportExcel">
|
||||
@@ -68,7 +66,7 @@ const dialogVisible = ref(false);
|
||||
const parameter = ref<ExcelParameterProps>({
|
||||
type: 0,
|
||||
title: "",
|
||||
fileSize: 5,
|
||||
fileSize: 10,
|
||||
fileType: ["application/vnd.ms-excel", "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"]
|
||||
});
|
||||
|
||||
@@ -78,10 +76,12 @@ const acceptParams = (params: ExcelParameterProps) => {
|
||||
dialogVisible.value = true;
|
||||
};
|
||||
|
||||
const emit = defineEmits(["uploadTemplateExcel"]);
|
||||
const emit = defineEmits(["uploadTemplateExcel", "downloadMbTemp"]);
|
||||
// const emit = defineEmits(["uploadTemplateExcel"]);
|
||||
|
||||
// Excel 导入模板下载
|
||||
const downloadTemp = () => {
|
||||
emit("downloadMbTemp");
|
||||
if (!parameter.value.tempApi) return;
|
||||
const params = { type: parameter.value.type };
|
||||
useDownload(parameter.value.tempApi, `${parameter.value.title}模板`, params);
|
||||
@@ -113,14 +113,16 @@ const beforeExcelUpload = (file: UploadRawFile) => {
|
||||
ElNotification({
|
||||
title: "温馨提示",
|
||||
message: "上传文件只能是 xls / xlsx 格式!",
|
||||
type: "warning"
|
||||
type: "warning",
|
||||
customClass: "my-custom-class"
|
||||
});
|
||||
if (!fileSize)
|
||||
setTimeout(() => {
|
||||
ElNotification({
|
||||
title: "温馨提示",
|
||||
message: `上传文件大小不能超过 ${parameter.value.fileSize}MB!`,
|
||||
type: "warning"
|
||||
type: "warning",
|
||||
customClass: "my-custom-class"
|
||||
});
|
||||
}, 0);
|
||||
return isExcel && fileSize;
|
||||
@@ -131,7 +133,8 @@ const handleExceed = () => {
|
||||
ElNotification({
|
||||
title: "温馨提示",
|
||||
message: "最多只能上传一个文件!",
|
||||
type: "warning"
|
||||
type: "warning",
|
||||
customClass: "my-custom-class"
|
||||
});
|
||||
};
|
||||
|
||||
@@ -140,7 +143,8 @@ const excelUploadError = () => {
|
||||
ElNotification({
|
||||
title: "温馨提示",
|
||||
message: `批量添加${parameter.value.title}失败,请您重新上传!`,
|
||||
type: "error"
|
||||
type: "error",
|
||||
customClass: "my-custom-class"
|
||||
});
|
||||
};
|
||||
|
||||
@@ -149,7 +153,8 @@ const excelUploadSuccess = () => {
|
||||
ElNotification({
|
||||
title: "温馨提示",
|
||||
message: `上传${parameter.value.title}文件成功!`,
|
||||
type: "success"
|
||||
type: "success",
|
||||
customClass: "my-custom-class"
|
||||
});
|
||||
};
|
||||
|
||||
@@ -161,4 +166,7 @@ defineExpose({
|
||||
.upload {
|
||||
width: 80%;
|
||||
}
|
||||
.my-custom-class {
|
||||
z-index: 99999999;
|
||||
}
|
||||
</style>
|
||||
@@ -1,42 +1,44 @@
|
||||
<template>
|
||||
<!-- <el-dialog v-model="dialogVisible" :title="`批量添加${parameter.title}`" :destroy-on-close="true" width="520px" draggable> -->
|
||||
<el-form class="drawer-multiColumn-form" label-width="100px">
|
||||
<el-form-item label="模板下载 :">
|
||||
<el-button type="primary" :icon="Download" @click="downloadTemp"> 点击下载 </el-button>
|
||||
</el-form-item>
|
||||
<el-form-item label="文件上传 :">
|
||||
<el-upload
|
||||
action="#"
|
||||
class="upload"
|
||||
:drag="true"
|
||||
:limit="excelLimit"
|
||||
:multiple="true"
|
||||
:show-file-list="true"
|
||||
:http-request="uploadExcel"
|
||||
:before-upload="beforeExcelUpload"
|
||||
:on-exceed="handleExceed"
|
||||
:on-success="excelUploadSuccess"
|
||||
:on-error="excelUploadError"
|
||||
:accept="parameter.fileType!.join(',')"
|
||||
>
|
||||
<slot name="empty">
|
||||
<el-icon class="el-icon--upload">
|
||||
<upload-filled />
|
||||
</el-icon>
|
||||
<div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
|
||||
</slot>
|
||||
<template #tip>
|
||||
<slot name="tip">
|
||||
<div class="el-upload__tip">请上传 .xls , .xlsx 标准格式文件,文件最大为 {{ parameter.fileSize }}M</div>
|
||||
<el-dialog v-model="dialogVisible" :title="`批量添加${parameter.title}`" :destroy-on-close="true" width="520px" draggable>
|
||||
<el-form class="drawer-multiColumn-form" label-width="100px">
|
||||
<!-- <el-form-item label="模板下载 :">
|
||||
<el-button type="primary" :icon="Download" @click="downloadTemp"> 点击下载 </el-button>
|
||||
</el-form-item> -->
|
||||
<el-form-item label="文件上传 :">
|
||||
<el-upload
|
||||
action="#"
|
||||
class="upload"
|
||||
:drag="true"
|
||||
:limit="excelLimit"
|
||||
:multiple="true"
|
||||
:show-file-list="true"
|
||||
:http-request="uploadExcel"
|
||||
:before-upload="beforeExcelUpload"
|
||||
:on-exceed="handleExceed"
|
||||
:on-success="excelUploadSuccess"
|
||||
:on-error="excelUploadError"
|
||||
:accept="parameter.fileType!.join(',')"
|
||||
>
|
||||
<slot name="empty">
|
||||
<el-icon class="el-icon--upload">
|
||||
<upload-filled />
|
||||
</el-icon>
|
||||
<div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
|
||||
</slot>
|
||||
</template>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
<el-form-item style="display: none" label="数据覆盖 :">
|
||||
<el-switch v-model="isCover" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<!-- </el-dialog> -->
|
||||
<template #tip>
|
||||
<slot name="tip">
|
||||
<div class="el-upload__tip">
|
||||
请上传 .xls , .xlsx 标准格式文件,文件最大为 {{ parameter.fileSize }}M
|
||||
</div>
|
||||
</slot>
|
||||
</template>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
<el-form-item style="display: none" label="数据覆盖 :">
|
||||
<el-switch v-model="isCover" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="ImportExcel">
|
||||
@@ -66,7 +68,7 @@ const dialogVisible = ref(false);
|
||||
const parameter = ref<ExcelParameterProps>({
|
||||
type: 0,
|
||||
title: "",
|
||||
fileSize: 10,
|
||||
fileSize: 5,
|
||||
fileType: ["application/vnd.ms-excel", "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"]
|
||||
});
|
||||
|
||||
@@ -74,21 +76,29 @@ const parameter = ref<ExcelParameterProps>({
|
||||
const acceptParams = (params: ExcelParameterProps) => {
|
||||
parameter.value = { ...parameter.value, ...params };
|
||||
dialogVisible.value = true;
|
||||
// dialogVisible.value = false;
|
||||
};
|
||||
|
||||
const emit = defineEmits(["uploadTemplateExcel", "downloadMbTemp"]);
|
||||
// const emit = defineEmits(["uploadTemplateExcel"]);
|
||||
const emit = defineEmits(["uploadTemplateExcel"]);
|
||||
|
||||
// Excel 导入模板下载
|
||||
const downloadTemp = () => {
|
||||
emit("downloadMbTemp");
|
||||
if (!parameter.value.tempApi) return;
|
||||
const params = { type: parameter.value.type };
|
||||
useDownload(parameter.value.tempApi, `${parameter.value.title}模板`, params);
|
||||
};
|
||||
const uploadExcel = async (param: any) => {
|
||||
// console.log(param, "上传文件");
|
||||
emit("uploadTemplateExcel", param);
|
||||
console.log(param, "上传文件");
|
||||
|
||||
|
||||
let excelFormData = new FormData();
|
||||
excelFormData.append("excel_file", param.file);
|
||||
await parameter.value.importApi!(excelFormData);
|
||||
// ElMessage.success({ message: `上传成功!` });
|
||||
dialogVisible.value = false;
|
||||
// parameter.value.getTableList!();
|
||||
|
||||
// emit("uploadTemplateExcel", param);
|
||||
};
|
||||
|
||||
// 文件上传
|
||||
@@ -113,16 +123,14 @@ const beforeExcelUpload = (file: UploadRawFile) => {
|
||||
ElNotification({
|
||||
title: "温馨提示",
|
||||
message: "上传文件只能是 xls / xlsx 格式!",
|
||||
type: "warning",
|
||||
customClass: "my-custom-class"
|
||||
type: "warning"
|
||||
});
|
||||
if (!fileSize)
|
||||
setTimeout(() => {
|
||||
ElNotification({
|
||||
title: "温馨提示",
|
||||
message: `上传文件大小不能超过 ${parameter.value.fileSize}MB!`,
|
||||
type: "warning",
|
||||
customClass: "my-custom-class"
|
||||
type: "warning"
|
||||
});
|
||||
}, 0);
|
||||
return isExcel && fileSize;
|
||||
@@ -133,8 +141,7 @@ const handleExceed = () => {
|
||||
ElNotification({
|
||||
title: "温馨提示",
|
||||
message: "最多只能上传一个文件!",
|
||||
type: "warning",
|
||||
customClass: "my-custom-class"
|
||||
type: "warning"
|
||||
});
|
||||
};
|
||||
|
||||
@@ -143,8 +150,7 @@ const excelUploadError = () => {
|
||||
ElNotification({
|
||||
title: "温馨提示",
|
||||
message: `批量添加${parameter.value.title}失败,请您重新上传!`,
|
||||
type: "error",
|
||||
customClass: "my-custom-class"
|
||||
type: "error"
|
||||
});
|
||||
};
|
||||
|
||||
@@ -153,8 +159,7 @@ const excelUploadSuccess = () => {
|
||||
ElNotification({
|
||||
title: "温馨提示",
|
||||
message: `上传${parameter.value.title}文件成功!`,
|
||||
type: "success",
|
||||
customClass: "my-custom-class"
|
||||
type: "success"
|
||||
});
|
||||
};
|
||||
|
||||
@@ -166,7 +171,4 @@ defineExpose({
|
||||
.upload {
|
||||
width: 80%;
|
||||
}
|
||||
.my-custom-class {
|
||||
z-index: 99999999;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -181,7 +181,7 @@ const columns = reactive<ColumnProps<NovelList.ResList>[]>([
|
||||
},
|
||||
|
||||
{
|
||||
prop: "n_page_description",
|
||||
prop: "og_description",
|
||||
label: "描述"
|
||||
},
|
||||
// {
|
||||
|
||||
@@ -49,11 +49,11 @@
|
||||
|
||||
|
||||
<div class="c-two-columns">
|
||||
<el-form-item style="width: 50%" label="文字LOGO" prop="d_text_log">
|
||||
<el-input v-model="drawerProps.row.d_text_log" placeholder="请输入文字LOGO" clearable />
|
||||
<el-form-item style="width: 50%" label="文字LOGO" prop="d_text_logo">
|
||||
<el-input v-model="drawerProps.row.d_text_logo" placeholder="请输入文字LOGO" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label-width="120px" style="width: 50%" label="图片LOGO" prop="d_img_log">
|
||||
<el-input v-model="drawerProps.row.d_img_log" placeholder="请输入图片LOGO地址" clearable />
|
||||
<el-form-item label-width="120px" style="width: 50%" label="图片LOGO" prop="d_img_logo">
|
||||
<el-input v-model="drawerProps.row.d_img_logo" placeholder="请输入图片LOGO地址" clearable />
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
@@ -88,7 +88,7 @@
|
||||
v-model="drawerProps.row.d_keywords"
|
||||
maxlength="3650"
|
||||
:rows="2"
|
||||
:placeholder="`请输入站点关键词`"
|
||||
:placeholder="`请输入站点全局通用关键词`"
|
||||
show-word-limit
|
||||
/>
|
||||
<!-- <div>{{ "多个用逗号(,)隔开" }}</div> -->
|
||||
|
||||
0
src/views/site/index.scss
Normal file
0
src/views/site/index.scss
Normal file
@@ -1,14 +1,20 @@
|
||||
<template>
|
||||
<div class="table-box">
|
||||
<ProTable ref="proTable" highlight-current-row :columns="columns" :request-api="getTableList"
|
||||
:data-callback="dataCallback">
|
||||
<ProTable
|
||||
ref="proTable"
|
||||
highlight-current-row
|
||||
:columns="columns"
|
||||
:request-api="getTableList"
|
||||
:data-callback="dataCallback"
|
||||
>
|
||||
<!-- 表格 header 按钮 -->
|
||||
<template #tableHeader="scope">
|
||||
<el-button type="primary" :icon="CirclePlus" @click="openDrawer(true)">新增</el-button>
|
||||
<el-button type="primary" :icon="Upload" @click="batchAdd"> 批量添加 </el-button>
|
||||
<el-button
|
||||
type="danger"
|
||||
:icon="Delete"
|
||||
style="display: none;"
|
||||
style="display: none"
|
||||
plain
|
||||
:disabled="!scope.isSelected"
|
||||
@click="batchDelete(scope.selectedList)"
|
||||
@@ -59,6 +65,7 @@
|
||||
</template>
|
||||
</ProTable>
|
||||
<Drawer ref="drawerRef" />
|
||||
<ImportExcel ref="importRef" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -67,15 +74,28 @@ import { reactive, ref } from "vue";
|
||||
import { SiteList } from "@/api/interface/site/list";
|
||||
import { useHandleData } from "@/hooks/useHandleData";
|
||||
import ProTable from "@/components/ProTable/index.vue";
|
||||
import { Delete, EditPen, CirclePlus, Refresh } from "@element-plus/icons-vue";
|
||||
import { Delete, EditPen, CirclePlus,Upload, Refresh } from "@element-plus/icons-vue";
|
||||
import { ProTableInstance, ColumnProps } from "@/components/ProTable/interface";
|
||||
import { getList, saveData, uploadData,deleteItem, buildItem, landingItem } from "@/api/modules/site/list";
|
||||
import { getList, saveData, uploadExcel,deleteItem, buildItem, landingItem } from "@/api/modules/site/list";
|
||||
import { getAllList } from "@/api/modules/site/template";
|
||||
import Drawer from "./drawer.vue";
|
||||
import { arrColorType } from "@/utils/serviceDict";
|
||||
import ImportExcel from "@/components/ImportExcel/index.vue";
|
||||
|
||||
// import { exportUserInfo, BatchAddUser } from "@/api/modules/user";
|
||||
// ProTable 实例
|
||||
const proTable = ref<ProTableInstance>();
|
||||
|
||||
const importRef = ref();
|
||||
const batchAdd = () => {
|
||||
let params = {
|
||||
title: "站点",
|
||||
tempApi: '',
|
||||
importApi: uploadExcel,
|
||||
getTableList: proTable.value?.getTableList
|
||||
};
|
||||
importRef.value.acceptParams(params);
|
||||
};
|
||||
|
||||
const initParam = reactive({
|
||||
limit: 15,
|
||||
@@ -132,7 +152,7 @@ const columns = reactive<ColumnProps<SiteList.ResList>[]>([
|
||||
label: "站点名称"
|
||||
},
|
||||
{
|
||||
prop: "d_text_log",
|
||||
prop: "d_text_logo",
|
||||
width: 170,
|
||||
label: "文字logo"
|
||||
},
|
||||
@@ -200,7 +220,7 @@ const columns = reactive<ColumnProps<SiteList.ResList>[]>([
|
||||
],
|
||||
},
|
||||
{
|
||||
prop: "d_img_log",
|
||||
prop: "d_img_logo",
|
||||
label: "图片LOGO",
|
||||
width: 120,
|
||||
render(scope) {
|
||||
@@ -248,7 +268,6 @@ const batchDelete = async (id: any[]) => {
|
||||
};
|
||||
// 打开 drawer(新增、编辑)
|
||||
const drawerRef = ref<InstanceType<typeof Drawer> | null>(null);
|
||||
|
||||
const openDrawer = (isEdit: boolean, row: Partial<SiteList.ResList> = {}) => {
|
||||
const params = {
|
||||
title: isEdit ? "新增站点" : "编辑站点",
|
||||
|
||||
@@ -137,7 +137,8 @@ const columns = reactive<ColumnProps<SubjectFomartList.ResList>[]>([
|
||||
prop: "sfg_id",
|
||||
label: "替换模板分组",
|
||||
fieldNames: { label: "sfg_name", value: "sfg_id" },
|
||||
enum: getGroupList
|
||||
enum: getGroupList,
|
||||
search: { el: "select", props: { filterable: true } },
|
||||
},
|
||||
|
||||
// { prop: "created_at", label: "添加时间", width: 170 },
|
||||
|
||||
554
src/views/site/uploadDrawer.vue
Normal file
554
src/views/site/uploadDrawer.vue
Normal file
@@ -0,0 +1,554 @@
|
||||
<template>
|
||||
<el-drawer v-model="drawerVisible" :destroy-on-close="true" size="70%" :title="`${drawerProps.title}`">
|
||||
<el-form
|
||||
ref="ruleFormRef"
|
||||
label-width="100px"
|
||||
label-suffix=" :"
|
||||
:rules="rules"
|
||||
:disabled="drawerProps.isView"
|
||||
:model="drawerProps.row"
|
||||
:hide-required-asterisk="drawerProps.isView"
|
||||
>
|
||||
<div class="c-two-columns">
|
||||
|
||||
<el-form-item style="width: 45%" label="视图模板" prop="t_id">
|
||||
<el-select v-model="drawerProps.row.t_id" placeholder="请选择视图模板" clearable @change="handleSelectChange">
|
||||
<el-option v-for="item in templateList" :key="item.t_id" :label="item.t_code" :value="item.t_id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 25%" label="是否转码" prop="d_content_encode">
|
||||
<el-switch
|
||||
v-model="drawerProps.row.d_content_encode"
|
||||
:active-value="0"
|
||||
:inactive-value="1"
|
||||
active-text="否"
|
||||
inactive-text="是"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 30%" label="logo类型" prop="d_logo_type">
|
||||
<!-- :active-value="`${0}`"
|
||||
:inactive-value="`${1}`" -->
|
||||
<el-switch
|
||||
v-model="drawerProps.row.d_logo_type"
|
||||
:active-value="0"
|
||||
:inactive-value="1"
|
||||
active-text="文字"
|
||||
inactive-text="图片"
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="c-two-columns">
|
||||
<el-form-item style="width: 50%" label="站点域名" prop="d_domain">
|
||||
<el-input v-model="drawerProps.row.d_domain" placeholder="请输入站点域名" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 50%" label="站点名称" prop="d_name">
|
||||
<el-input v-model="drawerProps.row.d_name" placeholder="请输入站点名称" clearable />
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="c-two-columns">
|
||||
<el-form-item style="width: 50%" label="文字LOGO" prop="d_text_logo">
|
||||
<el-input v-model="drawerProps.row.d_text_logo" placeholder="请输入文字LOGO" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label-width="120px" style="width: 50%" label="图片LOGO" prop="d_img_logo">
|
||||
<el-input v-model="drawerProps.row.d_img_logo" placeholder="请输入图片LOGO地址" clearable />
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="c-two-columns">
|
||||
<el-form-item style="width: 100%" label="首页title" prop="d_index_title" >
|
||||
<el-input v-model="drawerProps.row.d_index_title" placeholder="请输入首页title" clearable />
|
||||
</el-form-item>
|
||||
|
||||
</div>
|
||||
<div class="c-two-columns">
|
||||
|
||||
<el-form-item style="width: 100%" label="首页keywords" prop="d_index_keywords" label-width="130px!important">
|
||||
<el-input v-model="drawerProps.row.d_index_keywords" placeholder="请输入首页keywords" clearable />
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="c-one-columns">
|
||||
<el-form-item label="首页description" prop="d_index_description" label-width="130px!important">
|
||||
<el-input
|
||||
type="textarea"
|
||||
v-model="drawerProps.row.d_index_description"
|
||||
maxlength="3650"
|
||||
:rows="2"
|
||||
:placeholder="`请输入首页description`"
|
||||
show-word-limit
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="c-two-columns">
|
||||
<el-form-item style="width: 50%" label="站点关键词" prop="d_keywords">
|
||||
<el-input
|
||||
type="textarea"
|
||||
v-model="drawerProps.row.d_keywords"
|
||||
maxlength="3650"
|
||||
:rows="2"
|
||||
:placeholder="`请输入站点全局通用关键词`"
|
||||
show-word-limit
|
||||
/>
|
||||
<!-- <div>{{ "多个用逗号(,)隔开" }}</div> -->
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 50%" label="站点描述" prop="d_description">
|
||||
<el-input
|
||||
type="textarea"
|
||||
v-model="drawerProps.row.d_description"
|
||||
maxlength="3650"
|
||||
:rows="2"
|
||||
:placeholder="`请输入网站公告`"
|
||||
show-word-limit
|
||||
/>
|
||||
<!-- <div>{{ "请输入站点描述" }}</div> -->
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="c-one-columns">
|
||||
<el-form-item label="统计代码" prop="d_statis">
|
||||
<el-input
|
||||
type="textarea"
|
||||
v-model="drawerProps.row.d_statis"
|
||||
maxlength="3650"
|
||||
:rows="5"
|
||||
:placeholder="`请输入统计代码`"
|
||||
show-word-limit
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="c-two-columns">
|
||||
<div v-for="(i, v) in drawerProps.row.t_cfg" :key="v" style="width: 50%">
|
||||
<el-form-item :label="i.description" prop="t_cfg" label-width="260px!important" >
|
||||
<el-select v-model="i.sfg_id" placeholder="请选择替换模板分组" >
|
||||
<el-option v-for="item in subjectFomartGroup" :key="item.sfg_id" :label="item.sfg_name" :value="item.sfg_id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="drawerVisible = false">取消</el-button>
|
||||
<el-button v-show="!drawerProps.isView" type="primary" @click="handleSubmit">确定</el-button>
|
||||
</template>
|
||||
</el-drawer>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="UserDrawer">
|
||||
import { ref, computed } from "vue";
|
||||
import { ElMessage, FormInstance } from "element-plus";
|
||||
import { SiteList } from "@/api/interface/site/list";
|
||||
import { arrColorType } from "@/utils/serviceDict";
|
||||
import { getAllList } from "@/api/modules/site/template";
|
||||
import { getSubjectFomartGroup } from "@/api/modules/site/subject/fomart/group";
|
||||
type Options = {
|
||||
label: string;
|
||||
value: string | number;
|
||||
};
|
||||
|
||||
const templateList = ref();
|
||||
// 获取分组ID列表
|
||||
getAllList().then(res => {
|
||||
templateList.value = res.data.items;
|
||||
});
|
||||
const subjectFomartGroup = ref();
|
||||
// 获取替换分组模板列表
|
||||
getSubjectFomartGroup().then(res => {
|
||||
subjectFomartGroup.value = res.data.items;
|
||||
});
|
||||
|
||||
const actions = ref<any[]>([]);
|
||||
// 添加参数配置
|
||||
const addParams = () => {
|
||||
actions.value.push({
|
||||
name: null,
|
||||
url: null
|
||||
});
|
||||
};
|
||||
const deleteParams = index => {
|
||||
actions.value.splice(index, 1);
|
||||
};
|
||||
|
||||
type Fields = {
|
||||
label: string;
|
||||
prop: string;
|
||||
type: string;
|
||||
value: any;
|
||||
describe?: any;
|
||||
required: boolean;
|
||||
options?: Options[];
|
||||
fieldNames?: { label: string; value: string };
|
||||
};
|
||||
const generateRules = (fields: Fields[]) => {
|
||||
return fields.reduce(
|
||||
(acc, field) => {
|
||||
const { type, required, label, prop } = field;
|
||||
let message = "";
|
||||
if (type === "select") {
|
||||
message = `请选择${label}`;
|
||||
}
|
||||
if (type === "text") {
|
||||
message = `请输入${label}`;
|
||||
}
|
||||
if (type === "textarea") {
|
||||
message = `请输入${label}`;
|
||||
}
|
||||
if (type === "add") {
|
||||
message = `请输入${label}`;
|
||||
}
|
||||
if (type === "textarea-more") {
|
||||
message = `请输入${label}`;
|
||||
}
|
||||
if (type === "text-num") {
|
||||
message = `请输入${label}`;
|
||||
}
|
||||
acc[prop] = [{ required, message }];
|
||||
return acc;
|
||||
},
|
||||
{} as Record<string, any>
|
||||
);
|
||||
};
|
||||
|
||||
const formColumns = computed((): Fields[] => {
|
||||
return [
|
||||
{
|
||||
label: "站点名称",
|
||||
prop: "si_name",
|
||||
type: "text",
|
||||
get value() {
|
||||
return drawerProps.value.row!.si_name;
|
||||
},
|
||||
set value(val) {
|
||||
drawerProps.value.row!.si_name = val;
|
||||
},
|
||||
required: true
|
||||
},
|
||||
{
|
||||
label: "站点编码",
|
||||
prop: "si_code",
|
||||
type: "text",
|
||||
get value() {
|
||||
return drawerProps.value.row!.si_code;
|
||||
},
|
||||
set value(val) {
|
||||
drawerProps.value.row!.si_code = val;
|
||||
},
|
||||
required: true
|
||||
},
|
||||
{
|
||||
label: "站点状态",
|
||||
prop: "si_status",
|
||||
type: "switch",
|
||||
get value() {
|
||||
return String(drawerProps.value.row!.si_status);
|
||||
},
|
||||
set value(val) {
|
||||
drawerProps.value.row!.si_status = val;
|
||||
},
|
||||
required: true
|
||||
},
|
||||
{
|
||||
label: "站点专属影院",
|
||||
prop: "si_cinema",
|
||||
type: "text",
|
||||
get value() {
|
||||
return drawerProps.value.row!.si_cinema;
|
||||
},
|
||||
set value(val) {
|
||||
drawerProps.value.row!.si_cinema = val;
|
||||
},
|
||||
required: false
|
||||
},
|
||||
{
|
||||
label: "站点官方邮箱",
|
||||
prop: "si_email",
|
||||
type: "text",
|
||||
get value() {
|
||||
return drawerProps.value.row!.si_email;
|
||||
},
|
||||
set value(val) {
|
||||
drawerProps.value.row!.si_email = val;
|
||||
},
|
||||
required: false
|
||||
},
|
||||
{
|
||||
label: "找回网址邮箱",
|
||||
prop: "si_retrieve_email",
|
||||
type: "text",
|
||||
get value() {
|
||||
return drawerProps.value.row!.si_retrieve_email;
|
||||
},
|
||||
set value(val) {
|
||||
drawerProps.value.row!.si_retrieve_email = val;
|
||||
},
|
||||
required: false
|
||||
},
|
||||
|
||||
{
|
||||
label: "群聊地址",
|
||||
prop: "si_group_chat_address",
|
||||
type: "text",
|
||||
get value() {
|
||||
return drawerProps.value.row!.si_group_chat_address;
|
||||
},
|
||||
set value(val) {
|
||||
drawerProps.value.row!.si_group_chat_address = val;
|
||||
},
|
||||
required: false
|
||||
},
|
||||
{
|
||||
label: "找回页面",
|
||||
prop: "si_retrieve_page",
|
||||
type: "text",
|
||||
get value() {
|
||||
return drawerProps.value.row!.si_retrieve_page;
|
||||
},
|
||||
set value(val) {
|
||||
drawerProps.value.row!.si_retrieve_page = val;
|
||||
},
|
||||
required: false
|
||||
},
|
||||
{
|
||||
label: "客服地址",
|
||||
prop: "si_customer_service",
|
||||
type: "text",
|
||||
get value() {
|
||||
return drawerProps.value.row!.si_customer_service;
|
||||
},
|
||||
set value(val) {
|
||||
drawerProps.value.row!.si_customer_service = val;
|
||||
},
|
||||
required: false
|
||||
},
|
||||
{
|
||||
label: "站点LOGO",
|
||||
prop: "si_logo",
|
||||
type: "text",
|
||||
get value() {
|
||||
return drawerProps.value.row!.si_logo;
|
||||
},
|
||||
set value(val) {
|
||||
drawerProps.value.row!.si_logo = val;
|
||||
},
|
||||
required: false
|
||||
},
|
||||
{
|
||||
label: "引导页LOGO",
|
||||
prop: "si_logo_url",
|
||||
type: "text",
|
||||
get value() {
|
||||
return drawerProps.value.row!.si_logo_url;
|
||||
},
|
||||
set value(val) {
|
||||
drawerProps.value.row!.si_logo_url = val;
|
||||
},
|
||||
required: false
|
||||
},
|
||||
{
|
||||
label: "静态资源域名",
|
||||
prop: "si_cdn_url",
|
||||
type: "text",
|
||||
get value() {
|
||||
return drawerProps.value.row!.si_cdn_url;
|
||||
},
|
||||
set value(val) {
|
||||
drawerProps.value.row!.si_cdn_url = val;
|
||||
},
|
||||
required: false
|
||||
},
|
||||
{
|
||||
label: "主题模板颜色",
|
||||
prop: "si_template",
|
||||
type: "select",
|
||||
get value() {
|
||||
return drawerProps.value.row!.si_template;
|
||||
},
|
||||
set value(val) {
|
||||
drawerProps.value.row!.si_template = val;
|
||||
},
|
||||
options: arrColorType,
|
||||
fieldNames: { label: "label", value: "value" },
|
||||
required: false
|
||||
},
|
||||
{
|
||||
label: "JENKINS域名",
|
||||
prop: "si_deploy_site_jenkins",
|
||||
type: "text",
|
||||
get value() {
|
||||
return drawerProps.value.row!.si_deploy_site_jenkins;
|
||||
},
|
||||
set value(val) {
|
||||
drawerProps.value.row!.si_deploy_site_jenkins = val;
|
||||
},
|
||||
required: false
|
||||
},
|
||||
{
|
||||
label: "引导页构建",
|
||||
prop: "si_deploy_landing_jenkins",
|
||||
type: "text",
|
||||
get value() {
|
||||
return drawerProps.value.row!.si_deploy_landing_jenkins;
|
||||
},
|
||||
set value(val) {
|
||||
drawerProps.value.row!.si_deploy_landing_jenkins = val;
|
||||
},
|
||||
required: false
|
||||
},
|
||||
{
|
||||
label: "站点专属URL",
|
||||
prop: "si_url",
|
||||
type: "textarea",
|
||||
describe: "多个用逗号(,)隔开",
|
||||
get value() {
|
||||
return drawerProps.value.row!.si_url;
|
||||
},
|
||||
set value(val) {
|
||||
drawerProps.value.row!.si_url = val;
|
||||
},
|
||||
required: true
|
||||
},
|
||||
|
||||
{
|
||||
label: "网站公告",
|
||||
prop: "si_website_bulletin",
|
||||
type: "textarea",
|
||||
get value() {
|
||||
return drawerProps.value.row!.si_website_bulletin;
|
||||
},
|
||||
set value(val) {
|
||||
drawerProps.value.row!.si_website_bulletin = val;
|
||||
},
|
||||
required: false
|
||||
},
|
||||
{
|
||||
label: "引导页线路",
|
||||
prop: "si_route_url",
|
||||
type: "add",
|
||||
get value() {
|
||||
return drawerProps.value.row!.si_route_url;
|
||||
},
|
||||
set value(val) {
|
||||
drawerProps.value.row!.si_route_url = val;
|
||||
},
|
||||
required: true
|
||||
},
|
||||
{
|
||||
label: "统计代码",
|
||||
prop: "si_statistical_code",
|
||||
type: "textarea",
|
||||
get value() {
|
||||
return drawerProps.value.row!.si_statistical_code;
|
||||
},
|
||||
set value(val) {
|
||||
drawerProps.value.row!.si_statistical_code = val;
|
||||
},
|
||||
required: false
|
||||
},
|
||||
{
|
||||
label: "引导页统计代码",
|
||||
prop: "si_guide_statistical_code",
|
||||
type: "textarea-more",
|
||||
get value() {
|
||||
return drawerProps.value.row!.si_guide_statistical_code;
|
||||
},
|
||||
set value(val) {
|
||||
drawerProps.value.row!.si_guide_statistical_code = val;
|
||||
},
|
||||
required: false
|
||||
}
|
||||
];
|
||||
});
|
||||
const rules = ref();
|
||||
|
||||
interface DrawerProps {
|
||||
title: string;
|
||||
isView: boolean;
|
||||
row: Partial<SiteList.ResList>;
|
||||
api?: (params: any) => Promise<any>;
|
||||
getTableList?: () => void;
|
||||
}
|
||||
|
||||
const drawerVisible = ref(false);
|
||||
const drawerProps = ref<DrawerProps>({
|
||||
isView: false,
|
||||
title: "",
|
||||
row: {}
|
||||
});
|
||||
|
||||
// 接收父组件传过来的参数
|
||||
const acceptParams = (params: DrawerProps) => {
|
||||
drawerProps.value = params;
|
||||
rules.value = generateRules(formColumns.value);
|
||||
drawerVisible.value = true;
|
||||
actions.value = [];
|
||||
// if (drawerProps.value.title === "新增站点") {
|
||||
// drawerProps.value.row!.si_status = String(1);
|
||||
// } else {
|
||||
// drawerProps.value.row!.si_status = String(drawerProps.value.row!.si_status);
|
||||
// }
|
||||
// if (drawerProps.value.row.si_route_url) {
|
||||
// actions.value = drawerProps.value.row.si_route_url;
|
||||
// }
|
||||
};
|
||||
const handleSelectChange = (value) => {
|
||||
console.log("选中的模板 ID:", value);
|
||||
const matchedTemplate = templateList.value.find(item => item.t_id === value);
|
||||
// console.log(matchedTemplate.t_cfg_template)
|
||||
drawerProps.value.row.t_cfg = matchedTemplate.t_cfg_template
|
||||
}
|
||||
|
||||
|
||||
// 提交数据(新增/编辑)
|
||||
const ruleFormRef = ref<FormInstance>();
|
||||
const handleSubmit = () => {
|
||||
// drawerProps.value.row.si_route_url = actions.value;
|
||||
ruleFormRef.value!.validate(async valid => {
|
||||
if (!valid) return;
|
||||
try {
|
||||
const params = { ...drawerProps.value.row };
|
||||
// console.log(params)
|
||||
// console.log(params.t_id)
|
||||
// console.log(templateList.value)
|
||||
// const matchedTemplate = templateList.value.find(item => item.t_id === params.t_id);
|
||||
// console.log(matchedTemplate)
|
||||
// console.log(matchedTemplate.t_cfg_template)
|
||||
|
||||
console.log(params.t_cfg)
|
||||
await drawerProps.value.api!(params);
|
||||
ElMessage.success({ message: `${drawerProps.value.title}成功!` });
|
||||
drawerProps.value.getTableList!();
|
||||
drawerVisible.value = false;
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
defineExpose({
|
||||
acceptParams
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.paramsClass {
|
||||
width: 47%;
|
||||
padding: 10px;
|
||||
margin-top: 10px;
|
||||
margin-right: 1%;
|
||||
border: 1px solid black;
|
||||
box-shadow: 0 0 4px 2px rgb(0 0 0 / 90%);
|
||||
}
|
||||
.paramsClass .el-form-item__label {
|
||||
width: 50px !important;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.c-two-columns {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
@@ -1,113 +0,0 @@
|
||||
<template>
|
||||
<div class="table-box">
|
||||
<ProTable
|
||||
ref="proTable"
|
||||
highlight-current-row
|
||||
:columns="columns"
|
||||
:request-api="getTableList"
|
||||
:data-callback="dataCallback"
|
||||
row-key="id"
|
||||
:indent="20"
|
||||
:search-col="{ xs: 1, sm: 1, md: 2, lg: 3, xl: 3 }"
|
||||
>
|
||||
</ProTable>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="tsx" name="complexProTable">
|
||||
import { reactive, ref } from "vue";
|
||||
import { nvYouList } from "@/api/interface/video/nvyou";
|
||||
import ProTable from "@/components/ProTable/index.vue";
|
||||
import { ProTableInstance, ColumnProps } from "@/components/ProTable/interface";
|
||||
import { getList } from "@/api/modules/video/nvyou";
|
||||
import { h } from "vue";
|
||||
import { AsyncImageComponent } from "@/utils/decrypt";
|
||||
// ProTable 实例
|
||||
const proTable = ref<ProTableInstance>();
|
||||
|
||||
const initParam = reactive({
|
||||
limit: 15,
|
||||
page: 1
|
||||
});
|
||||
|
||||
const dataCallback = (data: any) => {
|
||||
return {
|
||||
items: data.items,
|
||||
total: data.total,
|
||||
total_page: data.total_pages,
|
||||
page: initParam.page,
|
||||
limit: initParam.limit
|
||||
};
|
||||
};
|
||||
|
||||
const getTableList = (params: any) => {
|
||||
let newParams = JSON.parse(JSON.stringify(params));
|
||||
initParam.page = newParams.page;
|
||||
initParam.limit = newParams.limit;
|
||||
return getList(newParams);
|
||||
};
|
||||
|
||||
// 表格配置项
|
||||
const columns = reactive<ColumnProps<nvYouList.ResList>[]>([
|
||||
{ type: "selection", fixed: "left", width: 50 },
|
||||
{
|
||||
prop: "key",
|
||||
label: "搜索内容",
|
||||
isShow: false,
|
||||
search: {
|
||||
el: "input"
|
||||
}
|
||||
},
|
||||
{
|
||||
prop: "ny_id",
|
||||
label: "ID",
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
prop: "ny_name",
|
||||
label: "名称"
|
||||
},
|
||||
{
|
||||
prop: "ny_pinyin",
|
||||
label: "拼音"
|
||||
},
|
||||
{
|
||||
prop: "ny_cover_url",
|
||||
label: "女优封面",
|
||||
width: 120,
|
||||
render(scope) {
|
||||
return h(AsyncImageComponent, { url: scope.row.ny_cover_url });
|
||||
}
|
||||
},
|
||||
{
|
||||
prop: "ny_zhaobei",
|
||||
label: "罩杯"
|
||||
},
|
||||
{
|
||||
prop: "ny_yaowei",
|
||||
label: "腰围"
|
||||
},
|
||||
{
|
||||
prop: "ny_biwei",
|
||||
label: "臂围"
|
||||
},
|
||||
{
|
||||
prop: "ny_shengao",
|
||||
label: "身高"
|
||||
},
|
||||
{
|
||||
prop: "ny_chushengriqi",
|
||||
label: "出生"
|
||||
},
|
||||
{
|
||||
prop: "ny_chudaonianfen",
|
||||
label: "出道"
|
||||
},
|
||||
|
||||
{
|
||||
prop: "ny_jieshao",
|
||||
label: "描述",
|
||||
width: 250
|
||||
}
|
||||
]);
|
||||
</script>
|
||||
Reference in New Issue
Block a user