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. 353
      src/views/content/content-edit.vue
  7. 129
      src/views/content/content-list.vue
  8. 193
      src/views/content/create_form.js
  9. 24
      src/views/content/index.vue

2
.env

@ -1,3 +1,3 @@
VUE_APP_VERSION=3.0
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": {
"@amap/amap-jsapi-loader": "^0.0.7",
"@form-create/element-ui": "^2.5.20",
"@riophae/vue-treeselect": "^0.4.0",
"@tinymce/tinymce-vue": "^3.2.8",
"axios": "^0.21.1",

2
src/main.js

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

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

@ -1,239 +1,152 @@
<!-- 用户编辑弹窗 -->
<template>
<el-dialog
:title="isUpdate?'修改用户':'添加用户'"
:visible="visible"
width="600px"
: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 :title="isUpdate?'修改用户':'添加用户'" :visible="visible" width="88%" :destroy-on-close="true" :lock-scroll="false"
custom-class="ele-dialog-form" @update:visible="updateVisible">
<!-- <p>formData: {{dig_value}}</p> -->
<form-create v-model="dig_form" :rule="dig_rule" :option="dig_option" :value.sync="dig_value"></form-create>
</el-dialog>
</template>
<script>
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import formCreate from '@form-create/element-ui'
import TinymceEditor from '@/components/TinymceEditor';
export default {
name: 'ContentEdit',
components: {Treeselect},
props: {
//
visible: Boolean,
//
data: Object,
//
organizationList: Array,
// id
organizationId: Number
},
data() {
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,
//
isUpdate: false,
//
roleList: []
}
},
watch: {
export default {
name: 'ContentEdit',
// components: {TinymceEditor},
props: {
//
visible: Boolean,
//
edit_data: Object,
//
edit_rule: Array
},
data() {
if (this.data) {
this.form = Object.assign({}, this.data, {
roleIds: this.data.roles.map(d => d.roleId)
});
this.isUpdate = true;
} else {
this.form = {organizationId: this.organizationId};
this.isUpdate = false;
return {
//
loading: false,
//
isUpdate: false,
//
roleList: [],
//
dig_form: {},
//
dig_value: {},
//
dig_rule: [],
//
dig_option: {
form: {
labelPosition: 'left',
size: "medium"
},
row: {
//
gutter: 8
},
//
onSubmit: function(formData) {
alert(JSON.stringify(formData))
}
},
}
},
organizationId() {
if (!this.isUpdate) {
this.form = {organizationId: this.organizationId};
watch: {
edit_rule: {
handler(valNew) {
// console.log("")
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;
} else {
// this.dig_value = {}
formCreate.resetFields()
this.isUpdate = false;
}
},
deep: true
}
}
},
mounted() {
// this.queryRoles(); //
},
methods: {
/* 下拉树组件格式化数据 */
normalizer(d) {
return {
id: d.organizationId,
label: d.organizationName
};
},
/* 保存编辑 */
save() {
this.$refs['form'].validate((valid) => {
if (valid) {
this.loading = true;
this.$http[this.isUpdate ? 'put' : 'post']('/sys/user', this.form).then(res => {
this.loading = false;
if (res.data.code === 0) {
this.$message({type: 'success', message: res.data.msg});
if (!this.isUpdate) {
this.form = {};
}
this.updateVisible(false);
this.$emit('done');
} else {
this.$message.error(res.data.msg);
}
}).catch(e => {
this.loading = false;
this.$message.error(e.message);
});
} else {
return false;
}
});
created() {
formCreate.component('editor', TinymceEditor);
},
/* 更新visible */
updateVisible(value) {
this.$emit('update:visible', value);
mounted() {
// this.queryRoles(); //
},
/* 查询角色列表 */
queryRoles() {
this.$http.get('/sys/role').then(res => {
if (res.data.code === 0) {
this.roleList = res.data.data;
} else {
this.$message.error(res.data.msg);
}
}).catch(e => {
this.$message.error(e.message);
});
methods: {
/* 下拉树组件格式化数据 */
normalizer(d) {
return {
id: d.organizationId,
label: d.organizationName
};
},
/* 保存编辑 */
save() {
// this.$refs['form'].validate((valid) => {
// if (valid) {
this.loading = true;
this.$http[this.isUpdate ? 'put' : 'post']('/sys/user', this.dig_value).then(res => {
this.loading = false;
if (res.data.code === 0) {
this.$message({
type: 'success',
message: res.data.msg
});
if (!this.isUpdate) {
this.dig_value = {};
}
this.updateVisible(false);
this.$emit('done');
} else {
this.$message.error(res.data.msg);
}
}).catch(e => {
this.loading = false;
this.$message.error(e.message);
});
// } else {
// return false;
// }
// });
},
/* 更新visible */
updateVisible(value) {
this.$emit('update:visible', value);
},
/* 查询角色列表 */
/* queryRoles() {
this.$http.get('/sys/role').then(res => {
if (res.data.code === 0) {
this.roleList = res.data.data;
} else {
this.$message.error(res.data.msg);
}
}).catch(e => {
this.$message.error(e.message);
});
} */
}
}
}
</script>
<style scoped>

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

@ -6,6 +6,7 @@
:datasource="url"
:columns="columns"
:where="where"
:parse-data="parseData"
height="calc(100vh - 261px)"
tool-class="ele-toolbar-form">
<!-- 表头工具栏 -->
@ -17,7 +18,7 @@
@keyup.enter.native="reload"
@submit.native.prevent>
<el-row :gutter="10">
<el-col :md="8">
<el-col :md="12">
<el-form-item>
<el-input
v-model="where.title"
@ -26,7 +27,7 @@
size="small"/>
</el-form-item>
</el-col>
<el-col :md="15">
<el-col :md="12">
<div class="ele-form-actions">
<el-button
type="primary"
@ -36,7 +37,7 @@
size="small">查询
</el-button>
<el-button
@click="openEdit(null)"
@click="openEdit"
type="primary"
icon="el-icon-plus"
class="ele-btn-icon"
@ -49,7 +50,7 @@
</template>
<!-- 角色列 -->
<!-- 状态列 -->
<template slot="state" slot-scope="{row}">
<template slot="status" slot-scope="{row}">
<el-switch
v-model="row.status"
@change="editState(row)"
@ -80,15 +81,19 @@
<!-- 编辑弹窗 -->
<content-edit
:visible.sync="showEdit"
:data="current"
:edit_data="current"
:edit_rule="edit_rule"
@done="reload"/>
<!--
:cate_list="cate_list"
:cate_id="cate_id"
@done="reload"/>
-->
</div>
</template>
<script>
import ContentEdit from './content-edit';
import { getForm } from "@/views/content/create_form.js";
export default {
name: 'contentList',
@ -106,50 +111,8 @@ export default {
//
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',
fixed: 'right',
label: '操作',
width: 130,
align: 'center',
@ -168,6 +131,8 @@ export default {
where: {
cate_id: this.cate_id
},
//
edit_rule: null,
//
current: null,
//
@ -175,14 +140,74 @@ export default {
}
},
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() {
this.$refs.table.reload({page: 1});
},
/* 显示编辑 */
openEdit(row) {
this.current = row;
if (row) {
this.current = row;
} else {
this.current = 0;
}
console.log(row)
this.showEdit = true;
},
/* 删除 */
@ -211,8 +236,8 @@ export default {
if (res.data.code === 0) {
this.$message({type: 'success', message: res.data.msg});
} else {
row.state = !row.state ? 1 : 0;
this.$message.error(res.data.msg);
row.status = !row.status ? 1 : 0;
}
}).catch(e => {
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
}

24
src/views/content/index.vue

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

Loading…
Cancel
Save