first
This commit is contained in:
make
554
src/views/site/drawer.vue
Normal file
554
src/views/site/drawer.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_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>
|
||||
301
src/views/site/index.vue
Normal file
301
src/views/site/index.vue
Normal file
@@ -0,0 +1,301 @@
|
||||
<template>
|
||||
<div class="table-box">
|
||||
<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="danger"
|
||||
:icon="Delete"
|
||||
style="display: none;"
|
||||
plain
|
||||
:disabled="!scope.isSelected"
|
||||
@click="batchDelete(scope.selectedList)"
|
||||
>
|
||||
批量删除站点
|
||||
</el-button>
|
||||
</template>
|
||||
<!-- 表格操作 -->
|
||||
<template #operation="scope">
|
||||
<div class="c-right-pad">
|
||||
<div>
|
||||
<el-button
|
||||
type="success"
|
||||
style="width: 72px"
|
||||
v-if="scope.row.si_deploy_site_jenkins?.length > 0"
|
||||
link
|
||||
:icon="Refresh"
|
||||
@click="structureDrawer(scope.row)"
|
||||
>
|
||||
H5构建
|
||||
</el-button>
|
||||
<el-button
|
||||
v-if="scope.row.si_deploy_site_jenkins?.length == 0"
|
||||
style="width: 72px; background: none; border: none"
|
||||
>--
|
||||
</el-button>
|
||||
<el-button type="primary" link :icon="EditPen" @click="openDrawer(false, scope.row)">编辑</el-button>
|
||||
</div>
|
||||
<div>
|
||||
<el-button
|
||||
type="success"
|
||||
style="width: 72px"
|
||||
v-if="scope.row.si_deploy_landing_jenkins?.length > 0"
|
||||
link
|
||||
:icon="Refresh"
|
||||
@click="landingDrawer(scope.row)"
|
||||
>
|
||||
引导页
|
||||
</el-button>
|
||||
<el-button
|
||||
v-if="scope.row.si_deploy_landing_jenkins?.length == 0"
|
||||
style="width: 72px; background: none; border: none"
|
||||
>--
|
||||
</el-button>
|
||||
<!-- <el-button type="danger" link :icon="Delete" @click="deleteAccount(scope.row)">删除</el-button> -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</ProTable>
|
||||
<Drawer ref="drawerRef" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="tsx" name="complexProTable">
|
||||
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 { ProTableInstance, ColumnProps } from "@/components/ProTable/interface";
|
||||
import { getList, saveData, uploadData,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";
|
||||
// ProTable 实例
|
||||
const proTable = ref<ProTableInstance>();
|
||||
|
||||
|
||||
const initParam = reactive({
|
||||
limit: 15,
|
||||
page: 1
|
||||
});
|
||||
|
||||
const dataCallback = (data: any) => {
|
||||
// 转换为数组
|
||||
const arr = data.items;
|
||||
return {
|
||||
items: arr,
|
||||
total: data.total,
|
||||
total_page: 1,
|
||||
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 getTempLateList = ref([] as any);
|
||||
getAllList().then(res => {
|
||||
|
||||
getTempLateList.value = res.data.items;
|
||||
});
|
||||
|
||||
|
||||
// 表格配置项
|
||||
const columns = reactive<ColumnProps<SiteList.ResList>[]>([
|
||||
// { type: "selection", fixed: "left", width: 50 },
|
||||
{
|
||||
prop: "key",
|
||||
label: "搜索内容",
|
||||
isShow: false,
|
||||
search: {
|
||||
el: "input"
|
||||
}
|
||||
},
|
||||
{
|
||||
prop: "d_id",
|
||||
label: "ID",
|
||||
width: 100
|
||||
},
|
||||
|
||||
|
||||
|
||||
|
||||
{
|
||||
prop: "d_name",
|
||||
width: 170,
|
||||
label: "站点名称"
|
||||
},
|
||||
{
|
||||
prop: "d_domain",
|
||||
width: 170,
|
||||
label: "站点域名"
|
||||
},
|
||||
{
|
||||
prop: "d_content_encode",
|
||||
width: 170,
|
||||
label: "是否转码",
|
||||
enum: [
|
||||
{ label: "否", value: 0 },
|
||||
{ label: "是", value: 1 }
|
||||
],
|
||||
},
|
||||
{
|
||||
prop: "d_logo_type",
|
||||
width: 170,
|
||||
label: "logo类型",
|
||||
enum: [
|
||||
{ label: "文字", value: 0 },
|
||||
{ label: "图片", value: 1 }
|
||||
],
|
||||
},
|
||||
{
|
||||
prop: "d_text_log",
|
||||
width: 170,
|
||||
label: "文字logo"
|
||||
},
|
||||
{
|
||||
prop: "t_id",
|
||||
width: 170,
|
||||
label: "绑定模板",
|
||||
fieldNames: { label: "t_code", value: "t_id" },
|
||||
enum: getTempLateList
|
||||
},
|
||||
{
|
||||
prop: "t_cfg",
|
||||
width: 170,
|
||||
label: "模板配置",
|
||||
render(scope) {
|
||||
return JSON.stringify(scope.row.t_cfg);
|
||||
}
|
||||
},
|
||||
|
||||
// {
|
||||
// prop: "si_status",
|
||||
// label: "状态",
|
||||
// search: { el: "select", props: { filterable: true } },
|
||||
// enum: [
|
||||
// { label: "禁用", value: 0 },
|
||||
// { label: "启用", value: 1 }
|
||||
// ],
|
||||
// render(scope) {
|
||||
// return (
|
||||
// <el-tag type={scope.row.si_status === 0 ? "danger" : "success"}>
|
||||
// {scope.row.si_status === 0 ? "禁用" : "启用"}
|
||||
// </el-tag>
|
||||
// );
|
||||
// }
|
||||
// },
|
||||
{
|
||||
prop: "d_img_log",
|
||||
label: "图片LOGO",
|
||||
width: 120,
|
||||
render(scope) {
|
||||
if (scope.row.si_logo) {
|
||||
const data = scope.row.si_logo;
|
||||
const modifiedArray = [] as any;
|
||||
modifiedArray.push(data);
|
||||
return (
|
||||
<el-image
|
||||
style="width: 100%; "
|
||||
src={modifiedArray[0]}
|
||||
preview-src-list={modifiedArray}
|
||||
hide-on-click-modal={true}
|
||||
z-index={999999999}
|
||||
preview-teleported={true}
|
||||
fit="fill"
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
prop: "d_description",
|
||||
width: 170,
|
||||
label: "站点描述"
|
||||
},
|
||||
{
|
||||
prop: "d_keywords",
|
||||
width: 170,
|
||||
label: "站点关键词"
|
||||
},
|
||||
{
|
||||
prop: "d_statis",
|
||||
width: 170,
|
||||
label: "统计代码"
|
||||
},
|
||||
{ prop: "created_at", label: "添加时间", width: 170 },
|
||||
{ prop: "operation", label: "操作", fixed: "right", width: 165 }
|
||||
]);
|
||||
|
||||
// 删除站点信息
|
||||
const deleteAccount = async (params: SiteList.ResList) => {
|
||||
await useHandleData(deleteItem, { si_id: params.si_id }, "删除所选信息");
|
||||
proTable.value?.getTableList();
|
||||
};
|
||||
|
||||
// 批量删除站点信息
|
||||
const batchDelete = async (id: any[]) => {
|
||||
const ids = id.map((item: SiteList.ResList) => item.si_id);
|
||||
await useHandleData(deleteItem, { si_id: ids.join(",") }, "删除所选信息");
|
||||
proTable.value?.clearSelection();
|
||||
proTable.value?.getTableList();
|
||||
};
|
||||
// 打开 drawer(新增、编辑)
|
||||
const drawerRef = ref<InstanceType<typeof Drawer> | null>(null);
|
||||
|
||||
const openDrawer = (isEdit: boolean, row: Partial<SiteList.ResList> = {}) => {
|
||||
const params = {
|
||||
title: isEdit ? "新增站点" : "编辑站点",
|
||||
row: { ...row },
|
||||
api: saveData,
|
||||
getTableList: proTable.value?.getTableList
|
||||
};
|
||||
drawerRef.value?.acceptParams(params as any);
|
||||
};
|
||||
|
||||
//构建站点
|
||||
const structureDrawer = async (params: SiteList.ResList) => {
|
||||
await useHandleData(buildItem, { si_id: params.si_id }, "对此站点项目进行构建?", "后台正在打包中，请3分钟后查看H5前端站点！");
|
||||
proTable.value?.getTableList();
|
||||
};
|
||||
// 引导页
|
||||
const landingDrawer = async (params: SiteList.ResList) => {
|
||||
await useHandleData(
|
||||
landingItem,
|
||||
{ si_id: params.si_id },
|
||||
"对此站点项目进行构建?",
|
||||
"后台正在打包中，请3分钟后查看引导页前端站点！"
|
||||
);
|
||||
proTable.value?.getTableList();
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.el-table .warning-row,
|
||||
.el-table .warning-row .el-table-fixed-column--right,
|
||||
.el-table .warning-row .el-table-fixed-column--left {
|
||||
background-color: var(--el-color-warning-light-9);
|
||||
}
|
||||
.el-table .success-row,
|
||||
.el-table .success-row .el-table-fixed-column--right,
|
||||
.el-table .success-row .el-table-fixed-column--left {
|
||||
background-color: var(--el-color-success-light-9);
|
||||
}
|
||||
.tagTextColor {
|
||||
// color: red;
|
||||
border: none;
|
||||
}
|
||||
.c-right-pad .el-table--default .cell {
|
||||
padding: 0 5px !important;
|
||||
}
|
||||
</style>
|
||||
172
src/views/site/subject/fomart/group/drawer.vue
Normal file
172
src/views/site/subject/fomart/group/drawer.vue
Normal file
@@ -0,0 +1,172 @@
|
||||
<template>
|
||||
<el-drawer v-model="drawerVisible" :destroy-on-close="true" size="50%" :title="`${drawerProps.title}参数配置`">
|
||||
<el-form
|
||||
ref="ruleFormRef"
|
||||
label-width="150px"
|
||||
label-suffix=" :"
|
||||
:rules="rules"
|
||||
:disabled="drawerProps.isView"
|
||||
:model="drawerProps.row"
|
||||
:hide-required-asterisk="drawerProps.isView"
|
||||
>
|
||||
<el-form-item v-for="e in formColumns" :key="e.label" :label="e.label" :prop="e.prop" :required="e.required">
|
||||
<template v-if="e.type === 'switch'">
|
||||
<el-switch v-model="e.value" />
|
||||
</template>
|
||||
<template v-if="e.type === 'select'">
|
||||
<el-select v-model="e.value" :placeholder="`请选择${e.label}`" clearable>
|
||||
<el-option v-for="item in e.options" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</template>
|
||||
<template v-if="e.type === 'text'">
|
||||
<el-input v-model="e.value" :disabled="e.disabled" :placeholder="`请输入${e.label}`" clearable></el-input>
|
||||
</template>
|
||||
<template v-if="e.type === 'text-tarea'">
|
||||
<el-input v-model="e.value" :rows="5" type="textarea" :placeholder="`请输入${e.label}`" clearable></el-input>
|
||||
</template>
|
||||
<template v-if="e.type === 'textarea'">
|
||||
<el-input
|
||||
type="textarea"
|
||||
v-model="e.value"
|
||||
maxlength="365"
|
||||
:placeholder="`请输入${e.label}`"
|
||||
show-word-limit
|
||||
/>
|
||||
</template>
|
||||
</el-form-item>
|
||||
</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 { GroupList } from "@/api/interface/site/subject/fomart/group";
|
||||
|
||||
type Options = {
|
||||
label: string;
|
||||
value: string | number;
|
||||
};
|
||||
|
||||
type Fields = {
|
||||
label: string;
|
||||
prop: string;
|
||||
type: string;
|
||||
value: any;
|
||||
required: boolean;
|
||||
options?: Options[];
|
||||
disabled?: boolean;
|
||||
};
|
||||
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 === "text-tarea") {
|
||||
message = `请输入${label}`;
|
||||
}
|
||||
acc[prop] = [{ required, message }];
|
||||
return acc;
|
||||
}, {} as Record<string, any>);
|
||||
};
|
||||
|
||||
const formColumns = computed((): Fields[] => {
|
||||
return [
|
||||
{
|
||||
label: "替换模板分组id",
|
||||
prop: "sfg_id",
|
||||
type: "text",
|
||||
disabled: drawerProps.value.title === "编辑" ? true : false,
|
||||
get value() {
|
||||
return drawerProps.value.row!.sfg_id;
|
||||
},
|
||||
set value(val) {
|
||||
drawerProps.value.row!.sfg_id = val;
|
||||
},
|
||||
required: false
|
||||
},
|
||||
{
|
||||
label: "替换模板分组名字",
|
||||
prop: "sfg_name",
|
||||
type: "text-tarea",
|
||||
get value() {
|
||||
return drawerProps.value.row!.sfg_name;
|
||||
},
|
||||
set value(val) {
|
||||
drawerProps.value.row!.sfg_name = val;
|
||||
},
|
||||
required: false
|
||||
},
|
||||
{
|
||||
label: "替换模板分组描述",
|
||||
prop: "sfg_description",
|
||||
type: "text-tarea",
|
||||
// disabled: true,
|
||||
get value() {
|
||||
return drawerProps.value.row!.sfg_description;
|
||||
},
|
||||
set value(val) {
|
||||
drawerProps.value.row!.sfg_description = val;
|
||||
},
|
||||
required: false
|
||||
}
|
||||
];
|
||||
});
|
||||
const rules = ref();
|
||||
|
||||
interface DrawerProps {
|
||||
title: string;
|
||||
isView: boolean;
|
||||
row: Partial<GroupList.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;
|
||||
if (drawerProps.value.title === "编辑") {
|
||||
console.log(rules.value["sfg_id"]);
|
||||
// rules.value["sfg_id"]["disabled"] = true;
|
||||
// console.log(rules.value["sfg_id"]);
|
||||
}
|
||||
};
|
||||
|
||||
// 提交数据（新增/编辑）
|
||||
const ruleFormRef = ref<FormInstance>();
|
||||
const handleSubmit = () => {
|
||||
ruleFormRef.value!.validate(async valid => {
|
||||
if (!valid) return;
|
||||
try {
|
||||
await drawerProps.value.api!(drawerProps.value.row);
|
||||
ElMessage.success({ message: `${drawerProps.value.title}成功！` });
|
||||
drawerProps.value.getTableList!();
|
||||
drawerVisible.value = false;
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
defineExpose({
|
||||
acceptParams
|
||||
});
|
||||
</script>
|
||||
183
src/views/site/subject/fomart/group/list.vue
Normal file
183
src/views/site/subject/fomart/group/list.vue
Normal file
@@ -0,0 +1,183 @@
|
||||
<template>
|
||||
<div class="table-box">
|
||||
<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="danger"
|
||||
style="display: none;"
|
||||
:icon="Delete"
|
||||
plain
|
||||
:disabled="!scope.isSelected"
|
||||
@click="batchDelete(scope.selectedList)"
|
||||
>
|
||||
批量删除站点
|
||||
</el-button>
|
||||
</template>
|
||||
<!-- 表格操作 -->
|
||||
<template #operation="scope">
|
||||
<div class="c-right-pad">
|
||||
<div>
|
||||
<el-button
|
||||
type="success"
|
||||
style="width: 72px"
|
||||
v-if="scope.row.si_deploy_site_jenkins?.length > 0"
|
||||
link
|
||||
:icon="Refresh"
|
||||
@click="structureDrawer(scope.row)"
|
||||
>
|
||||
H5构建
|
||||
</el-button>
|
||||
<el-button
|
||||
v-if="scope.row.si_deploy_site_jenkins?.length == 0"
|
||||
style="width: 72px; background: none; border: none"
|
||||
>--
|
||||
</el-button>
|
||||
<el-button type="primary" link :icon="EditPen" @click="openDrawer(false, scope.row)">编辑</el-button>
|
||||
</div>
|
||||
<div>
|
||||
<el-button
|
||||
type="success"
|
||||
style="width: 72px"
|
||||
v-if="scope.row.si_deploy_landing_jenkins?.length > 0"
|
||||
link
|
||||
:icon="Refresh"
|
||||
@click="landingDrawer(scope.row)"
|
||||
>
|
||||
引导页
|
||||
</el-button>
|
||||
<el-button
|
||||
v-if="scope.row.si_deploy_landing_jenkins?.length == 0"
|
||||
style="width: 72px; background: none; border: none"
|
||||
>--
|
||||
</el-button>
|
||||
<el-button type="danger" link :icon="Delete" @click="deleteAccount(scope.row)">删除</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</ProTable>
|
||||
<Drawer ref="drawerRef" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="tsx" name="complexProTable">
|
||||
import { reactive, ref } from "vue";
|
||||
import { GroupList } from "@/api/interface/site/subject/fomart/group";
|
||||
import { useHandleData } from "@/hooks/useHandleData";
|
||||
import ProTable from "@/components/ProTable/index.vue";
|
||||
import { Delete, EditPen, CirclePlus, Refresh } from "@element-plus/icons-vue";
|
||||
import { ProTableInstance, ColumnProps } from "@/components/ProTable/interface";
|
||||
import { getList, saveData, deleteItem } from "@/api/modules/site/subject/fomart/group";
|
||||
import Drawer from "./drawer.vue";
|
||||
import { arrColorType } from "@/utils/serviceDict";
|
||||
// ProTable 实例
|
||||
const proTable = ref<ProTableInstance>();
|
||||
|
||||
|
||||
const initParam = reactive({
|
||||
limit: 15,
|
||||
page: 1
|
||||
});
|
||||
|
||||
const dataCallback = (data: any) => {
|
||||
// 转换为数组
|
||||
const arr = data.items;
|
||||
return {
|
||||
items: arr,
|
||||
total: data.total,
|
||||
total_page: 1,
|
||||
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<GroupList.ResList>[]>([
|
||||
{ type: "selection", fixed: "left", width: 50 },
|
||||
{
|
||||
prop: "key",
|
||||
label: "搜索内容",
|
||||
isShow: false,
|
||||
search: {
|
||||
el: "input"
|
||||
}
|
||||
},
|
||||
{
|
||||
prop: "sfg_id",
|
||||
label: "替换模板分组ID",
|
||||
width: 200
|
||||
},
|
||||
{
|
||||
prop: "sfg_name",
|
||||
label: "替换模板分组名字"
|
||||
},
|
||||
{
|
||||
prop: "sfg_description",
|
||||
label: "替换模板分组描述"
|
||||
},
|
||||
|
||||
// { prop: "created_at", label: "添加时间", width: 170 },
|
||||
{ prop: "operation", label: "操作", fixed: "right", width: 165 }
|
||||
]);
|
||||
|
||||
// 删除站点信息
|
||||
const deleteAccount = async (params: GroupList.ResList) => {
|
||||
await useHandleData(deleteItem, { sfg_id: String(params.sfg_id) }, "删除所选信息");
|
||||
proTable.value?.getTableList();
|
||||
};
|
||||
|
||||
// 批量删除站点信息
|
||||
const batchDelete = async (id: any[]) => {
|
||||
const ids = id.map((item: GroupList.ResList) => item.sfg_id);
|
||||
await useHandleData(deleteItem, { sfg_id: ids.join(",") }, "删除所选信息");
|
||||
proTable.value?.clearSelection();
|
||||
proTable.value?.getTableList();
|
||||
};
|
||||
// 打开 drawer(新增、编辑)
|
||||
const drawerRef = ref<InstanceType<typeof Drawer> | null>(null);
|
||||
|
||||
const openDrawer = (isEdit: boolean, row: Partial<GroupList.ResList> = {}) => {
|
||||
const params = {
|
||||
title: isEdit ? "新增" : "编辑",
|
||||
row: { ...row },
|
||||
api: saveData,
|
||||
getTableList: proTable.value?.getTableList
|
||||
};
|
||||
drawerRef.value?.acceptParams(params as any);
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.el-table .warning-row,
|
||||
.el-table .warning-row .el-table-fixed-column--right,
|
||||
.el-table .warning-row .el-table-fixed-column--left {
|
||||
background-color: var(--el-color-warning-light-9);
|
||||
}
|
||||
.el-table .success-row,
|
||||
.el-table .success-row .el-table-fixed-column--right,
|
||||
.el-table .success-row .el-table-fixed-column--left {
|
||||
background-color: var(--el-color-success-light-9);
|
||||
}
|
||||
.tagTextColor {
|
||||
// color: red;
|
||||
border: none;
|
||||
}
|
||||
.c-right-pad .el-table--default .cell {
|
||||
padding: 0 5px !important;
|
||||
}
|
||||
</style>
|
||||
198
src/views/site/subject/fomart/list/drawer.vue
Normal file
198
src/views/site/subject/fomart/list/drawer.vue
Normal file
@@ -0,0 +1,198 @@
|
||||
<template>
|
||||
<el-drawer v-model="drawerVisible" :destroy-on-close="true" size="50%" :title="`${drawerProps.title}参数配置`">
|
||||
<el-form
|
||||
ref="ruleFormRef"
|
||||
label-width="150px"
|
||||
label-suffix=" :"
|
||||
:rules="rules"
|
||||
:disabled="drawerProps.isView"
|
||||
:model="drawerProps.row"
|
||||
:hide-required-asterisk="drawerProps.isView"
|
||||
>
|
||||
<el-form-item v-for="e in formColumns" :key="e.label" :label="e.label" :prop="e.prop" :required="e.required">
|
||||
<template v-if="e.type === 'switch'">
|
||||
<el-switch v-model="e.value" />
|
||||
</template>
|
||||
<!-- <template v-if="e.type === 'select'">
|
||||
<el-select v-model="e.value" :placeholder="`请选择${e.label}`" clearable>
|
||||
<el-option v-for="item in e.options" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</template> -->
|
||||
<template v-if="e.type === 'select'">
|
||||
<el-select filterable v-model="e.value" :placeholder="`请选择${e.label}`" clearable>
|
||||
<el-option
|
||||
v-for="(item, index) in e.options"
|
||||
:key="index"
|
||||
:label="getField(item, e.fieldNames?.label)"
|
||||
:value="getField(item, e.fieldNames?.value)"
|
||||
/>
|
||||
</el-select>
|
||||
<div>{{ e.describe }}</div>
|
||||
</template>
|
||||
<template v-if="e.type === 'text'">
|
||||
<el-input v-model="e.value" :disabled="e.disabled" :placeholder="`请输入${e.label}`" clearable></el-input>
|
||||
</template>
|
||||
<template v-if="e.type === 'text-tarea'">
|
||||
<el-input v-model="e.value" :rows="5" type="textarea" :placeholder="`请输入${e.label}`" clearable></el-input>
|
||||
</template>
|
||||
<template v-if="e.type === 'textarea'">
|
||||
<el-input
|
||||
type="textarea"
|
||||
v-model="e.value"
|
||||
maxlength="365"
|
||||
:placeholder="`请输入${e.label}`"
|
||||
show-word-limit
|
||||
/>
|
||||
</template>
|
||||
</el-form-item>
|
||||
</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 { GroupList } from "@/api/interface/site/subject/fomart/group";
|
||||
import { getAllList } from "@/api/modules/site/subject/fomart/group";
|
||||
|
||||
type Options = {
|
||||
label: string;
|
||||
value: string | number;
|
||||
};
|
||||
const getField = (item: any, fieldName: string | undefined) => {
|
||||
return fieldName ? item[fieldName] : "";
|
||||
};
|
||||
type Fields = {
|
||||
label: string;
|
||||
prop: string;
|
||||
type: string;
|
||||
value: any;
|
||||
required: boolean;
|
||||
options?: Options[];
|
||||
disabled?: boolean;
|
||||
};
|
||||
// 分组
|
||||
const getGroupList = ref([] as any);
|
||||
getAllList().then(res => {
|
||||
console.log(res.data.items);
|
||||
getGroupList.value = res.data.items;
|
||||
});
|
||||
|
||||
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 === "text-tarea") {
|
||||
message = `请输入${label}`;
|
||||
}
|
||||
acc[prop] = [{ required, message }];
|
||||
return acc;
|
||||
}, {} as Record<string, any>);
|
||||
};
|
||||
|
||||
const formColumns = computed((): Fields[] => {
|
||||
return [
|
||||
{
|
||||
label: "替换模板id",
|
||||
prop: "sf_id",
|
||||
type: "text",
|
||||
disabled: drawerProps.value.title === "编辑" ? true : false,
|
||||
get value() {
|
||||
return drawerProps.value.row!.sf_id;
|
||||
},
|
||||
set value(val) {
|
||||
drawerProps.value.row!.sf_id = val;
|
||||
},
|
||||
required: false
|
||||
},
|
||||
{
|
||||
label: "替换模板内容",
|
||||
prop: "sf_val",
|
||||
type: "text-tarea",
|
||||
get value() {
|
||||
return drawerProps.value.row!.sf_val;
|
||||
},
|
||||
set value(val) {
|
||||
drawerProps.value.row!.sf_val = val;
|
||||
},
|
||||
required: false
|
||||
},
|
||||
{
|
||||
label: "替换模板分组",
|
||||
prop: "sfg_id",
|
||||
type: "select",
|
||||
get value() {
|
||||
return drawerProps.value.row!.sfg_id;
|
||||
},
|
||||
set value(val) {
|
||||
drawerProps.value.row!.sfg_id = val;
|
||||
},
|
||||
options: getGroupList.value,
|
||||
fieldNames: { label: "sfg_name", value: "sfg_id" },
|
||||
// fieldNames: { label: "sfg_name", value: "sfg_id" },
|
||||
// enum: getAllList,
|
||||
// options: getGroupList,
|
||||
// fieldNames: { label: "sfg_name", value: "sfg_id" },
|
||||
required: false
|
||||
}
|
||||
];
|
||||
});
|
||||
const rules = ref();
|
||||
|
||||
interface DrawerProps {
|
||||
title: string;
|
||||
isView: boolean;
|
||||
row: Partial<GroupList.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;
|
||||
if (drawerProps.value.title === "编辑") {
|
||||
console.log(rules.value["sf_id"]);
|
||||
// rules.value["sfg_id"]["disabled"] = true;
|
||||
// console.log(rules.value["sfg_id"]);
|
||||
}
|
||||
};
|
||||
|
||||
// 提交数据（新增/编辑）
|
||||
const ruleFormRef = ref<FormInstance>();
|
||||
const handleSubmit = () => {
|
||||
ruleFormRef.value!.validate(async valid => {
|
||||
if (!valid) return;
|
||||
try {
|
||||
await drawerProps.value.api!(drawerProps.value.row);
|
||||
ElMessage.success({ message: `${drawerProps.value.title}成功！` });
|
||||
drawerProps.value.getTableList!();
|
||||
drawerVisible.value = false;
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
defineExpose({
|
||||
acceptParams
|
||||
});
|
||||
</script>
|
||||
193
src/views/site/subject/fomart/list/index.vue
Normal file
193
src/views/site/subject/fomart/list/index.vue
Normal file
@@ -0,0 +1,193 @@
|
||||
<template>
|
||||
<div class="table-box">
|
||||
<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="danger"
|
||||
style="display: none"
|
||||
:icon="Delete"
|
||||
plain
|
||||
:disabled="!scope.isSelected"
|
||||
@click="batchDelete(scope.selectedList)"
|
||||
>
|
||||
批量删除站点
|
||||
</el-button>
|
||||
</template>
|
||||
<!-- 表格操作 -->
|
||||
<template #operation="scope">
|
||||
<div class="c-right-pad">
|
||||
<div>
|
||||
<el-button
|
||||
type="success"
|
||||
style="width: 72px"
|
||||
v-if="scope.row.si_deploy_site_jenkins?.length > 0"
|
||||
link
|
||||
:icon="Refresh"
|
||||
@click="structureDrawer(scope.row)"
|
||||
>
|
||||
H5构建
|
||||
</el-button>
|
||||
<el-button
|
||||
v-if="scope.row.si_deploy_site_jenkins?.length == 0"
|
||||
style="width: 72px; background: none; border: none"
|
||||
>--
|
||||
</el-button>
|
||||
<el-button type="primary" link :icon="EditPen" @click="openDrawer(false, scope.row)">编辑</el-button>
|
||||
</div>
|
||||
<div>
|
||||
<el-button
|
||||
type="success"
|
||||
style="width: 72px"
|
||||
v-if="scope.row.si_deploy_landing_jenkins?.length > 0"
|
||||
link
|
||||
:icon="Refresh"
|
||||
@click="landingDrawer(scope.row)"
|
||||
>
|
||||
引导页
|
||||
</el-button>
|
||||
<el-button
|
||||
v-if="scope.row.si_deploy_landing_jenkins?.length == 0"
|
||||
style="width: 72px; background: none; border: none"
|
||||
>--
|
||||
</el-button>
|
||||
<el-button type="danger" link :icon="Delete" @click="deleteAccount(scope.row)">删除</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</ProTable>
|
||||
<Drawer ref="drawerRef" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="tsx" name="complexProTable">
|
||||
import { reactive, ref } from "vue";
|
||||
import { SubjectFomartList } from "@/api/interface/site/subject/fomart/list";
|
||||
import { useHandleData } from "@/hooks/useHandleData";
|
||||
import ProTable from "@/components/ProTable/index.vue";
|
||||
import { Delete, EditPen, CirclePlus, Refresh } from "@element-plus/icons-vue";
|
||||
import { ProTableInstance, ColumnProps } from "@/components/ProTable/interface";
|
||||
import { getList, saveData, deleteItem} from "@/api/modules/site/subject/fomart/list";
|
||||
import { getAllList } from "@/api/modules/site/subject/fomart/group";
|
||||
import Drawer from "./drawer.vue";
|
||||
import { arrColorType } from "@/utils/serviceDict";
|
||||
// ProTable 实例
|
||||
const proTable = ref<ProTableInstance>();
|
||||
|
||||
|
||||
const initParam = reactive({
|
||||
limit: 15,
|
||||
page: 1
|
||||
});
|
||||
|
||||
const dataCallback = (data: any) => {
|
||||
// 转换为数组
|
||||
const arr = data.items;
|
||||
return {
|
||||
items: arr,
|
||||
total: data.total,
|
||||
total_page: 1,
|
||||
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 getGroupList = ref([] as any);
|
||||
getAllList().then(res => {
|
||||
|
||||
getGroupList.value = res.data.items;
|
||||
});
|
||||
|
||||
// 表格配置项
|
||||
const columns = reactive<ColumnProps<SubjectFomartList.ResList>[]>([
|
||||
{ type: "selection", fixed: "left", width: 50 },
|
||||
{
|
||||
prop: "key",
|
||||
label: "搜索内容",
|
||||
isShow: false,
|
||||
search: {
|
||||
el: "input"
|
||||
}
|
||||
},
|
||||
{
|
||||
prop: "sf_id",
|
||||
label: "替换模板ID",
|
||||
width: 200
|
||||
},
|
||||
{
|
||||
prop: "sf_val",
|
||||
label: "替换模板内容"
|
||||
},
|
||||
{
|
||||
prop: "sfg_id",
|
||||
label: "替换模板分组",
|
||||
fieldNames: { label: "sfg_name", value: "sfg_id" },
|
||||
enum: getGroupList
|
||||
},
|
||||
|
||||
// { prop: "created_at", label: "添加时间", width: 170 },
|
||||
{ prop: "operation", label: "操作", fixed: "right", width: 165 }
|
||||
]);
|
||||
|
||||
// 删除站点信息
|
||||
const deleteAccount = async (params: SubjectFomartList.ResList) => {
|
||||
await useHandleData(deleteItem, { sf_id: String(params.sf_id) }, "删除所选信息");
|
||||
proTable.value?.getTableList();
|
||||
};
|
||||
|
||||
// 批量删除站点信息
|
||||
const batchDelete = async (id: any[]) => {
|
||||
const ids = id.map((item: SubjectFomartList.ResList) => item.sf_id);
|
||||
await useHandleData(deleteItem, { sf_id: ids.join(",") }, "删除所选信息");
|
||||
proTable.value?.clearSelection();
|
||||
proTable.value?.getTableList();
|
||||
};
|
||||
// 打开 drawer(新增、编辑)
|
||||
const drawerRef = ref<InstanceType<typeof Drawer> | null>(null);
|
||||
|
||||
const openDrawer = (isEdit: boolean, row: Partial<SubjectFomartList.ResList> = {}) => {
|
||||
const params = {
|
||||
title: isEdit ? "新增" : "编辑",
|
||||
row: { ...row },
|
||||
api: saveData,
|
||||
getTableList: proTable.value?.getTableList
|
||||
};
|
||||
drawerRef.value?.acceptParams(params as any);
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.el-table .warning-row,
|
||||
.el-table .warning-row .el-table-fixed-column--right,
|
||||
.el-table .warning-row .el-table-fixed-column--left {
|
||||
background-color: var(--el-color-warning-light-9);
|
||||
}
|
||||
.el-table .success-row,
|
||||
.el-table .success-row .el-table-fixed-column--right,
|
||||
.el-table .success-row .el-table-fixed-column--left {
|
||||
background-color: var(--el-color-success-light-9);
|
||||
}
|
||||
.tagTextColor {
|
||||
// color: red;
|
||||
border: none;
|
||||
}
|
||||
.c-right-pad .el-table--default .cell {
|
||||
padding: 0 5px !important;
|
||||
}
|
||||
</style>
|
||||
212
src/views/site/template.vue
Normal file
212
src/views/site/template.vue
Normal file
@@ -0,0 +1,212 @@
|
||||
<template>
|
||||
<div class="table-box">
|
||||
<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="danger"
|
||||
:icon="Delete"
|
||||
style="display: none"
|
||||
plain
|
||||
:disabled="!scope.isSelected"
|
||||
@click="batchDelete(scope.selectedList)"
|
||||
>
|
||||
批量删除站点
|
||||
</el-button>
|
||||
</template>
|
||||
<!-- 表格操作 -->
|
||||
<template #operation="scope">
|
||||
<!-- <div class="c-right-pad">
|
||||
<div>
|
||||
<el-button
|
||||
type="success"
|
||||
style="width: 72px"
|
||||
v-if="scope.row.si_deploy_site_jenkins?.length > 0"
|
||||
link
|
||||
:icon="Refresh"
|
||||
@click="structureDrawer(scope.row)"
|
||||
>
|
||||
H5构建
|
||||
</el-button>
|
||||
<el-button
|
||||
v-if="scope.row.si_deploy_site_jenkins?.length == 0"
|
||||
style="width: 72px; background: none; border: none"
|
||||
>--
|
||||
</el-button>
|
||||
<el-button type="primary" link :icon="EditPen" @click="openDrawer(false, scope.row)">编辑</el-button>
|
||||
</div>
|
||||
<div>
|
||||
<el-button
|
||||
type="success"
|
||||
style="width: 72px"
|
||||
v-if="scope.row.si_deploy_landing_jenkins?.length > 0"
|
||||
link
|
||||
:icon="Refresh"
|
||||
@click="landingDrawer(scope.row)"
|
||||
>
|
||||
引导页
|
||||
</el-button>
|
||||
<el-button
|
||||
v-if="scope.row.si_deploy_landing_jenkins?.length == 0"
|
||||
style="width: 72px; background: none; border: none"
|
||||
>--
|
||||
</el-button>
|
||||
<el-button type="danger" link :icon="Delete" @click="deleteAccount(scope.row)">删除</el-button>
|
||||
</div>
|
||||
</div> -->
|
||||
</template>
|
||||
</ProTable>
|
||||
<Drawer ref="drawerRef" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="tsx" name="complexProTable">
|
||||
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 { ProTableInstance, ColumnProps } from "@/components/ProTable/interface";
|
||||
import { getList, saveData, deleteItem, buildItem, landingItem } from "@/api/modules/site/template";
|
||||
import Drawer from "./drawer.vue";
|
||||
import { arrColorType } from "@/utils/serviceDict";
|
||||
// ProTable 实例
|
||||
const proTable = ref<ProTableInstance>();
|
||||
|
||||
const initParam = reactive({
|
||||
limit: 15,
|
||||
page: 1
|
||||
});
|
||||
|
||||
const dataCallback = (data: any) => {
|
||||
// 转换为数组
|
||||
const arr = data.items;
|
||||
return {
|
||||
items: arr,
|
||||
total: data.total,
|
||||
total_page: 1,
|
||||
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<SiteList.ResList>[]>([
|
||||
{ type: "selection", fixed: "left", width: 50 },
|
||||
{
|
||||
prop: "key",
|
||||
label: "搜索内容",
|
||||
isShow: false,
|
||||
search: {
|
||||
el: "input"
|
||||
}
|
||||
},
|
||||
{
|
||||
prop: "t_id",
|
||||
label: "ID",
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
prop: "t_code",
|
||||
width: 170,
|
||||
label: "模板编码"
|
||||
},
|
||||
|
||||
|
||||
{
|
||||
prop: "t_default",
|
||||
width: 120,
|
||||
label: "是否默认模板",
|
||||
enum: [
|
||||
{ label: "否", value: 0 },
|
||||
{ label: "是", value: 1 }
|
||||
],
|
||||
},
|
||||
{
|
||||
prop: "t_path",
|
||||
width: 270,
|
||||
label: "模板路径"
|
||||
},
|
||||
{
|
||||
prop: "t_cfg_template",
|
||||
label: "模板配置",
|
||||
render(scope) {
|
||||
return JSON.stringify(scope.row.t_cfg_template);
|
||||
}
|
||||
},
|
||||
|
||||
// { prop: "created_at", label: "添加时间", width: 170 },
|
||||
{ prop: "operation", label: "操作", fixed: "right", width: 165 }
|
||||
]);
|
||||
|
||||
// 删除站点信息
|
||||
const deleteAccount = async (params: SiteList.ResList) => {
|
||||
await useHandleData(deleteItem, { si_id: params.si_id }, "删除所选信息");
|
||||
proTable.value?.getTableList();
|
||||
};
|
||||
|
||||
// 批量删除站点信息
|
||||
const batchDelete = async (id: any[]) => {
|
||||
const ids = id.map((item: SiteList.ResList) => item.si_id);
|
||||
await useHandleData(deleteItem, { si_id: ids.join(",") }, "删除所选信息");
|
||||
proTable.value?.clearSelection();
|
||||
proTable.value?.getTableList();
|
||||
};
|
||||
// 打开 drawer(新增、编辑)
|
||||
const drawerRef = ref<InstanceType<typeof Drawer> | null>(null);
|
||||
|
||||
const openDrawer = (isEdit: boolean, row: Partial<SiteList.ResList> = {}) => {
|
||||
const params = {
|
||||
title: isEdit ? "新增站点" : "编辑站点",
|
||||
row: { ...row },
|
||||
api: saveData,
|
||||
getTableList: proTable.value?.getTableList
|
||||
};
|
||||
drawerRef.value?.acceptParams(params as any);
|
||||
};
|
||||
|
||||
//构建站点
|
||||
const structureDrawer = async (params: SiteList.ResList) => {
|
||||
await useHandleData(buildItem, { si_id: params.si_id }, "对此站点项目进行构建?", "后台正在打包中，请3分钟后查看H5前端站点！");
|
||||
proTable.value?.getTableList();
|
||||
};
|
||||
// 引导页
|
||||
const landingDrawer = async (params: SiteList.ResList) => {
|
||||
await useHandleData(
|
||||
landingItem,
|
||||
{ si_id: params.si_id },
|
||||
"对此站点项目进行构建?",
|
||||
"后台正在打包中，请3分钟后查看引导页前端站点！"
|
||||
);
|
||||
proTable.value?.getTableList();
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.el-table .warning-row,
|
||||
.el-table .warning-row .el-table-fixed-column--right,
|
||||
.el-table .warning-row .el-table-fixed-column--left {
|
||||
background-color: var(--el-color-warning-light-9);
|
||||
}
|
||||
.el-table .success-row,
|
||||
.el-table .success-row .el-table-fixed-column--right,
|
||||
.el-table .success-row .el-table-fixed-column--left {
|
||||
background-color: var(--el-color-success-light-9);
|
||||
}
|
||||
.tagTextColor {
|
||||
// color: red;
|
||||
border: none;
|
||||
}
|
||||
.c-right-pad .el-table--default .cell {
|
||||
padding: 0 5px !important;
|
||||
}
|
||||
</style>
|
||||
70
src/views/site/tkdarg.vue
Normal file
70
src/views/site/tkdarg.vue
Normal file
@@ -0,0 +1,70 @@
|
||||
<template>
|
||||
<div class="table-box">
|
||||
<ProTable
|
||||
ref="proTable"
|
||||
highlight-current-row
|
||||
:columns="columns"
|
||||
:request-api="getTableList"
|
||||
:data-callback="dataCallback"
|
||||
>
|
||||
</ProTable>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="tsx" name="complexProTable">
|
||||
import { reactive, ref } from "vue";
|
||||
import { fenLeiList } from "@/api/interface/novel/fenlei";
|
||||
import ProTable from "@/components/ProTable/index.vue";
|
||||
import { ProTableInstance, ColumnProps } from "@/components/ProTable/interface";
|
||||
import { getList } from "@/api/modules/site/tkdarg";
|
||||
|
||||
// ProTable 实例
|
||||
const proTable = ref<ProTableInstance>();
|
||||
|
||||
const initParam = reactive({
|
||||
limit: 15,
|
||||
page: 1
|
||||
});
|
||||
|
||||
const dataCallback = (data: any) => {
|
||||
console.log(data);
|
||||
// 转换为数组
|
||||
const arr = Object.entries(data).map(([xsfl_id, xsfl_name]) => ({ xsfl_id, xsfl_name }));
|
||||
return {
|
||||
items: arr,
|
||||
total: arr.length,
|
||||
total_page: 1,
|
||||
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<fenLeiList.ResList>[]>([
|
||||
// { type: "selection", fixed: "left", width: 50 },
|
||||
{
|
||||
prop: "key",
|
||||
label: "搜索内容",
|
||||
isShow: false,
|
||||
search: {
|
||||
el: "input"
|
||||
}
|
||||
},
|
||||
{
|
||||
prop: "xsfl_id",
|
||||
label: "参数CODE",
|
||||
},
|
||||
{
|
||||
prop: "xsfl_name",
|
||||
label: "描述"
|
||||
},
|
||||
|
||||
]);
|
||||
</script>
|
||||
Reference in New Issue
Block a user