|
@@ -2,125 +2,78 @@
|
|
|
<div>
|
|
|
<div style="width: 100%;height: 40px;">
|
|
|
<div style="margin: 10px 12px;float: left;">
|
|
|
- <span v-for="(item,index) in customButton" :key="index">
|
|
|
- <el-upload
|
|
|
- v-if="item.upload === true"
|
|
|
- style="float: left;margin-right: 10px"
|
|
|
- class="upload-demo"
|
|
|
- :headers="headers"
|
|
|
- :action="item.action"
|
|
|
- :show-file-list="false"
|
|
|
- :on-success="handleAvatarSuccess"
|
|
|
+ <span v-for="(item, index) in customButton" :key="index">
|
|
|
+ <el-upload v-if="item.upload === true" style="float: left;margin-right: 10px" class="upload-demo"
|
|
|
+ :headers="headers" :action="item.action" :show-file-list="false" :on-success="handleAvatarSuccess"
|
|
|
:multiple="false">
|
|
|
- <el-button :size="item.size" :icon="item.icon" :type="item.type" :disabled="item.disabled" :plain="item.plain?item.plain:false" v-hasPermi="item.hasPermi?item.hasPermi:hasPermi.lookup">点击上传</el-button>
|
|
|
+ <el-button :size="item.size" :icon="item.icon" :type="item.type" :disabled="item.disabled"
|
|
|
+ :plain="item.plain ? item.plain : false" v-hasPermi="item.hasPermi ? item.hasPermi : hasPermi.lookup">点击上传
|
|
|
+ </el-button>
|
|
|
</el-upload>
|
|
|
- <el-button
|
|
|
- v-else
|
|
|
- style="float: left;margin-right: 10px"
|
|
|
- :type="item.type"
|
|
|
- :size="item.size"
|
|
|
- :icon="item.icon"
|
|
|
- :plain="item.plain?item.plain:false"
|
|
|
- :disabled="item.disabled"
|
|
|
- v-hasPermi="item.hasPermi?item.hasPermi:hasPermi.lookup"
|
|
|
- @click="buttonList(item)">
|
|
|
- {{ item.name }}
|
|
|
- </el-button>
|
|
|
+ <el-button v-else style="float: left;margin-right: 10px" :type="item.type" :size="item.size" :icon="item.icon"
|
|
|
+ :plain="item.plain ? item.plain : false" :disabled="item.disabled"
|
|
|
+ v-hasPermi="item.hasPermi ? item.hasPermi : hasPermi.lookup" @click="buttonList(item)">
|
|
|
+ {{ item.name }}
|
|
|
+ </el-button>
|
|
|
</span>
|
|
|
</div>
|
|
|
<div class="tabSetting" style="float: right;margin: 10px 0">
|
|
|
<div style="margin-left:10px;float: right">
|
|
|
- <el-button
|
|
|
- icon="el-icon-setting"
|
|
|
- size="mini"
|
|
|
- circle
|
|
|
- @click="showSetting = !showSetting"
|
|
|
- ></el-button>
|
|
|
+ <el-button icon="el-icon-setting" size="mini" circle @click="showSetting = !showSetting"></el-button>
|
|
|
</div>
|
|
|
- <right-toolbar
|
|
|
- v-if="isItHidden"
|
|
|
- @showSearch="showSearch"
|
|
|
- @queryTable="getList"
|
|
|
- ></right-toolbar>
|
|
|
+ <right-toolbar v-if="isItHidden" @showSearch="showSearch" @queryTable="getList"></right-toolbar>
|
|
|
</div>
|
|
|
<div style="margin:10px 10px 0 0;float: right;" v-if="isItHidden">
|
|
|
- <el-button
|
|
|
- type="success"
|
|
|
- plain
|
|
|
- icon="el-icon-search"
|
|
|
- size="mini"
|
|
|
- @click="feedback('搜索')"
|
|
|
- >搜索</el-button>
|
|
|
- <el-button
|
|
|
- type="warning"
|
|
|
- plain
|
|
|
- icon="el-icon-refresh-left"
|
|
|
- @click="feedback('重置')"
|
|
|
- size="mini"
|
|
|
- >重置</el-button>
|
|
|
- <el-button
|
|
|
- type="info"
|
|
|
- plain
|
|
|
- icon="el-icon-open"
|
|
|
- @click="feedback('展开')"
|
|
|
- size="mini"
|
|
|
- >展开</el-button>
|
|
|
+ <el-button type="success" plain icon="el-icon-search" size="mini" @click="feedback('搜索')">搜索</el-button>
|
|
|
+ <el-button type="warning" plain icon="el-icon-refresh-left" @click="feedback('重置')" size="mini">重置</el-button>
|
|
|
+ <el-button type="info" plain icon="el-icon-open" @click="feedback('展开')" size="mini">展开</el-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <el-table
|
|
|
- :data="tableData"
|
|
|
- style="width: 100%"
|
|
|
- @selection-change="handleSelectionChange"
|
|
|
- :row-class-name="rowClassName"
|
|
|
- :show-summary="tatolLabel?true:false"
|
|
|
- :summary-method="listTotal"
|
|
|
- >
|
|
|
- <el-table-column type="selection" width="60" align="center" fixed="left"/>
|
|
|
- <el-table-column
|
|
|
- v-for="(item,index) in queryList.columnList"
|
|
|
- :key="index"
|
|
|
- :prop="item.label"
|
|
|
- :label="item.name"
|
|
|
- :width="item.width"
|
|
|
- :fixed="item.fixed"
|
|
|
- :show-overflow-tooltip="item.changeable?false:true"
|
|
|
- align="center"
|
|
|
- sortable
|
|
|
- >
|
|
|
+ <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange"
|
|
|
+ :row-class-name="rowClassName" :show-summary="tatolLabel ? true : false" :summary-method="listTotal"
|
|
|
+ @expand-change="expandChange" class="apTable">
|
|
|
+ <el-table-column type="expand" v-if="expandBool">
|
|
|
+ <template slot-scope="props">
|
|
|
+ <el-table :data="props.row.itemData" style="width: 100%">
|
|
|
+ <el-table-column v-for="(item, index) in itemdetailStyle" :key="index" :prop="item.label"
|
|
|
+ :label="item.name" :width="item.width" :fixed="item.fixed"></el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column type="selection" width="60" align="center" fixed="left" />
|
|
|
+ <el-table-column v-for="(item, index) in queryList.columnList" :key="index" :prop="item.label" :label="item.name"
|
|
|
+ :width="item.width" :fixed="item.fixed" :show-overflow-tooltip="item.changeable ? false : true" align="center"
|
|
|
+ sortable>
|
|
|
<template slot-scope="scope">
|
|
|
-<!-- <span style="display:none;">{{item.disabled}}</span>-->
|
|
|
+ <!-- <span style="display:none;">{{item.disabled}}</span>-->
|
|
|
<span v-if="item.name === '操作'">
|
|
|
<span v-if="item.operation == 1">
|
|
|
<el-button type="text" @click="viewMethod(scope)" v-hasPermi="hasPermi.lookup">查看</el-button>
|
|
|
-<!-- <el-button type="text" @click="modification(scope)">修改</el-button>-->
|
|
|
- <el-button type="text" @click="deletion(scope)" v-if="scope.row.fBillstatus < 4 || !scope.row.fBillstatus" v-hasPermi="hasPermi.disappear">删除</el-button>
|
|
|
+ <!-- <el-button type="text" @click="modification(scope)">修改</el-button>-->
|
|
|
+ <el-button type="text" @click="deletion(scope)" v-if="scope.row.fBillstatus < 4 || !scope.row.fBillstatus"
|
|
|
+ v-hasPermi="hasPermi.disappear">删除</el-button>
|
|
|
</span>
|
|
|
<span v-if="item.operation == 2">
|
|
|
- <el-button type="text" @click="deleteRow(scope.$index, tableData)" :disabled="item.disabled">移除</el-button>
|
|
|
+ <el-button type="text" @click="deleteRow(scope.$index, tableData)" :disabled="item.disabled">移除
|
|
|
+ </el-button>
|
|
|
</span>
|
|
|
</span>
|
|
|
<span v-else-if="item.changeable && listData">
|
|
|
- <el-select v-if="item.changeable == 1" filterable :disabled="item.disabled" @change="change(scope)" v-model="scope.row[item.label]" slot="prepend" placeholder="请选择">
|
|
|
- <el-option
|
|
|
- v-for="(item,index) in listData[item.label]"
|
|
|
- :key="index"
|
|
|
- :label="item.label"
|
|
|
- :value="item.value"
|
|
|
- ></el-option>
|
|
|
+ <el-select v-if="item.changeable == 1" filterable :disabled="item.disabled" @change="change(scope)"
|
|
|
+ v-model="scope.row[item.label]" slot="prepend" placeholder="请选择">
|
|
|
+ <el-option v-for="(item, index) in listData[item.label]" :key="index" :label="item.label"
|
|
|
+ :value="item.value"></el-option>
|
|
|
</el-select>
|
|
|
- <el-input v-if="item.changeable == 2" @input="totalAmount(scope,item)" :disabled="item.disabled" v-model="scope.row[item.label]" placeholder="请输入内容" :onkeyup="item.onabort"></el-input>
|
|
|
- <el-date-picker
|
|
|
- v-if="item.changeable == 3"
|
|
|
- v-model="scope.row[item.label]"
|
|
|
- type="date"
|
|
|
- :disabled="item.disabled"
|
|
|
- style="width: 100%"
|
|
|
- placeholder="选择日期"
|
|
|
- format="yyyy-MM-dd"
|
|
|
- value-format="yyyy-MM-dd"
|
|
|
- >
|
|
|
+ <el-input v-if="item.changeable == 2" @input="totalAmount(scope, item)" :disabled="item.disabled"
|
|
|
+ v-model="scope.row[item.label]" placeholder="请输入内容" :onkeyup="item.onabort"></el-input>
|
|
|
+ <el-date-picker v-if="item.changeable == 3" v-model="scope.row[item.label]" type="date"
|
|
|
+ :disabled="item.disabled" style="width: 100%" placeholder="选择日期" format="yyyy-MM-dd"
|
|
|
+ value-format="yyyy-MM-dd">
|
|
|
</el-date-picker>
|
|
|
</span>
|
|
|
+ <!-- <span v-else-if="item.label == 'projectName' && CRKTJ"
|
|
|
+ style="color: #409EFF;cursor: pointer"
|
|
|
+ @click.stop="jump(scope.row)">{{ scope.row[item.label] }}</span> -->
|
|
|
<span v-else>{{ scope.row[item.label] }}</span>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
@@ -128,45 +81,22 @@
|
|
|
<el-dialog title="自定义列显示" :visible.sync="showSetting" width="700px">
|
|
|
<div>配置排序列数据(拖动调整顺序)</div>
|
|
|
<div style="margin-left: 17px">
|
|
|
- <el-checkbox
|
|
|
- v-model="allCheck"
|
|
|
- label="全选"
|
|
|
- @change="allChecked"
|
|
|
- ></el-checkbox>
|
|
|
+ <el-checkbox v-model="allCheck" label="全选" @change="allChecked"></el-checkbox>
|
|
|
</div>
|
|
|
<div style="padding: 4px; display: flex; justify-content: center">
|
|
|
- <draggable
|
|
|
- v-model="setRowList"
|
|
|
- group="site"
|
|
|
- animation="300"
|
|
|
- @start="onStart"
|
|
|
- @end="onEnd"
|
|
|
- handle=".indraggable"
|
|
|
- >
|
|
|
+ <draggable v-model="setRowList" group="site" animation="300" @start="onStart" @end="onEnd"
|
|
|
+ handle=".indraggable">
|
|
|
<transition-group>
|
|
|
- <div
|
|
|
- v-for="item in setRowList"
|
|
|
- :key="item.surface"
|
|
|
- class="listStyle"
|
|
|
- >
|
|
|
+ <div v-for="item in setRowList" :key="item.surface" class="listStyle">
|
|
|
<div style="width: 500px" class="indraggable">
|
|
|
<div class="progress" :style="{ width: item.width + 'px' }">
|
|
|
- <el-checkbox
|
|
|
- :label="item.name"
|
|
|
- v-model="item.checked"
|
|
|
- :true-label="0"
|
|
|
- :false-label="1"
|
|
|
- >{{ item.name }}
|
|
|
+ <el-checkbox :label="item.name" v-model="item.checked" :true-label="0" :false-label="1">{{ item.name
|
|
|
+ }}
|
|
|
</el-checkbox>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <el-input-number
|
|
|
- v-model.number="item.width"
|
|
|
- controls-position="right"
|
|
|
- :min="1"
|
|
|
- :max="500"
|
|
|
- size="mini"
|
|
|
- ></el-input-number>
|
|
|
+ <el-input-number v-model.number="item.width" controls-position="right" :min="1" :max="500" size="mini">
|
|
|
+ </el-input-number>
|
|
|
</div>
|
|
|
</transition-group>
|
|
|
</draggable>
|
|
@@ -186,7 +116,7 @@ import Cookies from "js-cookie";
|
|
|
import { getToken } from '@/utils/auth'
|
|
|
export default {
|
|
|
name: 'listComponent',
|
|
|
- props: ['tableData', 'listStyle','queryList','customButton','arrow','setRowList','isItHidden','tatolLabel','listData','hasPermi'],
|
|
|
+ props: ['tableData', 'listStyle', 'queryList', 'customButton', 'arrow', 'setRowList', 'isItHidden', 'tatolLabel', 'listData', 'hasPermi', 'CRKTJ','expandBool','itemdetailStyle'],
|
|
|
data() {
|
|
|
return {
|
|
|
showSetting: false,
|
|
@@ -196,9 +126,9 @@ export default {
|
|
|
},
|
|
|
}
|
|
|
},
|
|
|
- watch:{
|
|
|
- queryList: function (newValue,oldValue) {
|
|
|
- console.log(newValue,oldValue)
|
|
|
+ watch: {
|
|
|
+ queryList: function (newValue, oldValue) {
|
|
|
+ console.log(newValue, oldValue)
|
|
|
this.queryList.columnList = newValue.columnList
|
|
|
},
|
|
|
},
|
|
@@ -209,18 +139,18 @@ export default {
|
|
|
},
|
|
|
methods: {
|
|
|
//下拉数据变动时触发
|
|
|
- change(scope){
|
|
|
- this.$emit('change',scope)
|
|
|
+ change(scope) {
|
|
|
+ this.$emit('change', scope)
|
|
|
},
|
|
|
//输入框数据变动时触发
|
|
|
- totalAmount(scope,item){
|
|
|
- this.$emit('totalAmount',scope,item)
|
|
|
+ totalAmount(scope, item) {
|
|
|
+ this.$emit('totalAmount', scope, item)
|
|
|
},
|
|
|
//合计
|
|
|
listTotal(param) {
|
|
|
const { columns, data } = param
|
|
|
const sums = []
|
|
|
- for(let item in this.tatolLabel){
|
|
|
+ for (let item in this.tatolLabel) {
|
|
|
columns.forEach((column, index) => {
|
|
|
if (index === 0) {
|
|
|
sums[index] = '合计'
|
|
@@ -242,15 +172,15 @@ export default {
|
|
|
}
|
|
|
return sums
|
|
|
},
|
|
|
- initData(){
|
|
|
+ initData() {
|
|
|
this.queryList.columnList = this.queryList.columnList
|
|
|
console.log(this.queryList.columnList)
|
|
|
},
|
|
|
//行号设置
|
|
|
- rowClassName({row, rowIndex}) {
|
|
|
+ rowClassName({ row, rowIndex }) {
|
|
|
// console.log(row,rowIndex)
|
|
|
//把每一行的索引放进row.id
|
|
|
- row.serialNumber = rowIndex+1;
|
|
|
+ row.serialNumber = rowIndex + 1;
|
|
|
// console.log(row.fLineNumber)
|
|
|
},
|
|
|
//列设置全选
|
|
@@ -297,32 +227,32 @@ export default {
|
|
|
resetModule(this.data).then((res) => {
|
|
|
if (res.code == 200) {
|
|
|
this.showSetting = false;
|
|
|
- this.$set(this.queryList,'columnList',this.listStyle)
|
|
|
+ this.$set(this.queryList, 'columnList', this.listStyle)
|
|
|
this.setRowList = this.listStyle;
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
- showSearch(){
|
|
|
+ showSearch() {
|
|
|
this.$emit('showSearch')
|
|
|
},
|
|
|
- handleAvatarSuccess(response, file, fileList){
|
|
|
+ handleAvatarSuccess(response, file, fileList) {
|
|
|
console.log()
|
|
|
- if (response.code == 200){
|
|
|
+ if (response.code == 200) {
|
|
|
this.$emit('handleAvatarSuccess')
|
|
|
- }else {
|
|
|
+ } else {
|
|
|
this.$message.error(response.msg);
|
|
|
}
|
|
|
},
|
|
|
//刷新按钮
|
|
|
- getList(){
|
|
|
+ getList() {
|
|
|
this.$emit('getList')
|
|
|
},
|
|
|
//搜索、重置、展开
|
|
|
- feedback(res){
|
|
|
- this.$emit('feedback',res)
|
|
|
+ feedback(res) {
|
|
|
+ this.$emit('feedback', res)
|
|
|
},
|
|
|
//所有按钮
|
|
|
- buttonList(row){
|
|
|
+ buttonList(row) {
|
|
|
this.$emit('buttonList', row)
|
|
|
},
|
|
|
//查看
|
|
@@ -330,24 +260,31 @@ export default {
|
|
|
this.$emit('see', scope)
|
|
|
},
|
|
|
//修改
|
|
|
- modification(scope){
|
|
|
+ modification(scope) {
|
|
|
this.$emit('modify', scope)
|
|
|
},
|
|
|
//删除
|
|
|
- deletion(scope){
|
|
|
+ deletion(scope) {
|
|
|
this.$emit('deletion', scope)
|
|
|
},
|
|
|
//移出
|
|
|
deleteRow(index, rows) {
|
|
|
- this.$emit('deletRows',index,rows)
|
|
|
+ this.$emit('deletRows', index, rows)
|
|
|
},
|
|
|
//选择
|
|
|
- handleSelectionChange(selection){
|
|
|
+ handleSelectionChange(selection) {
|
|
|
this.$emit('selectionbox', selection)
|
|
|
},
|
|
|
- handleClick(){
|
|
|
+ handleClick() {
|
|
|
this.$emit('handleClick')
|
|
|
},
|
|
|
+ jump(row) {
|
|
|
+ this.$emit('jump', row)
|
|
|
+ // console.log(row)
|
|
|
+ },
|
|
|
+ expandChange(row) {
|
|
|
+ this.$emit('expandChange', row)
|
|
|
+ }
|
|
|
},
|
|
|
}
|
|
|
</script>
|
|
@@ -359,9 +296,11 @@ export default {
|
|
|
border-left: 1px solid #dcdfe6;
|
|
|
border-right: 1px solid #dcdfe6;
|
|
|
}
|
|
|
+
|
|
|
.listStyle:last-child {
|
|
|
border-bottom: 1px solid #dcdfe6;
|
|
|
}
|
|
|
+
|
|
|
.progress {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
@@ -369,4 +308,7 @@ export default {
|
|
|
background-color: rgba(0, 0, 0, 0.05);
|
|
|
height: 100%;
|
|
|
}
|
|
|
+.apTable /deep/ .el-table__expanded-cell[class*=cell] {
|
|
|
+ padding: 0px 60px;
|
|
|
+}
|
|
|
</style>
|