在alde创建html,PSALDETAIDOC.html

案例材料

html, body {

margin: 0;

padding: 0;

background: #00499e;

height: 100%;

}

#app {

min-height: 100%;

padding: 20px;

border: 15px solid #00499e;

border-radius: 25px;

background: white;

-webkit-box-sizing: border-box;

box-sizing: border-box;

max-width: 650px;

margin: auto;

}

.page-header {

color: #333;

margin-left: -10px;

margin-bottom: 20px;

font-size: 16px;

text-align: center;

}

.form-select {

width: 100%;

height: 40px;

}

.form-input {

width: 100%;

height: 40px;

}

#app .form-date {

width: 100%;

}

.form-card {

width: 100%;

border: 1px solid #efefef;

display: inline-block;

padding: 20px 15px;

box-sizing: border-box;

-webkit-box-sizing: border-box;

border-radius: 8px;

-webkit-border-radius: 8px;

vertical-align: top;

line-height: 26px;

margin-right: 15px;

margin-bottom: 10px;

position: relative;

}

.delete-button {

position: absolute;

right: -2px;

top: -2px;

font-size: 20px;

color: #f9a7a7;

cursor: pointer;

}

.form-card .el-icon-plus {

font-size: 30px;

color: #1379ff;

margin: 20px 0;

}

.form-name {

width: 100%;

overflow: hidden;

white-space: nowrap;

text-overflow: ellipsis;

}

.form-name-text {

color: #333;

font-size: 15px;

font-weight: bold;

flex: 1;

padding-right: 5px;

width: 0;

text-overflow: ellipsis;

overflow: hidden;

white-space: nowrap;

}

.form-type {

font-size: 13px;

color: #999;

}

.el-dialog {

max-width: 600px;

}

.el-message-box {

width: 80%;

max-width: 400px;

}

.download-text {

color: #1279ff;

word-break: break-all;

cursor: pointer;

font-size: 13px;

}

class="el-icon-back">

案例材料

编辑

完成

:key="item.uid">

@click.stop.prevent="deleteDocument(item)">

{{item.clmc}}

{{item.cllx}}

说明：{{item.clsm}}

文档

PDF

v-if="disabled && documents.length === 0">未添加案例材料

placeholder="请输入材料名称" maxlength="20">

placeholder="请输入说明" maxlength="20">

style="width: 100px;display: inline-block"

:show-file-list="false" :on-success="docSuccess">

上传

v-if="dialog.docfile">{{dialog.docfile}}

style="width: 100px;display: inline-block"

:show-file-list="false" :on-success="pdfSuccess">

上传

v-if="dialog.pdffile">{{dialog.pdffile}}

保存

取消

var pageparm = getQueryString("pageparm"),

formMap = {

xmdm: '项目代码',

alid: '案例id',

almc: '案例名称',

documents: '案例材料',

cllx: '材料类型',

clmc: '材料名称',

docfile: 'doc文档',

pdffile: 'pdf文档',

clsm: '说明',

qxdmmc: '案例区县名称',

xxdmmc: '案例学校名称',

xuid: '用户id',

xuxm: '用户姓名',

xtime: '更新时间'

};

