master
lion 2 years ago
parent ef9489b540
commit f47f37e5ca

@ -26,7 +26,7 @@
<Button
style="margin-left: 10px"
type="primary"
@click="select = { page: 1, keyword: '' }"
@click="select = { page: 1, keyword: '',activity_list_id:'' }"
>重置
</Button>
<Button style="margin-left: 10px" type="primary" @click="doSearch"

@ -0,0 +1,271 @@
<template>
<div>
<xy-dialog ref="dialog" :is-show.sync="isShow" type="form" :title="type === 'add' ? '新增栏目' : '编辑栏目'"
:form="form" :rules="rules" @submit="submit">
<template v-slot:activity_list_id>
<div class="xy-table-item">
<div class="xy-table-item-label">
<span style="color: red; font-weight: 600; padding-right: 4px">*</span>
项目
</div>
<div class="xy-table-item-content">
<el-select style="width: 300px" v-model="form.activity_list_id" placeholder="请选择">
<el-option
v-for="item in listActivity"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</div>
</div>
</template>
<template v-slot:pid>
<div class="xy-table-item">
<div class="xy-table-item-label">
<span style="color: red; font-weight: 600; padding-right: 4px">*</span>
父栏目
</div>
<div class="xy-table-item-content">
<div v-if="form.pid===0"></div>
<el-cascader
v-else
style="width: 300px"
v-model="form.pid"
:options="treeArr"
:props="{'label':'title','value':'id',checkStrictly: true }"
clearable></el-cascader>
</div>
</div>
</template>
<template v-slot:title>
<div class="xy-table-item">
<div class="xy-table-item-label">
<span style="color: red; font-weight: 600; padding-right: 4px">*</span>
栏目名称
</div>
<div class="xy-table-item-content">
<el-input v-model="form.title" clearable placeholder="请输入栏目名称" style="width: 300px"></el-input>
</div>
</div>
</template>
<template v-slot:cover_id>
<div class="xy-table-item">
<div class="xy-table-item-label">封面图 </div>
<div class="xy-table-item-content">
<el-upload style="width: 300px" class="upload-demo" :action="action" :on-success="
(response, file, fileList) =>
successHandle(response, file, fileList, 'cover_id')
" :before-upload="uploadBefore" :file-list="cover_id" :on-remove="
(file, fileList) => removeHande(file, fileList, 'cover_id')
" :limit="1" list-type="picture-card">
<i slot="default" class="el-icon-plus"></i>
<div slot="tip" class="el-upload__tip">
只能上传jpg/png文件且不超过500kb
</div>
</el-upload>
</div>
</div>
</template>
</xy-dialog>
</div>
</template>
<script>
import {
show,
save
} from "@/api/index";
export default {
components: {
},
props: {},
data() {
return {
isShow: false,
id: "",
type: "",
action: process.env.VUE_APP_UPLOAD_API,
listActivity:[],
treeArr:[],
cover_id:[],
form: {
activity_list_id: '',
pid:0,
title: "",
cover_id:''
},
rules: {
name: [{
required: true,
message: "请填写栏目名称",
}],
},
};
},
methods: {
setOption(val){
this.listActivity = val
},
setTree(val){
this.treeArr = val
},
show() {
this.isShow = true;
},
hidden() {
this.isShow = false;
},
init() {
for (let key in this.form) {
if (this.form[key] instanceof Array) {
this.form[key] = [];
} else {
this.form[key] = "";
}
}
this.$refs["dialog"].clearValidate();
},
setId(id) {
if (typeof id == "number") {
this.id = id;
} else {
console.error("error typeof id: " + typeof id);
}
},
getId() {
return this.id;
},
setType(type = "add") {
let types = ["add", "editor"];
if (types.includes(type)) {
this.type = type;
} else {
console.warn("Unknown type: " + type);
}
},
setForm(key = [], value = []) {
if (key instanceof Array) {
key.forEach((key, index) => {
this.form[key] = value[index] ?? "";
});
}
if (typeof key === "string") {
this.form[key] = value;
}
if (!key) {
this.init();
}
},
//
successHandle(response, file, fileList, key) {
this[key] = fileList;
},
removeHande(file, fileList, key) {
console.log("fileList", fileList)
console.log("key", key)
this[key] = fileList;
this.form[key] = "";
},
uploadBefore(file) {
console.log(file);
if (file.size / 1000 > 300 * 1024) {
this.$message({
type: "warning",
message: "上传大小超过300MB",
});
return false;
}
},
async getDetail() {
const res = await show({
id: this.id,
table_name: "study_columns",
with_relations: ['cover']
});
this.$integrateData(this.form, res);
this.cover_id = res.cover ? [{
url: res.cover?.url,
name: res.cover?.original_name,
response: res.cover
}] : []
},
submit() {
if (this.type === "add") {
if (this.form.hasOwnProperty("id")) {
delete this.form.id;
}
}
if (this.type === "editor") {
Object.defineProperty(this.form, "id", {
value: this.id,
enumerable: true,
configurable: true,
writable: true,
});
}
this.form.cover_id = this.cover_id.length == 0 ? "" : (this.cover_id[0]?.response?.id);
save(Object.assign(this.form, {
table_name: "study_columns"
})).then(
(res) => {
this.$message({
type: "success",
message: this.type === "add" ? "新增栏目" : "编辑栏目" + "成功",
});
this.isShow = false;
this.$emit("refresh");
}
);
},
},
created(){
},
watch: {
isShow(val) {
if (val) {
console.log("form",this.form.activity_list_id)
if (this.type === "editor") {
this.getDetail();
}
} else {
this.id = "";
this.type = "";
this.cover_id = [];
this.init();
this.$refs["dialog"].clearValidate();
delete this.form.id;
}
},
},
};
</script>
<style scoped lang="scss">
::v-deep .el-input__inner {
text-align: left;
}
.xy-table-item-price-per {
position: relative;
&::after {
position: absolute;
right: 10px;
top: 0;
content: "%";
}
::v-deep .el-input__clear {
position: relative;
right: 46px;
z-index: 2;
}
}
</style>

