555 lines
18 KiB
Vue
555 lines
18 KiB
Vue
<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_log">
|
|
<el-input v-model="drawerProps.row.d_text_log" 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>
|
|
</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>
|