Skip to content

visualcloud / Vmatrix-admin

Go to a project
Commit b8a146c7 by hanjixin
Options

模板详情编辑

parent f2f8eaea
Showing with 203 additions and 79 deletions
src/api/template.js
...@@ -30,6 +30,13 @@ export function templateAdd(data) { ...@@ -30,6 +30,13 @@ export function templateAdd(data) {
data data
}) })
} }
export function templateUpdate(templateId, data) {
return request({
url: `/template/update/template/details/${templateId}`,
method: 'post',
data
})
}
/** /**
* *
* @param {*} templateId * @param {*} templateId
...@@ -90,6 +97,17 @@ export function getList(listQuery, p = 1, c = 20) { ...@@ -90,6 +97,17 @@ export function getList(listQuery, p = 1, c = 20) {
} }
/** /**
* *
* @param {*} templateId
* 获取模板详情
*/
export function getDetail(templateId) {
return request({
url: `/template/get/template/details/${templateId}`,
method: 'get'
})
}
/**
*
* @param {*} resourse * @param {*} resourse
* zip资源上传解压功能 * zip资源上传解压功能
*/ */
...@@ -102,3 +120,9 @@ export function templateUploadZipResourse(resourse) { ...@@ -102,3 +120,9 @@ export function templateUploadZipResourse(resourse) {
} }
}) })
} }
/**
* templateUploadZipUrl
*/
export function templateUploadZipUrl() {
return process.env.VUE_APP_BASE_API + '/template/upload/zip/resource'
}
src/views/template/template-add-detail.vue
...@@ -18,14 +18,14 @@ ...@@ -18,14 +18,14 @@
> >
<el-form-item <el-form-item
label="模板类型" label="模板类型"
prop="type" prop="typeId"
> >
<el-select <el-select
v-model="temp.typeId" v-model="temp.typeId"
placeholder="选择模板类型" placeholder="选择模板类型"
clearable clearable
class="filter-item" class="filter-item"
style="width: 130px" style="width: 200px"
@change="typeChange" @change="typeChange"
> >
<el-option <el-option
...@@ -37,14 +37,17 @@ ...@@ -37,14 +37,17 @@
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item <el-form-item
v-if="temp.typeId"
label="模板标签" label="模板标签"
prop="type" prop="tagIds"
> >
<el-select <el-select
v-model="temp.tagIds" v-model="temp.tagIds"
placeholder="选择模板标签" placeholder="选择模板标签"
clearable clearable
style="width: 130px" multiple
collapse-tags
style="width: 200px"
class="filter-item" class="filter-item"
> >
<el-option <el-option
...@@ -57,12 +60,17 @@ ...@@ -57,12 +60,17 @@
</el-form-item> </el-form-item>
<el-form-item <el-form-item
label="模板名称" label="模板名称"
prop="templateName"
prop="title"
> >
<el-input v-model="temp.templateName" placeholder="请输入模板名称" /> <el-input
v-model="temp.templateName"
placeholder="请输入模板名称"
/>
</el-form-item> </el-form-item>
<el-form-item label="模板详情"> <el-form-item
label="模板详情"
prop="templateDescribe"
>
<el-input <el-input
v-model="temp.templateDescribe" v-model="temp.templateDescribe"
:autosize="{ minRows: 2, maxRows: 4}" :autosize="{ minRows: 2, maxRows: 4}"
...@@ -72,7 +80,7 @@ ...@@ -72,7 +80,7 @@
</el-form-item> </el-form-item>
<el-form-item <el-form-item
label="适用设备" label="适用设备"
prop="type" prop="templateEnvironment"
> >
<el-select <el-select
v-model="temp.templateEnvironment" v-model="temp.templateEnvironment"
...@@ -89,7 +97,7 @@ ...@@ -89,7 +97,7 @@
</el-form-item> </el-form-item>
<el-form-item <el-form-item
label="显示方式" label="显示方式"
prop="type" prop="templateShow"
> >
<el-select <el-select
v-model="temp.templateShow" v-model="temp.templateShow"
...@@ -106,38 +114,77 @@ ...@@ -106,38 +114,77 @@
</el-form-item> </el-form-item>
<el-form-item <el-form-item
label="显示比列" label="显示比列"
prop="timestamp" prop="templateProportion"
> >
<el-input v-model="temp.templateProportion" placeholder="" />: <el-input
<el-input v-model="temp.templateProportion" placeholder="" /> v-model="temp.templateProportion1"
width="100"
style="width: 100px;"
placeholder=""
/>:
<el-input
v-model="temp.templateProportion2"
width="100"
style="width: 100px;"
placeholder=""
/>
</el-form-item> </el-form-item>
<el-form-item <el-form-item
label="模板包名称" label="模板包名称"
prop="templatePackageName"
prop="title"
> >
<el-input v-model="temp.templatePackageName" placeholder="请输入模板包名称" /> <el-input
v-model="temp.templatePackageName"
placeholder="请输入模板包名称"
/>
</el-form-item> </el-form-item>
<el-form-item <el-form-item
v-if="!templateId"
label="上传模板包" label="上传模板包"
prop="title"
> >
模板包 <el-upload
class="upload-demo"
drag
name="resource"
accept=".zip"
:show-file-list="false"
:on-success="uploadZipSuccess"
:action="templateUploadZipUrl"
>
<i class="el-icon-upload" />
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
<div
slot="tip"
class="el-upload__tip"
>只能上传zip包</div>
</el-upload>
</el-form-item> </el-form-item>
</el-form> </el-form>
<div>
<el-button
style="margin-left: 10px;"
type="primary"
@click="createData"
>
保存
</el-button>
</div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import { createArticle, updateArticle } from '@/api/article'
import { import {
templateGetTypeList, templateGetTypeList,
templateGetTagList, templateGetTagList,
templateDel, templateDel,
getList getList,
templateUploadZipUrl,
templateAdd,
templateUpdate,
getDetail
} from '@/api/template' } from '@/api/template'
import waves from '@/directive/waves' // waves directive import waves from '@/directive/waves' // waves directive
...@@ -164,6 +211,7 @@ export default { ...@@ -164,6 +211,7 @@ export default {
tagsList: null, tagsList: null,
showStatus: this.$store.state.app.showStatus, showStatus: this.$store.state.app.showStatus,
templateEnvironment: this.$store.state.app.templateEnvironment, templateEnvironment: this.$store.state.app.templateEnvironment,
templateUploadZipUrl: templateUploadZipUrl(),
listQuery: { listQuery: {
page: 1, page: 1,
limit: 20, limit: 20,
...@@ -172,7 +220,7 @@ export default { ...@@ -172,7 +220,7 @@ export default {
tagId: undefined, tagId: undefined,
sort: '+id' sort: '+id'
}, },
importanceOptions: [1, 2, 3], templateId: '',
sortOptions: [ sortOptions: [
{ label: 'ID Ascending', key: '+id' }, { label: 'ID Ascending', key: '+id' },
{ label: 'ID Descending', key: '-id' } { label: 'ID Descending', key: '-id' }
...@@ -180,13 +228,24 @@ export default { ...@@ -180,13 +228,24 @@ export default {
statusOptions: ['published', 'draft', 'deleted'], statusOptions: ['published', 'draft', 'deleted'],
showReviewer: false, showReviewer: false,
temp: { temp: {
id: undefined, templateName: '',
importance: 1, templateUrl: '',
remark: '', frameInfo: {
timestamp: new Date(), frameUrl: ''
title: '', },
type: '', resourceInfo: {
status: 'published' resourceUrl: ''
},
templateDescribe: '',
typeId: '',
tagIds: [],
templateEnvironment: '',
templateShow: '',
templateProportion: '',
templateProportion1: '',
templateProportion2: '',
templatePackageName: '',
templateCount: 0
}, },
dialogFormVisible: true, dialogFormVisible: true,
dialogStatus: '', dialogStatus: '',
...@@ -197,14 +256,41 @@ export default { ...@@ -197,14 +256,41 @@ export default {
dialogPvVisible: false, dialogPvVisible: false,
pvData: [], pvData: [],
rules: { rules: {
type: [ templateName: [
{ required: true, message: 'type is required', trigger: 'change' } {
required: true,
message: 'templateName is required',
trigger: 'change'
}
], ],
timestamp: [ templateDescribe: [
{ {
type: 'date',
required: true, required: true,
message: 'timestamp is required', message: 'templateDescribe is required',
trigger: 'change'
}
],
typeId: [
{ required: true, message: 'typeId is required', trigger: 'change' }
],
templateEnvironment: [
{
required: true,
message: 'templateEnvironment is required',
trigger: 'change'
}
],
templateShow: [
{
required: true,
message: 'templateShow is required',
trigger: 'change'
}
],
templatePackageName: [
{
required: true,
message: 'templatePackageName is required',
trigger: 'change' trigger: 'change'
} }
], ],
...@@ -216,9 +302,10 @@ export default { ...@@ -216,9 +302,10 @@ export default {
} }
}, },
created() { created() {
this.templateId = this.$route.query.templateId
this.getList() this.getList()
this.getTypeList() this.getTypeList()
this.getTagsList() this.getTempalteDetail()
}, },
methods: { methods: {
getList() { getList() {
...@@ -244,14 +331,44 @@ export default { ...@@ -244,14 +331,44 @@ export default {
}) })
}, },
getTagsList() { getTagsList() {
templateGetTagList(this.listQuery.typeId).then(res => { templateGetTagList(this.temp.typeId).then(res => {
this.tagsList = res this.tagsList = res
}) })
}, },
getTempalteDetail() {
const id = this.$route.query.templateId
if (id) {
getDetail(this.$route.query.templateId).then(response => {
const tempData = JSON.parse(JSON.stringify(response))
tempData.templateShow = tempData.templateShow.toUpperCase()
tempData.templateProportion1 = tempData.templateProportion && tempData.templateProportion.split('/')[0]
tempData.templateProportion2 = tempData.templateProportion && tempData.templateProportion.split('/')[1]
this.temp = Object.assign(this.temp, tempData)
this.getTagsList()
console.log(response)
})
}
},
typeChange(value) { typeChange(value) {
this.listQuery.tagId = undefined this.listQuery.tagId = undefined
this.temp.tagIds = []
this.getTagsList() this.getTagsList()
}, },
uploadZipSuccess(e) {
if (e.code && e.code !== '0') {
this.$message.error(e.msg)
} else {
this.$message('上传成功')
this.temp.frameInfo.frameUrl = e.frameUrl
this.temp.resourceInfo.resourceUrl = e.resourceUrl
this.temp.templateCount = e.pictureUrl.length
this.temp.templateUrl = e.pictureUrl
.map(item => e.url + item)
.join(',')
console.log(this.temp)
}
console.log(e)
},
resetTemp() { resetTemp() {
this.temp = { this.temp = {
id: undefined, id: undefined,
...@@ -274,51 +391,32 @@ export default { ...@@ -274,51 +391,32 @@ export default {
createData() { createData() {
this.$refs['dataForm'].validate(valid => { this.$refs['dataForm'].validate(valid => {
if (valid) { if (valid) {
this.temp.id = parseInt(Math.random() * 100) + 1024 // mock a id const uploadTemp = Object.assign({}, this.temp)
this.temp.author = 'vue-element-admin' uploadTemp.templateProportion =
createArticle(this.temp).then(() => { uploadTemp.templateProportion1 +
this.list.unshift(this.temp) '/' +
this.dialogFormVisible = false uploadTemp.templateProportion2
this.$notify({
title: 'Success', if (this.templateId) {
message: 'Created Successfully', templateUpdate(this.templateId, uploadTemp).then(res => {
type: 'success', this.$notify({
duration: 2000 title: 'Success',
message: 'Update Successfully',
type: 'success',
duration: 2000
})
this.getTempalteDetail()
}) })
}) } else {
} templateAdd(uploadTemp).then(() => {
}) this.$notify({
}, title: 'Success',
handleUpdate(row) { message: 'Created Successfully',
this.temp = Object.assign({}, row) // copy obj type: 'success',
this.temp.timestamp = new Date(this.temp.timestamp) duration: 2000
this.dialogStatus = 'update' })
this.dialogFormVisible = true
this.$nextTick(() => {
this.$refs['dataForm'].clearValidate()
})
},
updateData() {
this.$refs['dataForm'].validate(valid => {
if (valid) {
const tempData = Object.assign({}, this.temp)
tempData.timestamp = +new Date(tempData.timestamp) // change Thu Nov 30 2017 16:41:05 GMT+0800 (CST) to 1512031311464
updateArticle(tempData).then(() => {
for (const v of this.list) {
if (v.id === this.temp.id) {
const index = this.list.indexOf(v)
this.list.splice(index, 1, this.temp)
break
}
}
this.dialogFormVisible = false
this.$notify({
title: 'Success',
message: 'Update Successfully',
type: 'success',
duration: 2000
}) })
}) }
} }
}) })
}, },
...@@ -355,3 +453,5 @@ export default { ...@@ -355,3 +453,5 @@ export default {
} }
} }
</script> </script>
<style lang="scss" scoped>
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment