peihaoyu/nebula
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

产品管理页修改功能完成

Browse Source
This commit is contained in:
祝梦园 2024-03-18 15:45:01 +08:00
parent f6c36c4b34
commit 68fd037ea8
3 changed files with 450 additions and 441 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
pages/admin.vue
View File

@ -131,8 +131,8 @@ export default {
}, },
{ {
title: '产品管理', title: '产品管理',
name: 'admin-product', name: 'admin-products',
path: '/admin/product/index', path: '/admin/products',
icon: 'el-icon-box', icon: 'el-icon-box',
closable: true closable: true
}, },

869
pages/admin/product/post/_product_id.vue
View File

@ -1,435 +1,456 @@
<template> <template>
<div> <el-row class="products">
test <el-col>
test <el-form ref='formStore' :model='formStore' :rules='rules' label-poionsit='right' label-width='110px'>
</div> <div style="margin-bottom:20px">
<img :src="formStore.productImgUrl" style="width: 120px;height: 120px;margin: 0 auto;display: block"
@click="cropperVisible=true">
</div>
<el-form-item label='产品名称' prop='productTitle'>
<el-input v-model='formStore.productTitle' placeholder='请输入产品名称'/>
</el-form-item>
<el-form-item label='产品价格' prop='code'>
<el-input v-model='formStore.productPrice' placeholder='请输入产品价格'/>
</el-form-item>
<el-form-item label='产品描述' prop='type'>
<div id="contentEditor"></div>
</el-form-item>
<el-form-item label='tags' prop='order'>
<el-input v-model='formStore.tags' placeholder='请输入tags'/>
</el-form-item>
</el-form>
<el-col style="margin-top: 1rem;">
</el-col>
<el-col v-if="!isEdit" style="margin-top: 1rem;padding-right:3rem;text-align: right;">
<el-button :loading="doLoading" plain @click="saveArticle">保存草稿</el-button>
<el-button :loading="doLoading" plain type="primary" @click="postArticle">发布</el-button>
</el-col>
<el-col v-else style="margin-top: 1rem;padding-right:3rem;text-align: right;">
<el-button :loading="doLoading" plain type="danger" @click="deleteArticle">删除</el-button>
<el-button v-if="productStatus === '1'" :loading="doLoading" plain @click="saveArticle">保存草稿</el-button>
<el-button v-if="productStatus === '0'" :loading="doLoading" plain type="primary" @click="postArticle">更新
</el-button>
<el-button v-else :loading="doLoading" plain type="primary" @click="postArticle">发布</el-button>
</el-col>
</el-col>
<!-- <el-col v-else class="text-center">-->
<!-- <el-alert-->
<!-- title="用户无权限"-->
<!-- type="warning"-->
<!-- center-->
<!-- show-icon-->
<!-- :closable="false">-->
<!-- </el-alert>-->
<!-- </el-col>-->
<ImgCropper :avatarUrl="formStore.productImgUrl||''" :visible.sync='cropperVisible'
@onSubmit="updateUser"></ImgCropper>
</el-row>
</template> </template>
<!--<template>-->
<!-- <el-row class="products">-->
<!-- <el-col>-->
<!-- <el-col>-->
<!-- <el-input-->
<!-- v-model="productTitle"-->
<!-- class="product-title"-->
<!-- placeholder="请输入标题"-->
<!-- @change="setLocalstorage('title',productTitle)">-->
<!-- </el-input>-->
<!-- </el-col>-->
<!-- <el-col>-->
<!-- <div id="contentEditor"></div>-->
<!-- </el-col>-->
<!-- <el-col style="margin-top: 1rem;">-->
<!-- </el-col>-->
<!-- <el-col v-if="!isEdit" style="margin-top: 1rem;padding-right:3rem;text-align: right;">-->
<!-- <el-button :loading="doLoading" @click="saveArticle" plain>保存草稿</el-button>-->
<!-- <el-button type="primary" :loading="doLoading" @click="postArticle" plain>发布</el-button>-->
<!-- </el-col>-->
<!-- <el-col v-else style="margin-top: 1rem;padding-right:3rem;text-align: right;">-->
<!-- <el-button type="danger" :loading="doLoading" @click="deleteArticle" plain>删除</el-button>-->
<!-- <el-button v-if="productStatus === '1'" :loading="doLoading" @click="saveArticle" plain>保存草稿</el-button>-->
<!-- <el-button v-if="productStatus === '0'" :loading="doLoading" type="primary" @click="postArticle" plain>更新</el-button>-->
<!-- <el-button v-else type="primary" :loading="doLoading" @click="postArticle" plain>发布</el-button>-->
<!-- </el-col>-->
<!-- </el-col>-->
<!--&lt;!&ndash; <el-col v-else class="text-center">&ndash;&gt;-->
<!--&lt;!&ndash; <el-alert&ndash;&gt;-->
<!--&lt;!&ndash; title="用户无权限"&ndash;&gt;-->
<!--&lt;!&ndash; type="warning"&ndash;&gt;-->
<!--&lt;!&ndash; center&ndash;&gt;-->
<!--&lt;!&ndash; show-icon&ndash;&gt;-->
<!--&lt;!&ndash; :closable="false">&ndash;&gt;-->
<!--&lt;!&ndash; </el-alert>&ndash;&gt;-->
<!--&lt;!&ndash; </el-col>&ndash;&gt;-->
<!-- </el-row>-->
<!--</template>-->
<!--<script>--> <script>
<!--import Vue from 'vue';--> import Vue from 'vue';
<!--import {mapState} from 'vuex';--> import {mapState} from 'vuex';
<!--import apiConfig from '~/config/api.config';--> import apiConfig from '~/config/api.config';
import ImgCropper from "~/components/ImgCropper.vue";
import VueCropper from "vue-cropper";
<!--export default {--> const rules = {
<!-- name: "PostProducts",--> productTitle: [
<!-- middleware: 'auth',--> {required: true, message: '请输入公司名称', trigger: 'blur'},
<!-- validate({params, store}) {--> {min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur'}
<!-- if (typeof params.product_id === 'undefined') {--> ],
<!-- return true;--> productDescription: [{required: true, message: '请输入产品描述', trigger: 'blur'}]
<!-- }--> }
<!-- return params.product_id && !isNaN(Number(params.product_id))--> export default {
<!-- },--> name: "PostProducts",
<!-- asyncData({store, params, error}) {--> middleware: 'auth',
<!-- return Promise.all([--> validate({params, store}) {
<!-- store.dispatch('product/fetchPostDetail', params)--> if (typeof params.product_id === 'undefined') {
<!-- .catch(err => error({statusCode: 404}))--> return true;
<!-- ])--> }
<!-- },--> return params.product_id && !isNaN(Number(params.product_id))
<!-- computed: {--> },
<!-- ...mapState({--> asyncData({store, params, error}) {
<!-- product: state => state.product.detail.data--> return Promise.all([
<!-- }),--> store.dispatch('product/fetchPostDetail', params)
<!-- // hasPermissions() {--> .catch(err => error({statusCode: 404}))
<!-- // let account = this.$store.state.auth.user?.nickname;--> ])
<!-- // if (account) {--> },
<!-- // if (this.$route.params.product_id) {--> components: {
<!-- // if (account === this.product.productAuthor.userNickname) {--> VueCropper, ImgCropper
<!-- // return true;--> },
<!-- // }--> computed: {
<!-- // } else {--> ...mapState({
<!-- // return true;--> product: state => state.product.detail.data
<!-- // }--> }),
<!-- // }--> // hasPermissions() {
<!-- // return this.$auth.hasScope('blog_admin') || this.$auth.hasScope('admin');--> // let account = this.$store.state.auth.user?.nickname;
<!-- // }--> // if (account) {
<!-- },--> // if (this.$route.params.product_id) {
<!-- data() {--> // if (account === this.product.productAuthor.userNickname) {
<!-- return {--> // return true;
<!-- contentEditor: null,--> // }
<!-- tokenURL: {--> // } else {
<!-- URL: '',--> // return true;
<!-- linkToImageURL: '',--> // }
<!-- token: ''--> // }
<!-- },--> // return this.$auth.hasScope('blog_admin') || this.$auth.hasScope('admin');
<!-- formStore:{--> // }
<!-- idArticle: 0,--> },
<!-- productTitle: '',--> data() {
<!-- productContent: '',--> return {
<!-- productType: 0,--> contentEditor: null,
<!-- productTags: [],--> tokenURL: {
<!-- productStatus: '0',--> URL: '',
<!-- },--> linkToImageURL: '',
<!-- idArticle: 0,--> token: ''
<!-- productTitle: '',--> },
<!-- productContent: '',--> formStore: {
<!-- productType: 0,--> idArticle: 0,
<!-- productTags: [],--> productTitle: '',
<!-- productStatus: '0',--> productContent: '',
<!-- options: [],--> productType: 0,
<!-- list: [],--> tags: '',
<!-- loading: false,--> productStatus: '0',
<!-- doLoading: false,--> productPrice: 0,
<!-- isEdit: false,--> productImgType: 0
<!-- notificationFlag: true--> },
<!-- }--> idArticle: 0,
<!-- },--> productTitle: '',
<!-- methods: {--> productContent: '',
<!-- _initEditor(data) {--> productType: 0,
<!-- let _ts = this;--> productTags: [],
productStatus: '0',
options: [],
list: [],
loading: false,
doLoading: false,
isEdit: false,
notificationFlag: true,
cropperVisible: false,
rules: rules,
}
},
methods: {
updateUser(data) {
this.formStore.productImgUrl = data
this.formStore.productImgType = 1
this.cropperVisible = false
},
_initEditor(data) {
let _ts = this;
<!-- let toolbar = [--> let toolbar = [
<!-- 'emoji',--> 'emoji',
<!-- 'headings',--> 'headings',
<!-- 'bold',--> 'bold',
<!-- 'italic',--> 'italic',
<!-- 'strike',--> 'strike',
<!-- 'link',--> 'link',
<!-- '|',--> '|',
<!-- 'list',--> 'list',
<!-- 'ordered-list',--> 'ordered-list',
<!-- 'check',--> 'check',
<!-- 'outdent',--> 'outdent',
<!-- 'indent',--> 'indent',
<!-- '|',--> '|',
<!-- 'quote',--> 'quote',
<!-- 'line',--> 'line',
<!-- 'code',--> 'code',
<!-- 'inline-code',--> 'inline-code',
<!-- 'insert-before',--> 'insert-before',
<!-- 'insert-after',--> 'insert-after',
<!-- '|',--> '|',
<!-- 'upload',--> 'upload',
<!-- // 'record',--> // 'record',
<!-- 'table',--> 'table',
<!-- '|',--> '|',
<!-- 'undo',--> 'undo',
<!-- 'redo',--> 'redo',
<!-- '|',--> '|',
<!-- 'edit-mode',--> 'edit-mode',
<!-- {--> {
<!-- name: 'more',--> name: 'more',
<!-- toolbar: [--> toolbar: [
<!-- 'fullscreen',--> 'fullscreen',
<!-- 'both',--> 'both',
<!-- 'preview',--> 'preview',
<!-- 'info'--> 'info'
<!-- ],--> ],
<!-- }]--> }]
<!-- return new Vue.Vditor(data.id, {--> return new Vue.Vditor(data.id, {
<!-- toolbar,--> toolbar,
<!-- mode: 'sv',--> mode: 'sv',
<!-- tab: '\t',--> tab: '\t',
<!-- cdn: apiConfig.VDITOR,--> cdn: apiConfig.VDITOR,
<!-- cache: {--> cache: {
<!-- enable: this.$route.params.product_id ? false : true,--> enable: !this.$route.params.product_id,
<!-- id: this.$route.params.product_id ? this.$route.params.product_id : '',--> id: this.$route.params.product_id ? this.$route.params.product_id : '',
<!-- },--> },
<!-- after() {--> after() {
<!-- _ts.contentEditor.setValue(data.value ? data.value : '');--> _ts.contentEditor.setValue(data.value ? data.value : '');
<!-- },--> },
<!-- hint: {--> hint: {
<!-- emoji: Vue.emoji--> emoji: Vue.emoji
<!-- },--> },
<!-- preview: {--> preview: {
<!-- hljs: {--> hljs: {
<!-- enable: true,--> enable: true,
<!-- lineNumber: true,--> lineNumber: true,
<!-- style: 'github'--> style: 'github'
<!-- },--> },
<!-- markdown: {--> markdown: {
<!-- toc: true,--> toc: true,
<!-- autoSpace: true--> autoSpace: true
<!-- },--> },
<!-- math: {--> math: {
<!-- inlineDigit: true--> inlineDigit: true
<!-- },--> },
<!-- delay: 500,--> delay: 500,
<!-- mode: data.mode,--> mode: data.mode,
<!-- /*url: `${process.env.Server}/api/console/markdown`,*/--> /*url: `${process.env.Server}/api/console/markdown`,*/
<!-- parse: (element) => {--> parse: (element) => {
<!-- if (element.style.display === 'none') {--> if (element.style.display === 'none') {
<!-- return-->
<!-- }-->
<!-- // LazyLoadImage();-->
<!-- // Vue.Vditor.highlightRender({style: 'github'}, element, this.contentEditor);-->
<!-- },-->
<!-- theme: {-->
<!-- cdn: apiConfig.VDITOR_CSS-->
<!-- }-->
<!-- },-->
<!-- upload: {-->
<!-- max: 10 * 1024 * 1024,-->
<!-- url: this.tokenURL.URL,-->
<!-- linkToImgUrl: this.tokenURL.linkToImageURL,-->
<!-- token: this.tokenURL.token,-->
<!-- filename: name => name.replace(/[^(a-zA-Z0-9\u4e00-\u9fa5\.)]/g, '').-->
<!-- replace(/[\?\\/:|<>\*\[\]\(\)\$%\{\}@~]/g, '').-->
<!-- replace('/\\s/g', '')-->
<!-- },-->
<!-- height: data.height,-->
<!-- counter: 102400,-->
<!-- resize: {-->
<!-- enable: data.resize,-->
<!-- },-->
<!-- lang: this.$store.state.locale,-->
<!-- placeholder: data.placeholder,-->
<!-- })-->
<!-- },-->
<!-- setLocalstorage(type) {-->
<!-- if (typeof arguments[0] === 'object') {-->
<!-- localStorage.setItem('productTags', arguments[1]);-->
<!-- return-->
<!-- }-->
<!-- switch (type) {-->
<!-- case 'title': {-->
<!-- localStorage.setItem('product-title', arguments[1])-->
<!-- break;-->
<!-- }-->
<!-- case 'tags': {-->
<!-- localStorage.setItem('product-tags', arguments[1]);-->
<!-- break;-->
<!-- }-->
<!-- }-->
<!-- },-->
<!-- remoteMethod(query) {-->
<!-- if (query !== '') {-->
<!-- this.loading = true;-->
<!-- setTimeout(() => {-->
<!-- this.loading = false;-->
<!-- this.options = this.list.filter(item => {-->
<!-- return item.label.toLowerCase()-->
<!-- .indexOf(query.toLowerCase()) > -1;-->
<!-- });-->
<!-- }, 200);-->
<!-- } else {-->
<!-- this.options = [];-->
<!-- }-->
<!-- },-->
<!-- deleteArticle() {-->
<!-- let _ts = this;-->
<!-- _ts.doLoading = true;-->
<!-- this.$confirm('确定删除吗?', '提示', {-->
<!-- confirmButtonText: '确定',-->
<!-- cancelButtonText: '取消',-->
<!-- type: 'warning'-->
<!-- }).then(() => {-->
<!-- let id = _ts.$route.params.product_id;-->
<!-- _ts.$axios.$delete('/api/product/delete/' + id).then(function (res) {-->
<!-- if (res && res.message) {-->
<!-- _ts.$message(res.message);-->
<!-- return false;-->
<!-- }-->
<!-- localStorage.removeItem('product-title');-->
<!-- localStorage.removeItem('product-tags');-->
<!-- _ts.contentEditor.setValue('');-->
<!-- _ts.$set(_ts, 'notificationFlag', false);-->
<!-- _ts.$router.push({-->
<!-- name: 'index'-->
<!-- })-->
<!-- })-->
<!-- }).catch(() => {-->
<!-- _ts.doLoading = false;-->
<!-- });-->
<!-- },--> }
<!-- async postArticle() {--> // LazyLoadImage();
<!-- let _ts = this;--> // Vue.Vditor.highlightRender({style: 'github'}, element, this.contentEditor);
<!-- _ts.doLoading = true;--> },
<!-- let id = _ts.$route.params.product_id;--> theme: {
<!-- let productContent = _ts.contentEditor.getValue();--> cdn: apiConfig.VDITOR_CSS
<!-- let productContentHtml = await _ts.contentEditor.getHTML();--> }
<!-- if (!(_ts.productTitle && productContent)) {--> },
<!-- _ts.$message("标题/正文不能为空！");--> upload: {
<!-- _ts.doLoading = false;--> max: 10 * 1024 * 1024,
<!-- return false;--> url: this.tokenURL.URL,
<!-- }--> linkToImgUrl: this.tokenURL.linkToImageURL,
<!-- let product = {--> token: this.tokenURL.token,
<!-- idArticle: _ts.idArticle,--> filename: name => name.replace(/[^(a-zA-Z0-9\u4e00-\u9fa5\.)]/g, '').replace(/[\?\\/:|<>\*\[\]\(\)\$%\{\}@~]/g, '').replace('/\\s/g', '')
<!-- productTitle: _ts.productTitle,--> },
<!-- productContent: productContent,--> height: data.height,
<!-- productContentHtml: productContentHtml,--> counter: 102400,
<!-- productTags: _ts.productTags.join(","),--> resize: {
<!-- productStatus: 0--> enable: data.resize,
<!-- };--> },
<!-- _ts.$axios[id ? '$put' : '$post']('/api/product/post', product).then(function (res) {--> lang: this.$store.state.locale,
<!-- if (res) {--> placeholder: data.placeholder,
<!-- if (res.message) {--> })
<!-- _ts.$message(res.message);--> },
<!-- _ts.doLoading = false;--> setLocalstorage(type) {
<!-- return false;--> if (typeof arguments[0] === 'object') {
<!-- }--> localStorage.setItem('productTags', arguments[1]);
<!-- localStorage.removeItem('product-title');--> return
<!-- localStorage.removeItem('product-tags');--> }
<!-- _ts.contentEditor.setValue('');--> switch (type) {
<!-- _ts.$store.commit('product/clearDetailData')--> case 'title': {
<!-- _ts.$set(_ts, 'notificationFlag', false);--> localStorage.setItem('product-title', arguments[1])
<!-- _ts.$router.push({--> break;
<!-- path: `/product/${res}`--> }
<!-- })--> case 'tags': {
<!-- }--> localStorage.setItem('product-tags', arguments[1]);
<!-- })--> break;
}
}
},
remoteMethod(query) {
if (query !== '') {
this.loading = true;
setTimeout(() => {
this.loading = false;
this.options = this.list.filter(item => {
return item.label.toLowerCase()
.indexOf(query.toLowerCase()) > -1;
});
}, 200);
} else {
this.options = [];
}
},
deleteArticle() {
let _ts = this;
_ts.doLoading = true;
this.$confirm('确定删除吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
let id = _ts.$route.params.product_id;
_ts.$axios.$delete('/api/product/delete/' + id).then(function (res) {
if (res && res.message) {
_ts.$message(res.message);
return false;
}
localStorage.removeItem('product-title');
localStorage.removeItem('product-tags');
_ts.contentEditor.setValue('');
_ts.$set(_ts, 'notificationFlag', false);
_ts.$router.push({
name: 'admin-products'
})
})
}).catch(() => {
_ts.doLoading = false;
});
<!-- },--> },
<!-- async saveArticle() {--> async postArticle() {
<!-- let _ts = this;--> let _ts = this;
<!-- _ts.doLoading = true;--> _ts.doLoading = true;
<!-- let id = _ts.$route.params.product_id;--> let productContent = _ts.contentEditor.getValue();
<!-- let productContent = _ts.contentEditor.getValue();--> let productContentHtml = await _ts.contentEditor.getHTML();
<!-- let productContentHtml = await _ts.contentEditor.getHTML();--> if (!(_ts.formStore.productTitle && productContent)) {
<!-- if (!(_ts.productTitle && productContent)) {--> _ts.$message("标题/正文不能为空！");
<!-- _ts.$message("标题/正文不能为空！");--> _ts.doLoading = false;
<!-- _ts.doLoading = false;--> return false;
<!-- return false;--> }
<!-- }--> let product = {
<!-- let product = {--> productContent: productContent,
<!-- idArticle: _ts.idArticle,--> productContentHtml: productContentHtml,
<!-- productTitle: _ts.productTitle,--> productStatus: 0,
<!-- productContent: productContent,--> ..._ts.formStore
<!-- productContentHtml: productContentHtml,-->
<!-- productTags: _ts.productTags.join(","),-->
<!-- productStatus: 1-->
<!-- };-->
<!-- _ts.$axios[id ? '$put' : '$post']('/api/product/post', product).then(function (res) {-->
<!-- if (res) {-->
<!-- if (res.message) {-->
<!-- _ts.$message(res.message);-->
<!-- _ts.doLoading = false;-->
<!-- return false;-->
<!-- }-->
<!-- localStorage.removeItem('product-title');-->
<!-- localStorage.removeItem('product-tags');-->
<!-- _ts.contentEditor.setValue('');-->
<!-- _ts.$set(_ts, 'notificationFlag', false);-->
<!-- _ts.$router.push({-->
<!-- path: `/draft/${res}`-->
<!-- })-->
<!-- }-->
<!-- })-->
<!-- },-->
<!-- getTags() {-->
<!-- let _ts = this;-->
<!-- _ts.$axios.$get('/api/tag/tags').then(function (res) {-->
<!-- if (res) {-->
<!-- _ts.$set(_ts, 'list', res);-->
<!-- }-->
<!-- })-->
<!-- }-->
<!-- },-->
<!-- beforeRouteLeave(to, from, next) {-->
<!-- let _ts = this;-->
<!-- if (_ts.notificationFlag) {-->
<!-- _ts.$confirm('系统可能不会保存您所做的更改。', '离开此网站?', {-->
<!-- confirmButtonText: '确定',-->
<!-- cancelButtonText: '取消',-->
<!-- type: 'warning'-->
<!-- }).then(() => {-->
<!-- next();-->
<!-- }).catch(() => {-->
<!-- return false-->
<!-- });-->
<!-- _ts.$store.commit("setActiveMenu", "product-post");-->
<!-- } else {-->
<!-- next();-->
<!-- }-->
<!-- },-->
<!-- beforeDestroy() {-->
<!-- window.onbeforeunload = null;-->
<!-- },-->
<!-- async mounted() {-->
<!-- console.log('??')-->
<!-- // if (!this.hasPermissions) {-->
<!-- // return-->
<!-- // }-->
<!-- window.addEventListener('beforeunload', e => {-->
<!-- e = e || window.event;-->
<!-- // 兼容IE8和Firefox 4之前的版本--> };
<!-- if (e) {--> _ts.$axios[_ts.formStore.idProduct ? '$put' : '$post']('/api/product/post', product).then(function (res) {
<!-- e.returnValue = '关闭提示';--> if (res) {
<!-- }--> if (res.message) {
_ts.$message(res.message);
_ts.doLoading = false;
return false;
}
localStorage.removeItem('product-title');
localStorage.removeItem('product-tags');
_ts.contentEditor.setValue('');
_ts.$store.commit('product/clearDetailData')
_ts.$set(_ts, 'notificationFlag', false);
_ts.$router.push({
name: 'admin-products'
})
}
})
<!-- // Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+--> },
<!-- return '关闭提示';--> async saveArticle() {
<!-- });--> let _ts = this;
<!-- let _ts = this;--> _ts.doLoading = true;
<!-- _ts.$store.commit('setActiveMenu', 'product-post');--> let id = _ts.$route.params.product_id;
<!-- const responseData = await _ts.$axios.$get('/api/upload/token');--> let productContent = _ts.contentEditor.getValue();
<!-- if (responseData) {--> let productContentHtml = await _ts.contentEditor.getHTML();
<!-- _ts.$set(_ts, 'tokenURL', {--> if (!(_ts.formStore.productTitle && productContent)) {
<!-- token: responseData.uploadToken || '',--> _ts.$message("标题/正文不能为空！");
<!-- URL: responseData.uploadURL || '',--> _ts.doLoading = false;
<!-- linkToImageURL: responseData.linkToImageURL || ''--> return false;
<!-- })--> }
<!-- }-->
<!-- _ts.getTags();--> let product = {
<!-- Vue.nextTick(() => {--> productContent: productContent,
<!-- let productContent = '';--> productContentHtml: productContentHtml,
<!-- if (_ts.$route.params.product_id) {--> productStatus: 1,
<!-- _ts.$set(_ts, 'isEdit', true);--> ..._ts.formStore
<!-- let product = _ts.product;--> };
<!-- _ts.$set(_ts, 'idArticle', product.idArticle);-->
<!-- _ts.$set(_ts, 'productTitle', product.productTitle);-->
<!-- _ts.$set(_ts, 'productContent', product.productContent);-->
<!-- _ts.$set(_ts, 'productStatus', product.productStatus);-->
<!-- _ts.$set(_ts, 'productTags', (product.productTags).split(','));-->
<!-- localStorage.setItem("product-title", product.productTitle);-->
<!-- localStorage.setItem("product-tags", (product.productTags).split(','));-->
<!-- productContent = product.productContent-->
<!-- } else {-->
<!-- _ts.$set(_ts, 'isEdit', false);-->
<!-- }-->
<!-- _ts.contentEditor = _ts._initEditor({-->
<!-- id: 'contentEditor',-->
<!-- mode: 'both',-->
<!-- height: 480,-->
<!-- placeholder: '', //_ts.$t('inputContent', _ts.$store.state.locale)-->
<!-- resize: false,-->
<!-- value: productContent-->
<!-- });-->
<!-- })-->
<!-- }-->
<!--}-->
<!--</script>-->
<!--<style lang="less">--> _ts.$axios[_ts.formStore.idProduct ? '$put' : '$post']('/api/product/post', product).then(function (res) {
<!--@import "~vditor/src/assets/less/index.less";--> if (res) {
<!--</style>--> if (res.message) {
_ts.$message(res.message);
_ts.doLoading = false;
return false;
}
localStorage.removeItem('product-title');
localStorage.removeItem('product-tags');
_ts.contentEditor.setValue('');
_ts.$set(_ts, 'notificationFlag', false);
_ts.$router.push({
name: 'admin-products'
})
}
})
},
getTags() {
let _ts = this;
_ts.$axios.$get('/api/tag/tags').then(function (res) {
if (res) {
_ts.$set(_ts, 'list', res);
}
})
}
},
beforeRouteLeave(to, from, next) {
let _ts = this;
if (_ts.notificationFlag) {
_ts.$confirm('系统可能不会保存您所做的更改。', '离开此网站?', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
next();
}).catch(() => {
return false
});
_ts.$store.commit("setActiveMenu", "product-post");
} else {
next();
}
},
beforeDestroy() {
window.onbeforeunload = null;
},
async mounted() {
window.addEventListener('beforeunload', e => {
e = e || window.event;
if (e) {
e.returnValue = '关闭提示';
}
return '关闭提示';
});
let _ts = this;
_ts.$store.commit('setActiveMenu', 'product-post');
const responseData = await _ts.$axios.$get('/api/upload/token');
if (responseData) {
_ts.$set(_ts, 'tokenURL', {
token: responseData.uploadToken || '',
URL: responseData.uploadURL || '',
linkToImageURL: responseData.linkToImageURL || ''
})
}
console.log('test')
_ts.getTags();
Vue.nextTick(() => {
console.log('test')
let productContent = '';
if (_ts.$route.params.product_id) {
_ts.$set(_ts, 'isEdit', true);
let product = _ts.product;
_ts.formStore = JSON.parse(JSON.stringify(product))
console.log(product)
// _ts.$set(_ts, 'idArticle', product.idArticle);
// _ts.$set(_ts, 'productTitle', product.productTitle);
// _ts.$set(_ts, 'productContent', product.productContent);
// _ts.$set(_ts, 'productStatus', product.productStatus);
// _ts.$set(_ts, 'productTags', (product.tags).split(','));
// localStorage.setItem("product-title", product.productTitle);
// localStorage.setItem("product-tags", (product.tags).split(','));
productContent = product.productContent
} else {
_ts.$set(_ts, 'isEdit', false);
}
_ts.contentEditor = _ts._initEditor({
id: 'contentEditor',
mode: 'both',
height: 480,
placeholder: '', //_ts.$t('inputContent', _ts.$store.state.locale)
resize: false,
value: productContent
});
})
}
}
</script>
<style lang="less">
@import "~vditor/src/assets/less/index.less";
</style>

18
pages/admin/product/index.vue → pages/admin/products.vue
View File

@ -111,14 +111,6 @@
import {mapState} from 'vuex'; import {mapState} from 'vuex';
// import VueCropper from "vue-cropper"; // import VueCropper from "vue-cropper";
const rules = {
productTitle: [
{required: true, message: '请输入公司名称', trigger: 'blur'},
{min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur'}
],
productDescription: [{required: true, message: '请输入产品描述', trigger: 'blur'}]
}
export default { export default {
name: "productsList", name: "productsList",
middleware: 'auth', middleware: 'auth',
@ -140,9 +132,6 @@ export default {
order: 'desc', order: 'desc',
editVisible: false, editVisible: false,
formStore: {}, formStore: {},
rules: rules,
cropperVisible: false,
isEdit: false
} }
}, },
methods: { methods: {
@ -225,13 +214,12 @@ export default {
if (data) { if (data) {
this.formStore.productImgUrl = data this.formStore.productImgUrl = data
this.formStore.productImgType = 1 this.formStore.productImgType = 1
// this.cropperVisible = false
} else _ts.$message.error('失败，请重试'); } else _ts.$message.error('失败，请重试');
}, },
handleAdd() { handleAdd() {
this.isEdit = false this.$router.push({
this.formStore = {} path: `/admin/product/post/`,
this.editVisible = true })
} }
} }
} }