@ -0,0 +1,244 @@
<template>
<div>
<lx-header
icon="md-apps"
style="margin-bottom: 10px; border: 0px; margin-top: 15px"
text="项目栏目管理"
>
<div slot="content"></div>
<slot>
<div class="selects">
<div>
<span style="padding: 0 6px; word-break: keep-all"> 关键字 </span>
<Input
v-model="select.keyword"
placeholder="请输入关键字"
style="width: 180px"
></Input>
</div>
<div>
<span style="padding: 0 6px; word-break: keep-all"> 项目 </span>
<Select @on-change="changeActive" v-model="select.activity_list_id" style="width:200px">
<Option v-for="item in listActivity" :value="item.id" :key="item.id">{{ item.name }}</Option>
</Select>
</div>
<Button
style="margin-left: 10px"
type="primary"
@click="select = { page: 1, keyword: '',activity_list_id:'' }"
>重置
</Button>
<Button style="margin-left: 10px" type="primary" @click="doSearch"
>查询</Button
>
<Button
style="margin-left: 10px"
type="primary"
@click="
$refs['create'].setForm(['activity_list_id','pid'],[select.activity_list_id||'',0]),
$refs['create'].setType('add'),
$refs['create'].setOption(listActivity),
$refs['create'].setTree(list),
$refs['create'].show()
"
>新增</Button
>
</div>
</slot>
</lx-header>
<xy-table
:list="list"
:total="total"
:table-item="table"
:isPage="false"
@pageSizeChange="pageSizeChange"
@pageIndexChange="pageChange"
>
<template v-slot:btns>
<template>
<el-table-column label="操作" width="260" fixed="right">
<template #default="{ row }">
<Button
size="small"
type="primary"
style="margin-right: 4px"
@click="
$refs['create'].setForm(['activity_list_id','pid'],[row.activity_list_id,row.id]);
$refs['create'].setId(row.id);
$refs['create'].setType('editor');
$refs['create'].setOption(listActivity),
$refs['create'].setTree(list),
$refs['create'].show();
"
>编辑</Button
>
<Button
size="small"
type="primary"
style="margin-right: 4px"
@click="
$refs['create'].setForm(['activity_list_id','pid'],[select.activity_list_id||'',row.id||0]),
$refs['create'].setType('add'),
$refs['create'].setOption(listActivity),
$refs['create'].setTree(list),
$refs['create'].show()
"
>子栏目</Button
>
<Poptip confirm transfer title="确认删除?" @on-ok="deleteitem(row)">
<Button size="small" type="error">删除</Button>
</Poptip>
</template>
</el-table-column>
</template>
</template>
</xy-table>
<create ref="create" @refresh="load"></create>
</div>
</template>
<script>
import { index, destroy, show } from "@/api/index";
import { index as activityIndex } from "@/api/activity/index"
import create from "./components/create"
export default {
components: {
create
},
data() {
return {
select: {
page: 1,
page_size: 9999,
with_relations: ['cover'],
table_name: "study_columns",
activity_list_id: '',
filter: [],
},
listActivity: [],
total: 0,
list: [],
table: [
// {
// prop: "activity_list_id",
// label: "",
// minWidth: 220,
// align: "left",
// },
{
prop: "title",
label: "栏目名称",
minWidth: 220,
align:'left'
},
{
prop: "created_at",
label: "创建信息",
width: 190,
formatter: (v1, v2, value) => {
return this.$moment(value).format("YYYY-MM-DD HH:mm:ss");
},
},
{
prop: "updated_at",
label: "更新时间",
align: "left",
width: 190,
formatter: (v1, v2, value) => {
return this.$moment(value).format("YYYY-MM-DD HH:mm:ss");
},
},
],
};
},
methods: {
async loadActivity() {
const res = await activityIndex({
page: 1,
page_size: 999,
});
this.listActivity = res.data;
},
doSearch() {
this.select.page = 1;
this.load();
},
pageSizeChange(e) {
this.select.page_size = e;
this.select.page = 1;
this.load();
},
changeActive(e){
if(e){
this.select.activity_list_id = e
this.load()
}
},
async load() {
if(!this.select.activity_list_id){
this.$message({
type:'warning',
message:'请先选择项目'
})
return
}
const res = await index(this.select);
this.total = res.total;
this.list = this.arrayToTree(res.data);
console.log("list",this.list)
},
arrayToTree(arr, pid = 0) {
const result = [];
arr.forEach(item => {
if (item.pid === pid) {
const children = this.arrayToTree(arr, item.id);
if (children.length) {
item.children = children;
}
result.push(item);
}
});
return result;
},
deleteitem(row) {
destroy({
id: row.id,
activity_list_id: row.activity_list_id,
table_name: 'study_columns'
}).then((res) => {
this.load();
this.$Message.success("操作成功");
});
},
pageChange(e) {
this.select.page = e;
this.load();
},
},
mounted() {
this.load();
},
created() {
this.loadActivity()
},
};
</script>
<style lang="scss" scoped>
.selects {
display: flex;
flex-wrap: wrap;
& > div {
margin-bottom: 6px;
}
}
</style>

