first commit
This commit is contained in:
@@ -0,0 +1,169 @@
|
||||
<!--#
|
||||
layout("/layouts/platform.html"){
|
||||
#-->
|
||||
|
||||
<div id="app" v-cloak>
|
||||
<guava>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div style="display:flex;justify-content: space-between;align-items: center">
|
||||
<h3 style="color: #1867b0">模板管理</h3>
|
||||
<el-button @click="openAdd" size="small" type="primary">
|
||||
上传模板
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<el-row style="column-gap:10px" type="flex">
|
||||
<el-input clearable maxlength="50" placeholder="请输入模板代码"
|
||||
style="width: 400px" v-model="pageForm.templateCode"></el-input>
|
||||
|
||||
<el-button @click="doSearch" icon="el-icon-search" type="primary">搜索</el-button>
|
||||
|
||||
</el-row>
|
||||
|
||||
<el-table :data="tableData" :height="tableHeight" border class="mt10" id="officeTable" ref="table"
|
||||
stripe>
|
||||
<el-table-column :index="indexMethod" label="序号" type="index"
|
||||
width="70px"></el-table-column>
|
||||
<el-table-column label="模板代码" prop="templateCode"></el-table-column>
|
||||
<el-table-column label="模板名称" prop="templateName"></el-table-column>
|
||||
<!-- <el-table-column label="模板大小" prop="templateSize"></el-table-column>-->
|
||||
<el-table-column label="模板路径" prop="templatePath"></el-table-column>
|
||||
<el-table-column label="模板说明" prop="templateDesc"></el-table-column>
|
||||
<el-table-column label="操作" width="300px">
|
||||
<template scope="{row}">
|
||||
<el-button @click="download(row.templatePath)" size="mini"
|
||||
type="primary">下载
|
||||
</el-button>
|
||||
<el-button @click="preview(row.templatePath,row.templatePath)" size="mini"
|
||||
type="primary">预览
|
||||
</el-button>
|
||||
<el-button @click="openEdit(row)" size="mini" type="primary">编辑</el-button>
|
||||
<el-button @click="doDelete(row)" size="mini" type="danger">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!--#include("/layouts/pagination.html"){}#-->
|
||||
|
||||
</el-card>
|
||||
|
||||
<el-dialog :close-on-click-modal="false" :visible.sync="dialogVisible" title="模板"
|
||||
width="60%">
|
||||
<el-form :model="formData" :rules="formRules" label-width="80px" ref="ruleForm">
|
||||
<el-form-item :rules="[{required:true,message:'必传',trigger:['change']}]" label="模板文件"
|
||||
prop="templatePath">
|
||||
<file-upload :files="files" :limit="1" :type="['doc','docx','xlsx','xls']"
|
||||
@update:files="updateFiles"
|
||||
ref="fileUpload"></file-upload>
|
||||
</el-form-item>
|
||||
<el-form-item :rules="[{required:true,message:'上传文件后自动读取',trigger:['change']}]" label="模板名称"
|
||||
prop="templateName">
|
||||
<el-input disabled maxlength="50" placeholder="自动读取文件名"
|
||||
type="text"
|
||||
v-model="formData.templateName"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :rules="[{required:true,message:'必填',trigger:['change']}]" label="模板代码"
|
||||
prop="templateCode">
|
||||
<el-input maxlength="50" placeholder="请填写模板代码" type="text"
|
||||
v-model="formData.templateCode"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :rules="[{required:true,message:'必填',trigger:['change']}]" label="模板说明"
|
||||
prop="templateDesc">
|
||||
<el-input maxlength="50" placeholder="请填写模板说明" type="text"
|
||||
v-model="formData.templateDesc"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span class="dialog-footer" slot="footer">
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<el-button @click="save" type="primary">确定</el-button>
|
||||
</span>
|
||||
|
||||
{{formData}}
|
||||
</el-dialog>
|
||||
|
||||
</guava>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const vue = new Vue({
|
||||
el: '#app',
|
||||
mixins: [initTableMixins],
|
||||
data() {
|
||||
return {
|
||||
files: [],
|
||||
dialogVisible: false,
|
||||
tableHeight: 700
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
openAdd() {
|
||||
this.dialogVisible = true
|
||||
this.formData = {}
|
||||
this.files = []
|
||||
},
|
||||
openEdit(row) {
|
||||
this.dialogVisible = true
|
||||
this.files = [{
|
||||
id: row.templatePath,
|
||||
filepath: row.templatePath,
|
||||
filename: row.templateName
|
||||
}]
|
||||
this.formData = {...row}
|
||||
},
|
||||
save() {
|
||||
this.$refs.ruleForm.validate(async valid => {
|
||||
if (valid) {
|
||||
const resp = await $.post(loc() + '/save', this.formData)
|
||||
if (resp.code === 0) {
|
||||
this.dialogVisible = false
|
||||
this.notifySuccess(resp.msg)
|
||||
this.pageData()
|
||||
} else {
|
||||
this.notifyWarning(resp.msg)
|
||||
}
|
||||
|
||||
}
|
||||
})
|
||||
},
|
||||
updateFiles(val) {
|
||||
this.files = val
|
||||
if (val && val.length > 0) {
|
||||
this.$set(this.formData, 'templatePath', val[0].filepath)
|
||||
this.$set(this.formData, 'templateName', val[0].filename)
|
||||
} else {
|
||||
this.$set(this.formData, 'templatePath', null)
|
||||
this.$set(this.formData, 'templateName', null)
|
||||
}
|
||||
},
|
||||
doDelete(row) {
|
||||
this.$confirm('您确定要删除吗？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'info',
|
||||
}).then(async () => {
|
||||
const resp = await $.post(loc() + '/delete', row)
|
||||
if (resp.code === 0) {
|
||||
this.notifySuccess(resp.msg)
|
||||
this.pageData()
|
||||
} else {
|
||||
this.notifyWarning(resp.msg)
|
||||
}
|
||||
|
||||
})
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
setTimeout(() => {
|
||||
this.tableHeight = window.innerHeight - document.querySelector("#officeTable").getBoundingClientRect().top - 80
|
||||
}, 200)
|
||||
},
|
||||
created() {
|
||||
this.pageData()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<!--#
|
||||
}
|
||||
#-->
|
||||
Reference in New Issue
Block a user