Skip to content

visualcloud / Vmatrix-admin

Go to a project
Commit b8a146c7 by hanjixin
Options

模板详情编辑

parent f2f8eaea
Showing with 193 additions and 69 deletions
src/api/template.js
......@@ -30,6 +30,13 @@ export function templateAdd(data) {
data
})
}
export function templateUpdate(templateId, data) {
return request({
url: `/template/update/template/details/${templateId}`,
method: 'post',
data
})
}
/**
*
* @param {*} templateId
......@@ -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
* zip资源上传解压功能
*/
......@@ -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 @@
>
<el-form-item
label="模板类型"
prop="type"
prop="typeId"
>
<el-select
v-model="temp.typeId"
placeholder="选择模板类型"
clearable
class="filter-item"
style="width: 130px"
style="width: 200px"
@change="typeChange"
>
<el-option
......@@ -37,14 +37,17 @@
</el-select>
</el-form-item>
<el-form-item
v-if="temp.typeId"
label="模板标签"
prop="type"
prop="tagIds"
>
<el-select
v-model="temp.tagIds"
placeholder="选择模板标签"
clearable
style="width: 130px"
multiple
collapse-tags
style="width: 200px"
class="filter-item"
>
<el-option
......@@ -57,12 +60,17 @@
</el-form-item>
<el-form-item
label="模板名称"
prop="title"
prop="templateName"
>
<el-input v-model="temp.templateName" placeholder="请输入模板名称" />
<el-input
v-model="temp.templateName"
placeholder="请输入模板名称"
/>
</el-form-item>
<el-form-item label="模板详情">
<el-form-item
label="模板详情"
prop="templateDescribe"
>
<el-input
v-model="temp.templateDescribe"
:autosize="{ minRows: 2, maxRows: 4}"
......@@ -72,7 +80,7 @@
</el-form-item>
<el-form-item
label="适用设备"
prop="type"
prop="templateEnvironment"
>
<el-select
v-model="temp.templateEnvironment"
......@@ -89,7 +97,7 @@
</el-form-item>
<el-form-item
label="显示方式"
prop="type"
prop="templateShow"
>
<el-select
v-model="temp.templateShow"
......@@ -106,38 +114,77 @@
</el-form-item>
<el-form-item
label="显示比列"
prop="timestamp"
prop="templateProportion"
>
<el-input v-model="temp.templateProportion" placeholder="" />:
<el-input v-model="temp.templateProportion" placeholder="" />
<el-input
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
label="模板包名称"
prop="title"
prop="templatePackageName"
>
<el-input v-model="temp.templatePackageName" placeholder="请输入模板包名称" />
<el-input
v-model="temp.templatePackageName"
placeholder="请输入模板包名称"
/>
</el-form-item>
<el-form-item
v-if="!templateId"
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>
<div>
<el-button
style="margin-left: 10px;"
type="primary"
@click="createData"
>
保存
</el-button>
</div>
</div>
</div>
</template>
<script>
import { createArticle, updateArticle } from '@/api/article'
import {
templateGetTypeList,
templateGetTagList,
templateDel,
getList
getList,
templateUploadZipUrl,
templateAdd,
templateUpdate,
getDetail
} from '@/api/template'
import waves from '@/directive/waves' // waves directive
......@@ -164,6 +211,7 @@ export default {
tagsList: null,
showStatus: this.$store.state.app.showStatus,
templateEnvironment: this.$store.state.app.templateEnvironment,
templateUploadZipUrl: templateUploadZipUrl(),
listQuery: {
page: 1,
limit: 20,
......@@ -172,7 +220,7 @@ export default {
tagId: undefined,
sort: '+id'
},
importanceOptions: [1, 2, 3],
templateId: '',
sortOptions: [
{ label: 'ID Ascending', key: '+id' },
{ label: 'ID Descending', key: '-id' }
......@@ -180,13 +228,24 @@ export default {
statusOptions: ['published', 'draft', 'deleted'],
showReviewer: false,
temp: {
id: undefined,
importance: 1,
remark: '',
timestamp: new Date(),
title: '',
type: '',
status: 'published'
templateName: '',
templateUrl: '',
frameInfo: {
frameUrl: ''
},
resourceInfo: {
resourceUrl: ''
},
templateDescribe: '',
typeId: '',
tagIds: [],
templateEnvironment: '',
templateShow: '',
templateProportion: '',
templateProportion1: '',
templateProportion2: '',
templatePackageName: '',
templateCount: 0
},
dialogFormVisible: true,
dialogStatus: '',
......@@ -197,14 +256,41 @@ export default {
dialogPvVisible: false,
pvData: [],
rules: {
type: [
{ required: true, message: 'type is required', trigger: 'change' }
templateName: [
{
required: true,
message: 'templateName is required',
trigger: 'change'
}
],
templateDescribe: [
{
required: true,
message: 'templateDescribe is required',
trigger: 'change'
}
],
timestamp: [
typeId: [
{ required: true, message: 'typeId is required', trigger: 'change' }
],
templateEnvironment: [
{
type: 'date',
required: true,
message: 'timestamp is required',
message: 'templateEnvironment is required',
trigger: 'change'
}
],
templateShow: [
{
required: true,
message: 'templateShow is required',
trigger: 'change'
}
],
templatePackageName: [
{
required: true,
message: 'templatePackageName is required',
trigger: 'change'
}
],
......@@ -216,9 +302,10 @@ export default {
}
},
created() {
this.templateId = this.$route.query.templateId
this.getList()
this.getTypeList()
this.getTagsList()
this.getTempalteDetail()
},
methods: {
getList() {
......@@ -244,14 +331,44 @@ export default {
})
},
getTagsList() {
templateGetTagList(this.listQuery.typeId).then(res => {
templateGetTagList(this.temp.typeId).then(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) {
this.listQuery.tagId = undefined
this.temp.tagIds = []
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() {
this.temp = {
id: undefined,
......@@ -274,52 +391,33 @@ export default {
createData() {
this.$refs['dataForm'].validate(valid => {
if (valid) {
this.temp.id = parseInt(Math.random() * 100) + 1024 // mock a id
this.temp.author = 'vue-element-admin'
createArticle(this.temp).then(() => {
this.list.unshift(this.temp)
this.dialogFormVisible = false
const uploadTemp = Object.assign({}, this.temp)
uploadTemp.templateProportion =
uploadTemp.templateProportion1 +
'/' +
uploadTemp.templateProportion2
if (this.templateId) {
templateUpdate(this.templateId, uploadTemp).then(res => {
this.$notify({
title: 'Success',
message: 'Created Successfully',
message: 'Update Successfully',
type: 'success',
duration: 2000
})
this.getTempalteDetail()
})
}
})
},
handleUpdate(row) {
this.temp = Object.assign({}, row) // copy obj
this.temp.timestamp = new Date(this.temp.timestamp)
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
} else {
templateAdd(uploadTemp).then(() => {
this.$notify({
title: 'Success',
message: 'Update Successfully',
message: 'Created Successfully',
type: 'success',
duration: 2000
})
})
}
}
})
},
handleDelete(row) {
......@@ -355,3 +453,5 @@ export default {
}
}
</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