@ -4,7 +4,41 @@
<xy-dialog :is-show.sync="isShow" width="60%" title="学习资料编辑" type="form" :form="detail" :rules="rules"
@submit="editor" ref="addActivity">
<template v-slot:activity_list_id>
<div class="xy-table-item">
<div class="xy-table-item-label">
<span style="color: red; font-weight: 600; padding-right: 4px">*</span>
项目
</div>
<div class="xy-table-item-content">
<el-select @change="changeActive" style="width: 300px" v-model="detail.activity_list_id" placeholder="请选择">
<el-option
v-for="item in listActivity"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</div>
</div>
</template>
<template v-slot:study_column_id>
<div class="xy-table-item">
<div class="xy-table-item-label">
<span style="color: red; font-weight: 600; padding-right: 4px">*</span>
栏目
</div>
<div class="xy-table-item-content">
<el-cascader
@change="changeMenu"
style="width: 300px"
v-model="detail.study_column_id"
:options="menuList"
:props="{'label':'title','value':'id',checkStrictly: true }"
clearable></el-cascader>
</div>
</div>
</template>
<template v-slot:title>
<div class="xy-table-item">
<div class="xy-table-item-label">
@ -122,7 +156,7 @@
show,
index
} from "@/api/party/studyResource";
import { index as menulist} from "@/api/index";
import tinymce from "@/components/Tinymce"
export default {
components: {
@ -139,9 +173,11 @@
listParty: [],
isShow: false,
id: "",
type: "add",
type: "add",
menuList:[],
detail: {
activity_list_id: "",
activity_list_id: "",
study_column_id:'',
title: "",
text: "",
myindex: 1,
@ -165,7 +201,7 @@
}],
activity_list_id: [{
required: true,
message: "选择类型"
message: "选择所属项目"
}]
}
@ -186,7 +222,55 @@
}
}
},
methods: {
methods: {
//
changeMenu(e){
console.log(e,e.at(-1))
if(e){
this.detail.study_column_id = e.at(-1)
}
},
changeActive(e){
if(e){
this.detail.activity_list_id = e
this.loadMenu()
}
},
async loadMenu() {
if(!this.detail.activity_list_id){
this.$message({
type:'warning',
message:'请先选择项目'
})
return
}
const res = await menulist({
page: 1,
page_size: 999,
with_relations: ['cover'],
table_name: "study_columns",
activity_list_id: this.detail.activity_list_id,
filter: [],
});
this.menuList = this.arrayToTree(res.data);
console.log("list",this.menuList)
},
arrayToTree(arr, pid = 0) {
const result = [];
arr.forEach(item => {
if (item.pid === pid) {
const children = this.arrayToTree(arr, item.id);
if (children.length) {
item.children = children;
}
result.push(item);
}
});
return result;
},
//
uploadFailAuto(err) {
console.log(err)
@ -236,10 +320,12 @@
id: this.id
})
Object.assign(this.detail, res);
this.loadMenu()
this.$refs['tinymce'].setContent(res.text ?? ' ')
},
editor() {
editor() {
console.log("this.detail",this.detail)
// return
save(this.detail).then(res => {
this.isShow = false
this.$Message.success("操作成功");

@ -68,6 +68,10 @@
total: 0,
list: [],
table: [{
prop: 'activity_list.name',
label: '项目',
align: 'left',
},{
prop: 'title',
label: '标题',
align: 'left',

Loading…
Cancel
Save