|
@@ -4,9 +4,13 @@ import {rCode} from "../map/rcodeMap_esm";
|
|
|
import {handle} from "../until/handle";
|
|
import {handle} from "../until/handle";
|
|
|
import InputRow from "./public/form/inputRow.vue";
|
|
import InputRow from "./public/form/inputRow.vue";
|
|
|
import RoundedTitle from "./public/roundedTitle.vue";
|
|
import RoundedTitle from "./public/roundedTitle.vue";
|
|
|
-import dbField_esm from "../map/dbField_esm";
|
|
|
|
|
|
|
+import dbField_esm, {db_base} from "../map/dbField_esm";
|
|
|
import {FormVerify} from "kind-form-verify";
|
|
import {FormVerify} from "kind-form-verify";
|
|
|
import {fieldCheck} from "../until/form/fieldVerify";
|
|
import {fieldCheck} from "../until/form/fieldVerify";
|
|
|
|
|
+import Pop from "./public/pop.vue";
|
|
|
|
|
+import PopCard from "./public/popCard.vue";
|
|
|
|
|
+import ImageTable from "./public/imageTable.vue";
|
|
|
|
|
+import {urlAddParam} from "@/until/url";
|
|
|
|
|
|
|
|
const emptyType = {
|
|
const emptyType = {
|
|
|
type_name: '',
|
|
type_name: '',
|
|
@@ -17,7 +21,7 @@ const emptyType = {
|
|
|
let formVerify = null;
|
|
let formVerify = null;
|
|
|
export default {
|
|
export default {
|
|
|
name: 'typeEdit',
|
|
name: 'typeEdit',
|
|
|
- components: {RoundedTitle, InputRow},
|
|
|
|
|
|
|
+ components: {ImageTable, PopCard, Pop, RoundedTitle, InputRow},
|
|
|
props: {
|
|
props: {
|
|
|
},
|
|
},
|
|
|
data () {
|
|
data () {
|
|
@@ -34,11 +38,11 @@ export default {
|
|
|
state: 0,
|
|
state: 0,
|
|
|
},
|
|
},
|
|
|
type_logo: {
|
|
type_logo: {
|
|
|
- val: "",
|
|
|
|
|
- oldVal: "",
|
|
|
|
|
- init: "",
|
|
|
|
|
- msg: "",
|
|
|
|
|
- state: 0,
|
|
|
|
|
|
|
+ val: '',
|
|
|
|
|
+ init: '',
|
|
|
|
|
+ msg: '',
|
|
|
|
|
+ reCheckField: 'fileData',
|
|
|
|
|
+ state: 0
|
|
|
},
|
|
},
|
|
|
type_sort: {
|
|
type_sort: {
|
|
|
val: 0,
|
|
val: 0,
|
|
@@ -54,9 +58,37 @@ export default {
|
|
|
msg: "",
|
|
msg: "",
|
|
|
state: 0,
|
|
state: 0,
|
|
|
reCheckField: 'type_name',
|
|
reCheckField: 'type_name',
|
|
|
|
|
+ },
|
|
|
|
|
+ seo_key: {
|
|
|
|
|
+ val: "",
|
|
|
|
|
+ oldVal: "",
|
|
|
|
|
+ init: "",
|
|
|
|
|
+ msg: "",
|
|
|
|
|
+ state: 0,
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
- api: ''
|
|
|
|
|
|
|
+ api: '',
|
|
|
|
|
+ queryParams : {},
|
|
|
|
|
+ showLogoDialog: false,
|
|
|
|
|
+ fileType: db_base.fileType.svg,
|
|
|
|
|
+ loading: false,
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ computed: {
|
|
|
|
|
+ tags () {
|
|
|
|
|
+ // 拆分tags
|
|
|
|
|
+ let tags = this.formType.seo_key.val
|
|
|
|
|
+ if (!tags) {
|
|
|
|
|
+ return [];
|
|
|
|
|
+ }
|
|
|
|
|
+ // 去除空字符串
|
|
|
|
|
+ tags = tags.replace(/\s/g,'')
|
|
|
|
|
+ let tagArr = tags.split(',')
|
|
|
|
|
+ // 标签去重
|
|
|
|
|
+ tagArr = [...new Set(tagArr)]
|
|
|
|
|
+ // 移除空标签
|
|
|
|
|
+ tagArr = tagArr.filter(item => item)
|
|
|
|
|
+ return tagArr
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
mounted() {
|
|
mounted() {
|
|
@@ -74,9 +106,10 @@ export default {
|
|
|
* @param api
|
|
* @param api
|
|
|
* @param object
|
|
* @param object
|
|
|
*/
|
|
*/
|
|
|
- init (title, api, object) {
|
|
|
|
|
|
|
+ init (title, api, object, queryParams) {
|
|
|
|
|
|
|
|
this.api = api
|
|
this.api = api
|
|
|
|
|
+ this.queryParams = queryParams ? queryParams : {}
|
|
|
if (!api){
|
|
if (!api){
|
|
|
this.$message.error('请设置api地址')
|
|
this.$message.error('请设置api地址')
|
|
|
throw new Error('请设置api地址')
|
|
throw new Error('请设置api地址')
|
|
@@ -96,6 +129,7 @@ export default {
|
|
|
this.formType.type_logo.init = type.type_logo
|
|
this.formType.type_logo.init = type.type_logo
|
|
|
this.formType.type_sort.init = type.type_sort
|
|
this.formType.type_sort.init = type.type_sort
|
|
|
this.formType.type_key.init = type.type_key
|
|
this.formType.type_key.init = type.type_key
|
|
|
|
|
+ this.formType.seo_key.init = type.seo_key
|
|
|
this.isInitialized = true
|
|
this.isInitialized = true
|
|
|
formVerify = new FormVerify(
|
|
formVerify = new FormVerify(
|
|
|
this.formType,
|
|
this.formType,
|
|
@@ -106,6 +140,9 @@ export default {
|
|
|
console.log(msg);
|
|
console.log(msg);
|
|
|
};
|
|
};
|
|
|
},
|
|
},
|
|
|
|
|
+ updateQueryParams(params){
|
|
|
|
|
+ this.queryParams = params
|
|
|
|
|
+ },
|
|
|
initForm() {
|
|
initForm() {
|
|
|
|
|
|
|
|
},
|
|
},
|
|
@@ -116,26 +153,57 @@ export default {
|
|
|
handleSave () {
|
|
handleSave () {
|
|
|
this.executeSubmitData()
|
|
this.executeSubmitData()
|
|
|
},
|
|
},
|
|
|
|
|
+ deleteTag(tag){
|
|
|
|
|
+ let tagArr = this.tags
|
|
|
|
|
+ let index = tagArr.indexOf(tag)
|
|
|
|
|
+ tagArr.splice(index, 1)
|
|
|
|
|
+ this.formType.seo_key.val = tagArr.join(',')
|
|
|
|
|
+ this.formType.seo_key.msg = ''
|
|
|
|
|
+ },
|
|
|
handleCancel () {
|
|
handleCancel () {
|
|
|
this.close()
|
|
this.close()
|
|
|
},
|
|
},
|
|
|
handleReset() {
|
|
handleReset() {
|
|
|
this.initForm()
|
|
this.initForm()
|
|
|
},
|
|
},
|
|
|
|
|
+ openLogoHandle() {
|
|
|
|
|
+ this.showLogoDialog = true
|
|
|
|
|
+ },
|
|
|
|
|
+ closeLogoHandle() {
|
|
|
|
|
+ this.showLogoDialog = false
|
|
|
|
|
+ },
|
|
|
|
|
+ selectImageHandle(fileData){
|
|
|
|
|
+ console.log('okHandle');
|
|
|
|
|
+ console.log(fileData);
|
|
|
|
|
+ this.showLogoDialog = false;
|
|
|
|
|
+ // 选择封面图片
|
|
|
|
|
+ this.formType.type_logo.val = fileData.filePath;
|
|
|
|
|
+ this.formType.type_logo.init = fileData.filePath;
|
|
|
|
|
+ this.formType.type_logo.msg = '';
|
|
|
|
|
+ this.formType.type_logo.state = 0;
|
|
|
|
|
+ this.formType.type_logo.showText = fileData.filePath;
|
|
|
|
|
+ },
|
|
|
async executeSubmitData(){
|
|
async executeSubmitData(){
|
|
|
if(!this.isInitialized)
|
|
if(!this.isInitialized)
|
|
|
{
|
|
{
|
|
|
throw new Error('请先初始化类别编辑器')
|
|
throw new Error('请先初始化类别编辑器')
|
|
|
}
|
|
}
|
|
|
let url = this.api;
|
|
let url = this.api;
|
|
|
|
|
+ // 拼接param参数
|
|
|
if(this.typeId){
|
|
if(this.typeId){
|
|
|
- url = url + '?id=' + this.typeId
|
|
|
|
|
|
|
+ this.queryParams.id = this.typeId
|
|
|
}
|
|
}
|
|
|
|
|
+ url = urlAddParam(url, this.queryParams)
|
|
|
|
|
+ console.log(url)
|
|
|
// 检测参数
|
|
// 检测参数
|
|
|
if(!formVerify.check()) {
|
|
if(!formVerify.check()) {
|
|
|
return this.$message.error('参数错误')
|
|
return this.$message.error('参数错误')
|
|
|
}
|
|
}
|
|
|
let params = formVerify.getFormData()
|
|
let params = formVerify.getFormData()
|
|
|
|
|
+ params = {
|
|
|
|
|
+ ...params,
|
|
|
|
|
+ ...this.queryParams,
|
|
|
|
|
+ }
|
|
|
let [err, res] = await handle(axios.post(url, params))
|
|
let [err, res] = await handle(axios.post(url, params))
|
|
|
if(err){
|
|
if(err){
|
|
|
this.$message.error(`[${this.title}] 失败:${err.message}`)
|
|
this.$message.error(`[${this.title}] 失败:${err.message}`)
|
|
@@ -161,13 +229,26 @@ export default {
|
|
|
<rounded-title class="text-xl">
|
|
<rounded-title class="text-xl">
|
|
|
<span>{{ title }}</span>
|
|
<span>{{ title }}</span>
|
|
|
</rounded-title>
|
|
</rounded-title>
|
|
|
|
|
+
|
|
|
<input-row class="mt-2" :msg="formType.type_name.msg"
|
|
<input-row class="mt-2" :msg="formType.type_name.msg"
|
|
|
label="类型名称">
|
|
label="类型名称">
|
|
|
<a-input v-model="formType.type_name.val" placeholder="类型名称"></a-input>
|
|
<a-input v-model="formType.type_name.val" placeholder="类型名称"></a-input>
|
|
|
</input-row>
|
|
</input-row>
|
|
|
<input-row class="mt-2" :msg="formType.type_logo.msg"
|
|
<input-row class="mt-2" :msg="formType.type_logo.msg"
|
|
|
label="类型logo">
|
|
label="类型logo">
|
|
|
- <a-input v-model="formType.type_logo.val" placeholder="类型logo"></a-input>
|
|
|
|
|
|
|
+ <div class="svg-upload">
|
|
|
|
|
+ <svg-icon :svgHref="formType.type_logo.val"></svg-icon>
|
|
|
|
|
+ <div v-if="!formType.type_logo.val" class="null-box">
|
|
|
|
|
+ 选择图标
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="absolute w-full h-full left-0 top-0
|
|
|
|
|
+ justify-center text-white bg-gray-400
|
|
|
|
|
+ items-center text-2xl flex opacity-0 hover:opacity-70"
|
|
|
|
|
+ @click="openLogoHandle"
|
|
|
|
|
+ >
|
|
|
|
|
+ 点击选择图标文件
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
</input-row>
|
|
</input-row>
|
|
|
<input-row class="mt-2" :msg="formType.type_sort.msg"
|
|
<input-row class="mt-2" :msg="formType.type_sort.msg"
|
|
|
label="排序">
|
|
label="排序">
|
|
@@ -176,7 +257,38 @@ export default {
|
|
|
</input-row>
|
|
</input-row>
|
|
|
<input-row class="mt-2" :msg="formType.type_key.msg"
|
|
<input-row class="mt-2" :msg="formType.type_key.msg"
|
|
|
label="类型关键字key">
|
|
label="类型关键字key">
|
|
|
- <a-input v-model="formType.type_key.val" placeholder="类型关键字key"></a-input>
|
|
|
|
|
|
|
+ <a-tooltip>
|
|
|
|
|
+ <template slot="title">
|
|
|
|
|
+ 用于浏览器的搜索关键字, 优化用户访问体验, 禁止重复
|
|
|
|
|
+ </template>
|
|
|
|
|
+ <a-input v-model="formType.type_key.val" placeholder="类型关键字key"></a-input>
|
|
|
|
|
+ </a-tooltip>
|
|
|
|
|
+ </input-row>
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+ <input-row class="mt-2" :msg="formType.seo_key.msg"
|
|
|
|
|
+ label="seo关键字">
|
|
|
|
|
+ <a-tooltip>
|
|
|
|
|
+ <template slot="title">
|
|
|
|
|
+ 搜索引擎关注的关键字,多个用英文逗号隔开
|
|
|
|
|
+ </template>
|
|
|
|
|
+ <a-input v-model="formType.seo_key.val" placeholder="seo关键字"></a-input>
|
|
|
|
|
+ </a-tooltip>
|
|
|
|
|
+
|
|
|
|
|
+ </input-row>
|
|
|
|
|
+
|
|
|
|
|
+ <input-row class="mt-2"
|
|
|
|
|
+ label="">
|
|
|
|
|
+ <div class="tags">
|
|
|
|
|
+ <a-tag
|
|
|
|
|
+ v-for="tag in tags"
|
|
|
|
|
+ :key="tag"
|
|
|
|
|
+ color="#2db7f5"
|
|
|
|
|
+ closable @close="deleteTag"
|
|
|
|
|
+ >
|
|
|
|
|
+ {{ tag }}
|
|
|
|
|
+ </a-tag>
|
|
|
|
|
+ </div>
|
|
|
</input-row>
|
|
</input-row>
|
|
|
|
|
|
|
|
<div class="mt-2">
|
|
<div class="mt-2">
|
|
@@ -184,9 +296,47 @@ export default {
|
|
|
<a-button type="primary" @click="handleSave">确认</a-button>
|
|
<a-button type="primary" @click="handleSave">确认</a-button>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
+ <pop :show="showLogoDialog" :loading="loading">
|
|
|
|
|
+ <pop-card>
|
|
|
|
|
+ <template slot="close-group">
|
|
|
|
|
+ <a-button type="danger" @click="closeLogoHandle">关闭</a-button>
|
|
|
|
|
+ </template>
|
|
|
|
|
+ <image-table
|
|
|
|
|
+ class="w-full h-full"
|
|
|
|
|
+ :fileType="fileType"
|
|
|
|
|
+ @cancel="closeLogoHandle"
|
|
|
|
|
+ @ok="selectImageHandle">
|
|
|
|
|
+ </image-table>
|
|
|
|
|
+ </pop-card>
|
|
|
|
|
+ </pop>
|
|
|
</div>
|
|
</div>
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
|
<style scoped>
|
|
<style scoped>
|
|
|
-
|
|
|
|
|
|
|
+.svg-upload{
|
|
|
|
|
+ width: 90px;
|
|
|
|
|
+ height: 90px;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ position: relative;
|
|
|
|
|
+ border: 1px solid #ccc;
|
|
|
|
|
+ border-radius: 5px;
|
|
|
|
|
+ font-size: 45px;
|
|
|
|
|
+}
|
|
|
|
|
+.svg-upload .null-box{
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ height: 100%;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ font-size: 20px;
|
|
|
|
|
+}
|
|
|
|
|
+.tags{
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-wrap: wrap;
|
|
|
|
|
+ justify-content: flex-start;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+}
|
|
|
</style>
|
|
</style>
|