Browse Source

内容管理-05050002

master
代震 4 years ago
parent
commit
9d77add3f6
  1. 2
      .env
  2. 2
      .env.development
  3. 15714
      package-lock.json
  4. 1
      package.json
  5. 2
      src/main.js
  6. 237
      src/views/content/content-edit.vue
  7. 127
      src/views/content/content-list.vue
  8. 193
      src/views/content/create_form.js
  9. 18
      src/views/content/index.vue

2
.env

@ -1,3 +1,3 @@
VUE_APP_VERSION=3.0 VUE_APP_VERSION=3.0
VUE_APP_NAME=Bmz Admin VUE_APP_NAME=Bmz Admin
VUE_APP_API_BASE_URL=http://api.base.ahbmz.com/api VUE_APP_API_BASE_URL=http://api.cms.ahbmz.com/api

2
.env.development

@ -1 +1 @@
VUE_APP_API_BASE_URL=http://api.base.ahbmz.com/api VUE_APP_API_BASE_URL=http://api.cms.ahbmz.com/api

15714
package-lock.json

File diff suppressed because it is too large

1
package.json

@ -11,6 +11,7 @@
}, },
"dependencies": { "dependencies": {
"@amap/amap-jsapi-loader": "^0.0.7", "@amap/amap-jsapi-loader": "^0.0.7",
"@form-create/element-ui": "^2.5.20",
"@riophae/vue-treeselect": "^0.4.0", "@riophae/vue-treeselect": "^0.4.0",
"@tinymce/tinymce-vue": "^3.2.8", "@tinymce/tinymce-vue": "^3.2.8",
"axios": "^0.21.1", "axios": "^0.21.1",

2
src/main.js

@ -5,6 +5,7 @@ import router from './router';
import store from './store'; import store from './store';
import setting from './config/setting'; import setting from './config/setting';
import permission from '@/utils/permission'; import permission from '@/utils/permission';
import formCreate from '@form-create/element-ui'
import VueClipboard from 'vue-clipboard2'; import VueClipboard from 'vue-clipboard2';
import './config/axios-config'; import './config/axios-config';
import EleAdmin from 'ele-admin'; import EleAdmin from 'ele-admin';
@ -14,6 +15,7 @@ Vue.config.productionTip = false;
Vue.prototype.$setting = setting; Vue.prototype.$setting = setting;
Vue.use(EleAdmin, {size: 'medium'}); Vue.use(EleAdmin, {size: 'medium'});
Vue.use(permission); Vue.use(permission);
Vue.use(formCreate);
Vue.use(VueClipboard); Vue.use(VueClipboard);
new Vue({ new Vue({

237
src/views/content/content-edit.vue

@ -1,184 +1,94 @@
<!-- 用户编辑弹窗 --> <!-- 用户编辑弹窗 -->
<template> <template>
<el-dialog <el-dialog :title="isUpdate?'修改用户':'添加用户'" :visible="visible" width="88%" :destroy-on-close="true" :lock-scroll="false"
:title="isUpdate?'修改用户':'添加用户'" custom-class="ele-dialog-form" @update:visible="updateVisible">
:visible="visible" <!-- <p>formData: {{dig_value}}</p> -->
width="600px" <form-create v-model="dig_form" :rule="dig_rule" :option="dig_option" :value.sync="dig_value"></form-create>
:destroy-on-close="true"
:lock-scroll="false"
custom-class="ele-dialog-form"
@update:visible="updateVisible">
<el-form
:model="form"
ref="form"
:rules="rules"
label-width="82px">
<el-row :gutter="15">
<el-col :sm="12">
<el-form-item label="所属机构:">
<treeselect
v-model="form.organizationId"
:options="organizationList"
placeholder="请选择所属机构"
:defaultExpandLevel="4"
:normalizer="normalizer"/>
</el-form-item>
<el-form-item
label="用户账号:"
prop="username">
<el-input
v-model="form.username"
placeholder="请输入账号"
clearable
:disabled="isUpdate"/>
</el-form-item>
<el-form-item
label="用户名:"
prop="nickname">
<el-input
v-model="form.nickname"
placeholder="请输入用户名"
clearable/>
</el-form-item>
<el-form-item
label="性别:"
prop="sex">
<el-select
v-model="form.sex"
placeholder="请选择性别"
class="ele-block"
clearable>
<el-option label="男" :value="1"/>
<el-option label="女" :value="2"/>
</el-select>
</el-form-item>
<el-form-item
label="角色:"
prop="roleIds">
<el-select
v-model="form.roleIds"
placeholder="请选择角色"
class="ele-block"
clearable
multiple>
<el-option
v-for="(item,index) in roleList"
:key="index"
:label="item.roleName"
:value="item.roleId"/>
</el-select>
</el-form-item>
</el-col>
<el-col :sm="12">
<el-form-item label="手机号:">
<el-input
v-model="form.phone"
placeholder="请输入手机号"
clearable/>
</el-form-item>
<el-form-item label="邮箱:">
<el-input
v-model="form.email"
placeholder="请输入邮箱"
clearable/>
</el-form-item>
<el-form-item label="个人简介:">
<el-input
v-model="form.introduction"
placeholder="请输入个人简介"
:rows="4"
type="textarea"/>
</el-form-item>
<el-form-item
v-if="!isUpdate"
label="登录密码:"
prop="password">
<el-input
v-model="form.password"
placeholder="请输入登录密码"
show-password/>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer">
<el-button @click="updateVisible(false)">取消</el-button>
<el-button
type="primary"
@click="save"
:loading="loading">保存
</el-button>
</div>
</el-dialog> </el-dialog>
</template> </template>
<script> <script>
import Treeselect from '@riophae/vue-treeselect' import formCreate from '@form-create/element-ui'
import '@riophae/vue-treeselect/dist/vue-treeselect.css' import TinymceEditor from '@/components/TinymceEditor';
export default { export default {
name: 'ContentEdit', name: 'ContentEdit',
components: {Treeselect}, // components: {TinymceEditor},
props: { props: {
// //
visible: Boolean, visible: Boolean,
// //
data: Object, edit_data: Object,
// //
organizationList: Array, edit_rule: Array
// id
organizationId: Number
}, },
data() { data() {
return { return {
//
form: Object.assign({}, this.data, {
organizationId: this.organizationId
}),
//
rules: {
username: [
{required: true, message: '请输入账号', trigger: 'blur'}
],
nickname: [
{required: true, message: '请输入用户名', trigger: 'blur'}
],
sex: [
{required: true, message: '请选择性别', trigger: 'blur'}
],
roleIds: [
{required: true, message: '请选择角色', trigger: 'blur'}
],
password: [
{required: true, message: '请输入登录密码', trigger: 'blur'}
]
},
// //
loading: false, loading: false,
// //
isUpdate: false, isUpdate: false,
// //
roleList: [] roleList: [],
//
dig_form: {},
//
dig_value: {},
//
dig_rule: [],
//
dig_option: {
form: {
labelPosition: 'left',
size: "medium"
},
row: {
//
gutter: 8
},
//
onSubmit: function(formData) {
alert(JSON.stringify(formData))
}
},
} }
}, },
watch: { watch: {
data() { edit_rule: {
if (this.data) { handler(valNew) {
this.form = Object.assign({}, this.data, { // console.log("")
roleIds: this.data.roles.map(d => d.roleId) this.dig_rule = valNew;
}); const _em = this
this.dig_option.onSubmit = () => {
_em.save()
}
},
deep: true
},
edit_data: {
handler(valNew) {
console.log(valNew)
if (valNew !== 0) {
if (valNew['cate_id'] !== undefined) {
valNew['cate_id'] = valNew['cate_id_str']
}
// if (valNew['status'] === 1) {
// valNew['status'] = true
// }
this.dig_value = valNew
this.isUpdate = true; this.isUpdate = true;
} else { } else {
this.form = {organizationId: this.organizationId}; // this.dig_value = {}
formCreate.resetFields()
this.isUpdate = false; this.isUpdate = false;
} }
}, },
organizationId() { deep: true
if (!this.isUpdate) {
this.form = {organizationId: this.organizationId};
}
} }
}, },
created() {
formCreate.component('editor', TinymceEditor);
},
mounted() { mounted() {
// this.queryRoles(); // // this.queryRoles(); //
}, },
@ -192,15 +102,18 @@ export default {
}, },
/* 保存编辑 */ /* 保存编辑 */
save() { save() {
this.$refs['form'].validate((valid) => { // this.$refs['form'].validate((valid) => {
if (valid) { // if (valid) {
this.loading = true; this.loading = true;
this.$http[this.isUpdate ? 'put' : 'post']('/sys/user', this.form).then(res => { this.$http[this.isUpdate ? 'put' : 'post']('/sys/user', this.dig_value).then(res => {
this.loading = false; this.loading = false;
if (res.data.code === 0) { if (res.data.code === 0) {
this.$message({type: 'success', message: res.data.msg}); this.$message({
type: 'success',
message: res.data.msg
});
if (!this.isUpdate) { if (!this.isUpdate) {
this.form = {}; this.dig_value = {};
} }
this.updateVisible(false); this.updateVisible(false);
this.$emit('done'); this.$emit('done');
@ -211,17 +124,17 @@ export default {
this.loading = false; this.loading = false;
this.$message.error(e.message); this.$message.error(e.message);
}); });
} else { // } else {
return false; // return false;
} // }
}); // });
}, },
/* 更新visible */ /* 更新visible */
updateVisible(value) { updateVisible(value) {
this.$emit('update:visible', value); this.$emit('update:visible', value);
}, },
/* 查询角色列表 */ /* 查询角色列表 */
queryRoles() { /* queryRoles() {
this.$http.get('/sys/role').then(res => { this.$http.get('/sys/role').then(res => {
if (res.data.code === 0) { if (res.data.code === 0) {
this.roleList = res.data.data; this.roleList = res.data.data;
@ -231,9 +144,9 @@ export default {
}).catch(e => { }).catch(e => {
this.$message.error(e.message); this.$message.error(e.message);
}); });
} */
} }
} }
}
</script> </script>
<style scoped> <style scoped>

127
src/views/content/content-list.vue

@ -6,6 +6,7 @@
:datasource="url" :datasource="url"
:columns="columns" :columns="columns"
:where="where" :where="where"
:parse-data="parseData"
height="calc(100vh - 261px)" height="calc(100vh - 261px)"
tool-class="ele-toolbar-form"> tool-class="ele-toolbar-form">
<!-- 表头工具栏 --> <!-- 表头工具栏 -->
@ -17,7 +18,7 @@
@keyup.enter.native="reload" @keyup.enter.native="reload"
@submit.native.prevent> @submit.native.prevent>
<el-row :gutter="10"> <el-row :gutter="10">
<el-col :md="8"> <el-col :md="12">
<el-form-item> <el-form-item>
<el-input <el-input
v-model="where.title" v-model="where.title"
@ -26,7 +27,7 @@
size="small"/> size="small"/>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :md="15"> <el-col :md="12">
<div class="ele-form-actions"> <div class="ele-form-actions">
<el-button <el-button
type="primary" type="primary"
@ -36,7 +37,7 @@
size="small">查询 size="small">查询
</el-button> </el-button>
<el-button <el-button
@click="openEdit(null)" @click="openEdit"
type="primary" type="primary"
icon="el-icon-plus" icon="el-icon-plus"
class="ele-btn-icon" class="ele-btn-icon"
@ -49,7 +50,7 @@
</template> </template>
<!-- 角色列 --> <!-- 角色列 -->
<!-- 状态列 --> <!-- 状态列 -->
<template slot="state" slot-scope="{row}"> <template slot="status" slot-scope="{row}">
<el-switch <el-switch
v-model="row.status" v-model="row.status"
@change="editState(row)" @change="editState(row)"
@ -80,15 +81,19 @@
<!-- 编辑弹窗 --> <!-- 编辑弹窗 -->
<content-edit <content-edit
:visible.sync="showEdit" :visible.sync="showEdit"
:data="current" :edit_data="current"
:edit_rule="edit_rule"
@done="reload"/>
<!--
:cate_list="cate_list" :cate_list="cate_list"
:cate_id="cate_id" :cate_id="cate_id"
@done="reload"/> -->
</div> </div>
</template> </template>
<script> <script>
import ContentEdit from './content-edit'; import ContentEdit from './content-edit';
import { getForm } from "@/views/content/create_form.js";
export default { export default {
name: 'contentList', name: 'contentList',
@ -106,50 +111,8 @@ export default {
// //
columns: [ columns: [
{ {
columnKey: 'index',
type: 'index',
width: 45,
align: 'center',
fixed: 'left',
showOverflowTooltip: true
},
{
prop: 'title',
label: '标题',
sortable: 'custom',
showOverflowTooltip: true,
minWidth: 110
},
{
prop: 'createTime',
label: '创建时间',
sortable: 'custom',
showOverflowTooltip: true,
minWidth: 110,
formatter: (row, column, cellValue) => {
return this.$util.toDateString(cellValue);
}
},
{
prop: 'status',
label: '状态',
align: 'center',
sortable: 'custom',
width: 80,
resizable: false,
slot: 'state'
},
{
prop: 'sort',
label: '排序',
align: 'center',
sortable: 'custom',
width: 80,
},
{
columnKey: 'action', columnKey: 'action',
fixed: 'right',
label: '操作', label: '操作',
width: 130, width: 130,
align: 'center', align: 'center',
@ -168,6 +131,8 @@ export default {
where: { where: {
cate_id: this.cate_id cate_id: this.cate_id
}, },
//
edit_rule: null,
// //
current: null, current: null,
// //
@ -175,14 +140,74 @@ export default {
} }
}, },
methods: { methods: {
/* 获取数据 */
parseData(res) {
// console.log(res);
let showList = res.data.field_info.list_fields;
this.columns = [{
columnKey: 'action',
fixed: 'right',
label: '操作',
width: 130,
align: 'center',
resizable: false,
slot: 'action'
}]
showList.forEach(ele => {
let newObj = {}
//
if (ele.type !== 'hidden') {
newObj = {
prop: ele.show_value,
label: ele.show_name,
align: 'center',
showOverflowTooltip: true
}
if (ele.show_value === 'id') {
newObj.width = '55'
}
//
if (ele.field === 'image') {
newObj.slot = 'image'
} else if (ele.field === 'status') {
newObj.slot = 'status' // status
// newObj.width = '75'
} else if (ele.field === 'sort') {
newObj.sortable = 'custom'
// newObj.width = '75'
}
this.columns.push(newObj)
// console.log(ele)
}
})
// this.columns.push()
// console.log(this.columns)
// console.log(res.data.content_data);
// console.log(res.data.field_info.editFields);
// this.edit_rule = res.data.field_info.editFields;
this.edit_rule = getForm(res.data.field_info.editFields);
return {
// code0code: 2000
code: res.code === 200 ? 0 : res.code,
// listdatares.result.list
data: res.data.content_data,
// totalcount
count: res.total,
msg: res.message
};
},
/* 刷新表格 */ /* 刷新表格 */
reload() { reload() {
this.$refs.table.reload({page: 1}); this.$refs.table.reload({page: 1});
}, },
/* 显示编辑 */ /* 显示编辑 */
openEdit(row) { openEdit(row) {
if (row) {
this.current = row; this.current = row;
} else {
this.current = 0;
}
console.log(row)
this.showEdit = true; this.showEdit = true;
}, },
/* 删除 */ /* 删除 */
@ -211,8 +236,8 @@ export default {
if (res.data.code === 0) { if (res.data.code === 0) {
this.$message({type: 'success', message: res.data.msg}); this.$message({type: 'success', message: res.data.msg});
} else { } else {
row.state = !row.state ? 1 : 0;
this.$message.error(res.data.msg); this.$message.error(res.data.msg);
row.status = !row.status ? 1 : 0;
} }
}).catch(e => { }).catch(e => {
loading.close(); loading.close();

193
src/views/content/create_form.js

@ -0,0 +1,193 @@
import setting from "@/config/setting";
export function getForm(valNew) {
console.log(valNew)
const rule = []
for (let e of valNew) {
let eItem = {};
eItem.type = e.type
eItem.title = e.show_name
eItem.field = e.field
eItem.value = ""
eItem.col = {
span: 23
}
eItem.props = {
type: "text",
placeholder: e.placeholder,
}
if (e.type === "hidden") {
eItem.type = "hidden"
}
if (e.type === "text") {
eItem.type = "input"
}
if (e.type === "editor") {
eItem.type = "editor"
}
if (e.type === "radio") {
eItem.type = "switch"
eItem.props = {
activeValue: "1",
inactiveValue: "0"
}
}
if (e.type === "number") {
eItem.type = "input"
eItem.props.type = "number"
}
if (e.type === "password") {
eItem.type = "input"
eItem.props.type = "password"
}
if (e.type === "textarea") {
eItem.type = "input"
eItem.props.type = "textarea"
}
if (e.type === "file") {
eItem.type = "upload"
eItem.props = {
type: "drag",
uploadType: "file",
action: setting.uploadImageUrl,
name: "pic",
multiple: true, // 多选
limit: 2,
onSuccess: function(res, file) {
file.url = res.data.filePath;
}
}
}
if (e.type === "image" || e.type === "images") {
eItem.type = "upload"
eItem.props = {
type: "select",
uploadType: "image",
action: setting.uploadImageUrl,
name: "pic",
multiple: true,
// accept: "image\/*",
maxLength: 1, //可上传文件数量 (limit: 2,)
allowRemove: true, //是否可删除,设置为false是不显示删除按钮
onSuccess: function(res, file) {
file.url = res.data.filePath;
}
}
}
if (e.type === "tag") {
eItem.type = "input"
}
if (e.type === "cascader") {
eItem.type = "cascader"
eItem.props = {
data: [],
}
}
if (e.type === "checkbox") {
eItem.type = e.type
eItem.options = [];
let opt = e.value_arr;
for (let x in opt) {
eItem.options.push({
"value": x,
"label": opt[x],
"disabled": false
})
}
}
if (e.type === "select") {
eItem.type = "select"
eItem.options = [];
// {"value": "104","label": "生态蔬菜","disabled": false}
let opt = e.value_arr;
for (let x in opt) {
eItem.options.push({
"value": x,
"label": opt[x],
"disabled": false
})
}
}
if (e.type === "time") {
eItem.type = "TimePicker"
eItem.props.type = "time"
}
if (e.type === "timerange") {
eItem.type = "TimePicker"
eItem.props.type = "timerange"
}
if (e.type === "date") {
eItem.type = "DatePicker"
eItem.props.type = "date"
}
if (e.type === "datetime") {
eItem.type = "DatePicker"
eItem.props.type = "datetime"
}
if (e.type === "daterange") {
eItem.type = "DatePicker"
eItem.props.type = "daterange"
}
if (e.type === "datetimerange") {
eItem.type = "DatePicker"
eItem.props.type = "datetimerange"
}
if (e.type === 'slider') {
eItem.type = 'slider',
eItem.props = {
"min": 0,
//最小值
"max": 100,
//最大值
"step": 1,
//步长,取值建议能被(max - min)整除
"disabled": false,
//是否禁用滑块
"range": true,
//是否开启双滑块模式
"showInput": false,
//是否显示数字输入框,仅在单滑块模式下有效
"showStops": true,
//是否显示间断点,建议在 step 不密集时使用
"showTip": "hover",
//提示的显示控制,可选值为 hover(悬停,默认)、always(总是可见)、never(不可见)
"tipFormat": undefined,
//Slider 会把当前值传给 tip-format,并在 Tooltip 中显示 tip-format 的返回值,若为 null,则隐藏 Tooltip
"inputSize": "small",
//数字输入框的尺寸,可选值为large、small、default或者不填,仅在开启 show-input 时有效
}
}
if (e.required === 1) {
if (e.maxLength > 0) {
eItem.props.maxLength = e.maxLength
}
if (e.minLength > 0) {
eItem.props.minLength = e.minLength
}
if (e.type === 'text') {
eItem.validate = [
{required:true,type:'string',message:"请输入" + e.show_name}
]
}
if (e.type === 'number') {
eItem.validate = [
{required:true,message:"请输入" + e.show_name},
]
}
if (e.type === "upload"){
eItem.validate = [{
required: true,
type: 'array',
min: 3,
message: '请上传3张图片',
trigger: 'change'
}]
}
}
// console.log(eItem)
rule.push(eItem);
}
return rule
}

18
src/views/content/index.vue

@ -5,14 +5,14 @@
v-loading="loading" v-loading="loading"
body-style="padding-bottom: 0;"> body-style="padding-bottom: 0;">
<el-row :gutter="15"> <el-row :gutter="15">
<el-col :md="6" style="margin-bottom: 15px;"> <el-col :md="4" style="margin-bottom: 15px;">
<!-- 机构列表 --> <!-- 机构列表 -->
<div class="org-tree-group"> <div class="org-tree-group">
<el-tree <el-tree
ref="tree" ref="tree"
:data="data" :data="data"
:props="{label: 'cate_name'}" :props="{label: 'cate_name'}"
:expand-on-click-node="false" :expand-on-click-node="true"
node-key="id" node-key="id"
:default-expand-all="false" :default-expand-all="false"
@node-click="onNodeClick" @node-click="onNodeClick"
@ -20,11 +20,11 @@
</div> </div>
</el-col> </el-col>
<!-- 内容列表 --> <!-- 内容列表 -->
<el-col :md="18" style="margin-bottom: 15px;"> <el-col :md="20" style="margin-bottom: 15px;">
<content-list <content-list
v-if="current" v-if="current"
:cate_id="current.id" :cate_id="current.id"
:cate_list="data" /> :cate_list="listData" />
</el-col> </el-col>
</el-row> </el-row>
</el-card> </el-card>
@ -48,7 +48,9 @@ export default {
// //
showEdit: false, showEdit: false,
// //
editData: null editData: null,
//
listData: null
} }
}, },
mounted() { mounted() {
@ -62,6 +64,7 @@ export default {
this.loading = false; this.loading = false;
if (res.data.code === 0) { if (res.data.code === 0) {
this.data = this.$util.toTreeData(res.data.data, 'id', 'parent_id'); this.data = this.$util.toTreeData(res.data.data, 'id', 'parent_id');
// console.log(this.data)
this.$nextTick(() => { this.$nextTick(() => {
this.onNodeClick(this.data[0]); this.onNodeClick(this.data[0]);
}); });
@ -76,10 +79,13 @@ export default {
/* 选择数据 */ /* 选择数据 */
onNodeClick(row) { onNodeClick(row) {
if (row != null) { if (row != null) {
// console.log(row);
if(row.has_child === 0){
this.current = row; this.current = row;
this.$refs.tree.setCurrentKey(row.id); this.$refs.tree.setCurrentKey(row.id);
} else { } else {
this.current = null; this.current = row.children[0];
}
} }
}, },

Loading…
Cancel
Save