|
|
@@ -0,0 +1,306 @@
|
|
|
+<template>
|
|
|
+ <el-dialog
|
|
|
+ :title="title"
|
|
|
+ :visible.sync="dialogFormVisible"
|
|
|
+ width="50%"
|
|
|
+ @close="close"
|
|
|
+ >
|
|
|
+ <el-form ref="form" label-width="100px" :model="form" :rules="rules">
|
|
|
+ <!-- <el-form-item label="父级" prop="parent_id">
|
|
|
+ <el-select
|
|
|
+ ref="selectblur"
|
|
|
+ v-model="form.parent_id"
|
|
|
+ placeholder="请选择上级"
|
|
|
+ style="width: 100%"
|
|
|
+ @change="$forceUpdate()"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ :label="form.parent_name"
|
|
|
+ style="height: auto; padding: 0"
|
|
|
+ :value="form.parent_id"
|
|
|
+ >
|
|
|
+ <el-tree
|
|
|
+ ref="tree"
|
|
|
+ :data="treeData"
|
|
|
+ default-expand-all
|
|
|
+ :props="defaultProps"
|
|
|
+ @node-click="handleNodeClick"
|
|
|
+ />
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item> -->
|
|
|
+ <el-form-item label="标题:" prop="name">
|
|
|
+ <el-input v-model="form.name" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="key:" prop="key">
|
|
|
+ <el-input v-model="form.key" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="类型:" prop="type">
|
|
|
+ <el-select
|
|
|
+ v-model="form.type"
|
|
|
+ default-first-option
|
|
|
+ placeholder="请选择点击类型"
|
|
|
+ style="width: 100%"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in type_list"
|
|
|
+ :key="item.type"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.type"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <div class="star">
|
|
|
+ <span class="xing">*</span>
|
|
|
+ <el-form-item v-if="form.type == 2" label="配置内容:" prop="value">
|
|
|
+ <tinymce v-model="form.value" :height="400" :width="95%" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item v-if="form.type == 0" label="配置内容:" prop="value">
|
|
|
+ <el-input v-model="form.value" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item v-if="form.type == 1" label="配置内容:" prop="value">
|
|
|
+ <el-upload
|
|
|
+ :action="base_url + '/upload'"
|
|
|
+ class="upload-demo"
|
|
|
+ :data="uploadData"
|
|
|
+ :file-list="fileList"
|
|
|
+ :limit="limit"
|
|
|
+ list-type="picture"
|
|
|
+ multiple
|
|
|
+ :on-error="uploadErr"
|
|
|
+ :on-success="uploadSuccess"
|
|
|
+ >
|
|
|
+ <el-button size="small" type="primary" @click="clearFile">
|
|
|
+ {{ title == "添加" ? "上传照片" : "重新上传" }}
|
|
|
+ </el-button>
|
|
|
+ <div slot="tip" class="el-upload__tip">
|
|
|
+ 只能上传jpg/png文件，且不超过500kb
|
|
|
+ </div>
|
|
|
+ </el-upload>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ <el-form-item
|
|
|
+ v-if="title == '编辑' && imageUrl && form.type == 1"
|
|
|
+ label=""
|
|
|
+ prop="cover"
|
|
|
+ >
|
|
|
+ <div class="ref-image">
|
|
|
+ <img :src="imageUrl" />
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="排序:" prop="sort">
|
|
|
+ <el-input v-model="form.sort" type="number" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="状态:" prop="status">
|
|
|
+ <el-radio-group v-model="form.status">
|
|
|
+ <el-radio :label="1">正常</el-radio>
|
|
|
+ <el-radio :label="0">禁用</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <template #footer>
|
|
|
+ <el-button @click="close">取 消</el-button>
|
|
|
+ <el-button v-if="title == '编辑'" type="primary" @click="save">
|
|
|
+ 确 定
|
|
|
+ </el-button>
|
|
|
+ <el-button v-if="title == '添加'" type="primary" @click="add">
|
|
|
+ 添 加
|
|
|
+ </el-button>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { doEdit, doAdd, getList } from "../api/index";
|
|
|
+import Tinymce from "@/components/Tinymce";
|
|
|
+export default {
|
|
|
+ name: "MenuManagementEdit",
|
|
|
+ components: { Tinymce },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ form: {
|
|
|
+ status: 1,
|
|
|
+ sort: 0,
|
|
|
+ type: 2,
|
|
|
+ parent_id: 0,
|
|
|
+ },
|
|
|
+ type_list: [
|
|
|
+ {
|
|
|
+ type: 0,
|
|
|
+ name: "字符串",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 1,
|
|
|
+ name: "图片",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 2,
|
|
|
+ name: "文本",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ treeData: [],
|
|
|
+ defaultProps: {
|
|
|
+ children: "children",
|
|
|
+ label: function (data) {
|
|
|
+ return data.name;
|
|
|
+ },
|
|
|
+ leaf: true,
|
|
|
+ },
|
|
|
+ action: "", //图片上传地址
|
|
|
+ uploadShow: true,
|
|
|
+ uploadData: { file_type: "img", type: "cms_setting" },
|
|
|
+ fileList: [],
|
|
|
+ limit: 1,
|
|
|
+ imageUrl: "",
|
|
|
+ rules: {
|
|
|
+ parent_id: [
|
|
|
+ { required: true, trigger: "change", message: "请选择父级" },
|
|
|
+ ],
|
|
|
+ name: [{ required: true, trigger: "blur", message: "请填写参数名称" }],
|
|
|
+ key: [{ required: true, trigger: "blur", message: "请填写key" }],
|
|
|
+ type: [{ required: true, trigger: "blur", message: "请选择类型" }],
|
|
|
+ sort: [{ required: true, trigger: "blur", message: "请填写排序" }],
|
|
|
+ status: [{ required: true, trigger: "change", message: "请选择状态" }],
|
|
|
+ },
|
|
|
+ title: "",
|
|
|
+ dialogFormVisible: false,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ // this.action = baseURL + "/base/common/upload";
|
|
|
+ this.fileList = [];
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // translateTitle,
|
|
|
+ //编辑
|
|
|
+ showEdit(row) {
|
|
|
+ this.fetchData();
|
|
|
+ console.log(row, "8888888888");
|
|
|
+ if (!row) {
|
|
|
+ this.title = "添加";
|
|
|
+ } else {
|
|
|
+ this.title = "编辑";
|
|
|
+ this.form = Object.assign({}, row);
|
|
|
+ this.form.parent_id = this.form.parent_id
|
|
|
+ ? this.form.parent_name
|
|
|
+ : "--";
|
|
|
+ console.log(this.form, "cms/setting/delete");
|
|
|
+ if (this.form.type == 1) {
|
|
|
+ this.imageUrl = this.form.value.url;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.dialogFormVisible = true;
|
|
|
+ },
|
|
|
+ //上传图片
|
|
|
+ //上传成功
|
|
|
+ uploadSuccess(response) {
|
|
|
+ console.log(response, "图片上传成功");
|
|
|
+ this.form.value = response.data.id;
|
|
|
+ // this.form.value = response.data.url
|
|
|
+ this.$refs.form.validateField("cover");
|
|
|
+ },
|
|
|
+
|
|
|
+ //上传失败
|
|
|
+ uploadErr() {
|
|
|
+ this.$message.error("上传失败，请重新上传");
|
|
|
+ },
|
|
|
+ clearFile() {
|
|
|
+ console.log("上传之前");
|
|
|
+ this.imageUrl = "";
|
|
|
+ },
|
|
|
+ close() {
|
|
|
+ this.$refs["form"].resetFields();
|
|
|
+ this.form = this.$options.data().form;
|
|
|
+ this.dialogFormVisible = false;
|
|
|
+ },
|
|
|
+ //编辑保存
|
|
|
+ save() {
|
|
|
+ console.log(this.form.value, "value");
|
|
|
+ if (this.form.parent_id == "--") this.form.parent_id = 0;
|
|
|
+ if (!this.form.value) {
|
|
|
+ this.$message.error("请填写配置内容");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.$refs["form"].validate(async (valid) => {
|
|
|
+ if (valid) {
|
|
|
+ const { message } = await doEdit(this.form);
|
|
|
+ this.$baseMessage(
|
|
|
+ message,
|
|
|
+ "success",
|
|
|
+ false,
|
|
|
+ "vab-hey-message-success"
|
|
|
+ );
|
|
|
+ this.$emit("fetch-data");
|
|
|
+ this.close();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ async fetchData() {
|
|
|
+ this.treeData = [];
|
|
|
+ let arr = [
|
|
|
+ {
|
|
|
+ id: 0,
|
|
|
+ name: "顶级",
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ const { data } = await getList();
|
|
|
+ console.log(data, "编辑hhhhhhhh");
|
|
|
+ this.treeData = arr.concat(data);
|
|
|
+ console.log(arr, "arr");
|
|
|
+
|
|
|
+ console.log(this.treeData, "this.treeData");
|
|
|
+ },
|
|
|
+ handleNodeClick(node) {
|
|
|
+ console.log(node, "99999");
|
|
|
+ this.$refs.selectblur.blur();
|
|
|
+
|
|
|
+ this.form.parent_name = node.name;
|
|
|
+ this.form.parent_id = node.id;
|
|
|
+ this.$forceUpdate();
|
|
|
+ console.log(this.form, "form");
|
|
|
+ },
|
|
|
+ //添加保存
|
|
|
+ //添加
|
|
|
+ add() {
|
|
|
+ if (!this.form.value) {
|
|
|
+ this.$message.error("请填写配置内容");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.$refs["form"].validate(async (valid) => {
|
|
|
+ if (valid) {
|
|
|
+ const { message } = await doAdd(this.form);
|
|
|
+ this.$baseMessage(
|
|
|
+ message,
|
|
|
+ "success",
|
|
|
+ false,
|
|
|
+ "vab-hey-message-success"
|
|
|
+ );
|
|
|
+ this.$emit("fetch-data");
|
|
|
+ this.close();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.ref-image {
|
|
|
+ height: 150px;
|
|
|
+ overflow: hidden;
|
|
|
+ border: solid 1px #eee;
|
|
|
+ border-radius: 8px;
|
|
|
+}
|
|
|
+.ref-image img {
|
|
|
+ width: auto;
|
|
|
+ height: 150px;
|
|
|
+}
|
|
|
+.star {
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+.xing {
|
|
|
+ position: absolute;
|
|
|
+ top: 10px;
|
|
|
+ left: 20px;
|
|
|
+ color: red;
|
|
|
+}
|
|
|
+</style>
|