new Vue({

el: '#app',

data: function () {

var that = this, validate = [

{

required: true,

validator(filed, val, callback) {

if (!val) {

callback(new Error(formMap[filed.fullField] + '不能为空'))

}

callback()

},

trigger: 'blur'

}

]

return {

formMap,

baseUrl,

type: getQueryString("type"),

fileData: {

act: 'afileid',

alid: getQueryString("alid")

},

types: {

cllxs: []

},

rules: {

cllx: validate,

clmc: validate,

clsm: validate

},

projectCodes: [],

documents: [

// {

// alid: '', // 案例id

// cllx: '材料类型', // 材料类型

// clmc: '材料名称', // 材料名称

// docfile: 'doc文档', // doc文档

// pdffile: 'pdf文档', // pdf文档

// clsm: '323333' // 说明

// }

],

dialog: {

visible: false,

type: '',

pzlid: '', // 案例id

cllx: '', // 材料类型

clmc: '', // 材料名称

docfile: '', // doc文档

pdffile: '', // pdf文档

clsm: '' // 说明

}

}

},

computed: {

disabled() {

return !this.type

}

},

methods: {

deleteDocument(item) {

let that = this

this.$confirm('是否删除此案例材料?').then(function (flag) {

if (flag) {

var params = {

act: 'DeleteCL',

pageparm: that.fileData.alid,

alid: that.fileData.alid,

pzlid: item.pzlid

}

axios.post(baseUrl + 'PSAL/PSALDETAI', Qs.stringify(params)).then(function (res) {

if (res.status === 200) {

that.getData()

}

})

}

})

},

finish() {

if (this.type === 'add') {

location.href = './'+getQueryString('redir')+'.html'

} else {

this.type = ''

}

},

edit() {

this.type = 'modify'

},

download(id) {

location.href = baseUrl + 'xfile/GetFileByID/' + id

},

docSuccess(res, file) {

this.dialog.docfile = res.filesid

this.$message.success('上传成功！')

},

pdfSuccess(res, file) {

this.dialog.pdffile = res.filesid

this.$message.success('上传成功！')

},

addDocument() {

var that = this

this.$refs.form.validate(function (flag) {

if (flag) {

var params = {

cllx: that.dialog.cllx,

clmc: that.dialog.clmc,

docfile: that.dialog.docfile,

pdffile: that.dialog.pdffile,

clsm: that.dialog.clsm,

act: that.dialog.type

}, type = that.dialog.type

if (type === 'ModifyCL') {

params.pzlid = that.dialog.pzlid

params.pageparm = that.fileData.alid

params.alid = that.fileData.alid

} else {

params.alid = that.fileData.alid

}

axios.get(baseUrl + 'PSAL/PSALDETAI', {params}).then(function (res) {

if (res.status === 200) {

if (res.data.succeed === '0') {

that.$message.warning(res.data.xmsg)

return

}

that.dialog.visible = false

if (type === 'ModifyCL') {

that.documents.forEach(item => {

if (item.pzlid === that.dialog.pzlid) {

item.cllx = that.dialog.cllx // 材料类型

item.clmc = that.dialog.clmc // 材料名称

item.docfile = that.dialog.docfile // doc文档

item.pdffile = that.dialog.pdffile // pdf文档

item.clsm = that.dialog.clsm // 说明

}

})

} else {

that.documents.push({

cllx: that.dialog.cllx,

clmc: that.dialog.clmc,

docfile: that.dialog.docfile,

pdffile: that.dialog.pdffile,

clsm: that.dialog.clsm,

pzlid: res.data.pzlid

})

}

// history.back()

}

})

}

})

},

handleAddDocuments(row) {

if (this.disabled) return

if (row) {

this.dialog.type = 'ModifyCL' // 案例id

this.dialog.cllx = row.cllx // 材料类型

this.dialog.clmc = row.clmc // 材料名称

this.dialog.docfile = row.docfile // doc文档

this.dialog.pdffile = row.pdffile // pdf文档

this.dialog.clsm = row.clsm // 说明

this.dialog.pzlid = row.pzlid // 说明

} else {

this.dialog.type = 'AddCL'

this.dialog.pzlid = '' // 案例id

this.dialog.cllx = '' // 材料类型

this.dialog.clmc = '' // 材料名称

this.dialog.docfile = '' // doc文档

this.dialog.pdffile = '' // pdf文档

this.dialog.clsm = '' // 说明

}

this.dialog.visible = true

},

back() {

history.back()

},

getTypes(type) {

let that = this

return axios.get(baseUrl + 'xctrl/getdmjson/' + type).then(function (res) {

if (res.status === 200) {

that.types[type.split('-')[1] + 's'] = res.data

}

})

},

getData() {

var params = {

act: 'RDataCL',

pageparm: this.fileData.alid

}, that = this

axios.get(baseUrl + 'PSAL/PSALDETAI', {

params: params

}).then(function (res) {

if (res.status === 200) {

var docs = []

res.data.forEach(function (item) {

var re = {}

for (var key in item) {

if (item.hasOwnProperty(key)) {

re[key.toLowerCase()] = item[key]

}

}

docs.push(re)

})

that.documents = docs

}

})

}

},

created() {

this.getTypes('anli-cllx')

this.getData()

}

})

一键复制

编辑

Web IDE

原始数据

按行查看

历史