<template lang='pug'>
.underground-pipelines
.header
<xt-search :searchList="searchList" @submit="searchHandle" ref="formName" :hasResetBtn="true"></xt-search>
.btn-group
el-button(type="primary" size="small" @click="handleAddFun") 新增
.table-wrap
el-table(:data="tableData" border height="calc(100vh - 285px)" v-loading="tableLoading")
el-table-column(label="序号" type="index" align="center" width="80")
el-table-column(prop="name" label="名称" align="center")
el-table-column(prop="type" label="类型" align="center")
el-table-column(prop="is_open" label="是否公开" align="center")
el-table-column(prop="date" label="时间" align="center")
el-table-column(prop="remark" label="备注" align="center" show-overflow-tooltip)
el-table-column(prop="user_name" label="创建人" align="center" show-overflow-tooltip)
el-table-column(label="操作" align="center" width="180")
template(slot-scope="scope")
.operate
span(@click="handleFun(1, scope.row)" v-if="scope.row.is_oneself == 1") 编辑
span(@click="handleFun(2, scope.row)" v-if="scope.row.is_oneself == 1") 删除
span(@click="handleFun(3, scope.row)") 查看
xt-pagination(:total="total" @change="changePage" :page="pageForm.page" :page-size="pageForm.pageSize")
xt-dialog(
:title="title"
ref="xtdialogRef"
class="xtdialogRef"
:showfooter="showfooter"
width="50%"
append-to-body
@confirm="$refs.xtForm.submit()"
:autoclose="false"
)
xt-form( ref="xtForm" :grid=[1,2,2,1,1] :label-width="120" :type="title" :formList="formList" @submit="submit" )
</template>
<script>
import {
mapGetters } from 'vuex'
export default {
name: 'underground-pipelines',
components: {
},
data() {
let vm = this
return {
username: '',
paragraph_id: '',
title: '新增',
showfooter: true,
tableLoading: false,
rowObj: {
},
formList: [
{
title: '名称：',
type: 'input',
key: 'name',
rule: {
required: true, message: '请输入名称', trigger: 'blur'},
props: {
placeholder: '请输入名称'
}
},
{
title: '类型：',
type: 'select',
key: 'type',
rule: {
required: true, message: '请选择类型', trigger: 'blur'},
props: {
placeholder: '请选择类型'
},
options: []
},
{
title: '时间：',
type: 'date',
key: 'date',
defaultValue: '',
rule: {
required: true, message: '请选择时间', trigger: 'blur'},
props: {
'placeholder': '请选择时间',
'value-format': 'yyyy-MM-dd',
}
},
{
title: '是否公开：',
type: 'select',
key: 'is_open',
rule: {
required: true, message: '请选择是否公开', trigger: 'blur'},
props: {
placeholder: '请选择是否公开'
},
options: [{
value: '1', text: '公开'}, {
value: '2', text: '不公开'}]
},
{
title: '保密等级：',
type: 'select',
key: 'security_level',
rule: {
required: true, message: '请选择保密等级', trigger: 'blur'},
props: {
placeholder: '请选择保密等级'
},
options: [{
value: '1', text: '秘密'}, {
value: '2', text: '机密'}, {
value: '3', text: '绝密'}]
},
{
title: '备注：',
type: 'input',
key: 'remark',
// rule: {required: true, message: '请输入备注', trigger: 'blur'},
props: {
placeholder: '请输入备注'
},
props: {
type: 'textarea',
placeholder: '请输入备注'
}
},
{
title: '附件:',
defaultValue: [],
key: 'enclosure',
props: {
placeholder: '请上传附件'
},
renderContent (h, item, form) {
return (<xt-newUnload style="width:100%" url='data!projectinfo/ProjectOverview/upload_enclosure' buttonType={
vm.title == '详情' ? 'look' : ''} fileList={
form.enclosure } onChange={
res => form.enclosure = res }></xt-newUnload>)
}
}
],
searchList: [
{
type: 'xt-form',
children: [
{
title: '',
type: 'input',
key: 'name',
props: {
placeholder: '请输入名称'
}
},{
title: '',
type: 'select',
key: 'type',
props: {
placeholder: '请选择类型'
},
options: []
},{
title: '时间：',
type: 'date',
key: 'date',
defaultValue: '',
props: {
'placeholder': '请选择时间',
'value-format': 'yyyy-MM-dd',
}
}
]
}
],
tableData: [],
total: 0, //页码变量
pageForm: {
//页码
page: 1,
pageSize: 20
},
searchForm: {
}
}
},
computed: {
...mapGetters([ 'currentProject'])},
watch: {
},
methods: {
handleConfirm() {
this.$refs.xtForm.submit()
},
async submit(form,valid) {
if (valid) {
if (form.enclosure && form.enclosure.length) {
form.enclosure = JSON.stringify(form.enclosure)
}
let data = {
...form
}
data.paragraph_id = this.paragraph_id
let url = this.title == '新增' ? 'underground_pipeline_increase' : 'underground_pipeline_update'
await this.$api[url](data)
this.$success(`${
this.title == '新增' ? '新增成功' : '修改成功'}`)
this.$refs.xtdialogRef.handleClose()
this.getData()
}
},
handleFun(index, row) {
this.rowObj = row
if (index == 1) {
// 编辑
this.title = '编辑'
this.showfooter = true
this.$refs.xtdialogRef.open()
this.$nextTick(() => {
this.$refs.xtForm.reset()
this.$refs.xtForm.setForm(row)
})
} else if (index == 2) {
this.handleDelete(row)
} else {
this.title = '详情'
this.showfooter = false
this.$refs.xtdialogRef.open()
}
},
handleDelete(row) {
let data = {
pipeline_ids: row.pipeline_id
}
this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(async () => {
await this.$api.underground_pipeline_delete(data)
this.$success('删除成功')
this.pageForm.page = 1
this.getData()
})
},
handleAddFun() {
this.title = '新增'
this.showfooter = true
this.$refs.xtdialogRef.open()
this.$nextTick(() => {
this.$refs.xtForm.reset()
})
},
searchHandle(row) {
this.searchForm = {
...row }
this.getData()
},
changePage (row) {
this.pageForm = {
...row }
this.getData()
},
async getData() {
this.tableLoading = true
let data = {
...this.searchForm,
...this.pageForm
}
let res = await this.$api.underground_pipeline_search(data)
this.tableData = res.result.data
this.total = res.result.total
this.tableLoading = false
},
async getSetting() {
let res = await this.$api.underground_pipeline_screen()
this.searchList[0].children[1].options = res.result.type_list.map((item) => {
return {
text: item,
value: item
}
})
this.formList[1].options = res.result.type_list.map((item) => {
return {
text: item,
value: item
}
})
this.formList[3].options = res.result.is_open.map((item) => {
return {
text: item,
value: item
}
})
this.formList[4].options = res.result.security_level.map((item) => {
return {
text: item,
value: item
}
})
this.paragraph_id = this.currentProject.id
this.getData()
}
},
created() {
},
mounted() {
// this.getSetting()
},
}
</script>
<style scoped lang="scss" >
.xtdialogRef{
/deep/ .el-input {
width: 100% !important;
}
/deep/ .el-textarea {
width: 100% !important;
}
/deep/ .el-select {
width: 100% !important;
}
/deep/ .el-divider {
background-color: #b6d7fb;
height: 2px;
}
}
.underground-pipelines {
width: 100%;
height: calc(100vh - 170px);
background-color: #fff;
border-radius: 5px;
padding: 10px;
.header {
width: 100%;
display: flex;
justify-content: space-between;
}
.operate {
span {
color: #409EFF;
cursor: pointer;
margin-left: 10px;
}
}
}
</style>
name: ‘xt-newUnload’,上传附件
<template lang="pug">
.uploadBox
.uploadFile(v-if="buttonType !== 'look'")
el-upload.new_unpload(
ref="upload"
class="upload-demo"
:action="action"
name="fileName"
:style="{width: width}"
:on-preview="handlePreview"
:on-remove="handleRemove"
:on-success="handleSuccess"
:on-error="handleError"
:before-remove="beforeRemove"
:on-exceed="handleExceed"
:file-list="fileList"
:multiple="multiple"
:data="datas"
:limit="limit"
:disabled="disabled"
:headers="headers"
v-bind="$attrs"
)
el-button(size="small" :disabled="disabled" type="primary") 点击上传
i.el-icon-upload.el-icon--right
.uploadFile(v-else)
ul
li(class="fileListClass" v-for="(item,index) in fileList" :key="index" @click="listClick(item)")
i.el-icon-document(style="margin-right:5px")
span {
{
item.name}}
xt-fileonline(ref="fileDialog" append-to-body)
</template>
<script>
import {
addData } from '@/utils/websoket.js'
import {
mapGetters } from 'vuex'
import server from '@/server'
import request from '@/utils/request'
export default {
name: 'xt-newUnload',
computed: {
...mapGetters(['token', 'currentProject', 'server_id']),
headers () {
return {
'X-Token': this.token,
'X-Project': this.currentProject.id
}
},
action () {
if (this.url && this.url.length > 0) {
const type = this.url.split('!')[0]
const url = this.url.split('!')[1]
return server[type] + url
} else {
return server.data + 'data/FileUpload/upload'
}
},
datas () {
let data = {
fileType: this.fileType,
server_id: this.server_id,
...this.params
}
if (this.condition && this.condition.length > 0) {
this.condition.map(item => {
data[item.value] = this.checkList.includes(item.value) ? 1 : 0
})
}
return data
}
},
props: {
fileList: {
type: Array,
default: () => {
return []
}
},
buttonType: {
type: String,
default: ''
},
limit: {
type: Number,
default: 20
},
fileType: {
type: String,
default: ''
},
url: {
type: String,
required: true,
default: '',
},
multiple: {
type: Boolean,
default: true
},
disabled: {
type: Boolean,
default: false
},
deleteUrl: {
type: String,
default: ''
},
width: {
type: String,
default: '400px'
}
},
data () {
return {
checkList: [],
}
},
methods: {
handleRemove(file, fileList) {
this.$emit('change', fileList)
},
handleSuccess (res, file, fileList) {
let index = fileList.indexOf(file)
if (res.code !== 0) {
this.$error(res.msg)
fileList.splice(index, 1)
} else {
let row = res.result.data.fileName
fileList.splice(index, 1, row)
}
let suss = true
for(let i=0;i<fileList.length;i++){
let item = fileList[i]
if (item.status && item.status != 'success') {
suss = false
break
}
}
if(suss){
this.$emit('change', fileList)
this.$refs.upload.clearFiles()
}
},
clearFile(){
this.$refs.upload.clearFiles()
},
handlePreview(file) {
this.$refs.fileDialog.open(file.url)
},
handleExceed(files, fileList) {
if (this.fileType == 'image') {
this.$info(`最多只能导入${
this.limit}个图片哦！`)
return
}
this.$info(`最多只能导入${
this.limit}个文件哦！`)
},
handleError (err) {
this.$error('上传失败')
},
listClick(item) {
this.$refs.fileDialog.open(item.url)
},
async beforeRemove(file, fileList) {
await this.$confirm(`确定移除 ${
file.name }？`)
// if (this.deleteUrl && this.deleteUrl.length > 0) {
// const type = this.deleteUrl.split('!')[0]
// const url = this.deleteUrl.split('!')[1]
// return await request({
// url: this.deleteUrl,
// method: 'get',
// params: { id: file.id }
// })
// }
}
}
}
</script>
<style lang="scss" scoped>
/deep/ .el-upload-list{
max-height: 200px;
overflow-y: auto;
overflow-x: hidden;
}
.uploadFile {
width: 100%;
}
.fileListClass {
width: 100%;
cursor: pointer;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: #606266;
&:hover {
color: #409EFF;
}
}
</style>