This commit is contained in:
make
2025-04-12 15:14:45 +08:00
parent 4a1ead3340
commit a1c507eaf1
11 changed files with 706 additions and 232 deletions

View File

@@ -181,7 +181,7 @@ const columns = reactive<ColumnProps<NovelList.ResList>[]>([
},
{
prop: "n_page_description",
prop: "og_description",
label: "描述"
},
// {

View File

@@ -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> -->

View File

View 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,16 +74,29 @@ 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,
page: 1
@@ -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 ? "新增站点" : "编辑站点",

View File

@@ -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 },

View 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>

View File

@@ -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>