Files
laws_weilai/jero-web/src/components/tableCollection/index.vue
T
2022-07-14 15:13:17 +08:00

909 lines
30 KiB
Java

<template>
<div style="height: 100%">
<div class="box">
<!-- -->
<a-table
class="table"
rowKey="id"
:row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
:pagination="false"
:scroll="{x: '100%',y:'calc(100vh - 230px)'}"
:data-source="dataSource"
:loading="loading"
sticky
:components="components"
:columns="columns"
:rowClassName="rowClassName"
@change="tableOnChange"
@onHeaderRow='onHeaderRow'
>
<span slot="titleName" slot-scope="text,record" :title="text">
{{ text }}
</span>
<div :slot="'titleName'+(index+1)" v-for="(item,index) in content">
<span style='padding-right: 20px'>{{ item.db_field_txt }} </span>
<a-button @click='onClickSee(item)'>{{$t('See')}}</a-button>
</div>
<span slot="operationbtn" slot-scope="record">
<span v-if='currentPersonRole === "homo"'>
<!-- 认证工程师 -->
<span
v-if='record.state == "待发起收集" || record.state == "工程接口人退回" || record.state == "变更" || record.state == "Wait Collect" || record.state == "Sdt Back" || record.state == "Change"'>
<span
@click='areaOfResponsibility(record)'>{{ (record.dataValue == null || record.dataValue == 'undefined')? '--': record.dataValue}}</span>
</span>
<span v-else>
<span @click='dataValueTobeinitiated(record)'>{{ (record.dataValue == null || record.dataValue == 'undefined')? '--': record.dataValue}}</span>
</span>
</span>
<span v-else>
<span @click='dataValueTobeinitiated(record)'>{{ (record.dataValue == null || record.dataValue == 'undefined')? '--': record.dataValue}}</span>
</span>
</span>
<span slot="operationzr" slot-scope="record">
<span v-if='currentPersonRole === "homo"'>
<!-- 认证工程师 -->
<span
v-if='record.state == "待发起收集" || record.state == "工程接口人退回"'>
<span :title='record.dataValue'
@click='ondataValueTobe(record)'>{{ (record.dataValue == null || record.dataValue == 'undefined')? '--': record.dataValue }}</span>
</span>
<span v-else>
<span :title='record.dataValue' @click='dataValueTobe(record)'>{{ (record.dataValue == null || record.dataValue == 'undefined')? '--': record.dataValue }}</span>
</span>
</span>
<span v-else>
<span :title='record.dataValue' @click='dataValueTobe(record)'>{{ (record.dataValue == null || record.dataValue == 'undefined')? '--': record.dataValue }}</span>
</span>
</span>
<span slot="detailClick" slot-scope="text,record">
<collection-type :detailDate='text'/>
</span>
</a-table>
</div>
<div class="page">
<a-pagination
:show-total="total => $t('total')+` ${total} `+$t('strip')"
show-quick-jumper
show-size-changer
:page-size.sync="pageSize"
:total="total"
:current="pageNo"
:pageSizeOptions='pageSizeOptions'
@change="pageOnChange"
@showSizeChange="SizeChange"
/>
</div>
<!-- 修改工程接口人--->
<a-modal v-model="areaVisible" :title="$t('modifyprojectInterfacePerson')" width='620px' :footer="null"
@cancel="cancleImports">
<a-form-model
class='tag-module'
ref='ruleForm'
:model='Dateline'
:rules='rules'
:label-col='labelCol'
:wrapper-col='wrapperCol'
>
<a-row :gutter='24'>
<a-col :span='24'>
<a-form-model-item ref='region' :label="$t('engineeringInterfacePerson')" prop='querySdt'>
<a-select allowClear :placeholder="$t('PleaseSelect')+$t('engineeringInterfacePerson')"
v-model="Dateline.querySdt">
<a-select-option v-for="(item, key) in querySdtList" :key="key" :value="item.value">
<span style="display: inline-block;width: 100%" :title=" item.label ">
{{ item.label }}
</span>
</a-select-option>
</a-select>
</a-form-model-item>
</a-col>
</a-row>
</a-form-model>
<div class="imports-footer">
<div class="imports-footer-wrap">
<a-button class="imports-btn imports-sub" type="primary" @click="handleSubmit">{{$t('preservation')}}
</a-button>
<a-button class="imports-btn" type="primary" @click="cancleImports">{{$t('cancel')}}</a-button>
</div>
</div>
</a-modal>
<!-- 修改责任领域--->
<a-modal v-model="areaVisiblezr" :title="$t('areaOfResponsibility')" width='620px' :footer="null"
@cancel="cancel">
<a-form-model
class='tag-module'
ref='ruleForm'
:model='Dateline'
:rules='rules'
:label-col='labelCol'
:wrapper-col='wrapperCol'
>
<a-row :gutter='24'>
<a-col :span='24'>
<a-form-model-item ref='region' :label="$t('areaOfResponsibility')" prop='queryzr'>
<!-- <a-select allowClear :placeholder="$t('PleaseSelect')+$t('engineeringInterfacePerson')"-->
<!-- v-model="Dateline.querySdt">-->
<!-- <a-select-option v-for="(item, key) in querySdtList" :key="key" :value="item.value">-->
<!-- <span style="display: inline-block;width: 100%" :title=" item.label ">-->
<!-- {{ item.label }}-->
<!-- </span>-->
<!-- </a-select-option>-->
<!-- </a-select>-->
<j-dict-select-tag class="box-input" v-model="Dateline.queryzr"
:placeholder="$t('PleaseSelect')+$t('areaOfResponsibility')"
:type="'select'"
:triggerChange="false" :dictCode="'duty_territory'"/>
</a-form-model-item>
</a-col>
</a-row>
</a-form-model>
<div class="imports-footer">
<div class="imports-footer-wrap">
<a-button class="imports-btn imports-sub" type="primary" @click="handleSubmitzr">{{$t('preservation')}}
</a-button>
<a-button class="imports-btn" type="primary" @click="cancel">{{$t('cancel')}}</a-button>
</div>
</div>
</a-modal>
<!-- 配置信息--->
<a-modal v-model="areaVisibleView" :title="$t('configurationInformation')" width='550px' :footer="null">
<div class="content-text">
<div class="text-field">
<span class="text-field-left" :title="$t('configurationName')">{{$t('configurationName')}}:</span>
<span class="text-field-right"
:title="configDetail.configName"
>{{configDetail.configName}}</span>
</div>
</div>
<div class="content-text">
<div class="text-field">
<span class="text-field-left" :title="$t('Model')">{{$t('Model')}}:</span>
<span class="text-field-right" :title="configDetail.carType"
>{{configDetail.carType}}</span>
</div>
<div class="text-field">
<span class="text-field-left" :title="$t('electricMachinery')">{{$t('electricMachinery')}}:</span>
<span class="text-field-right" :title="configDetail.motor"
>{{configDetail.motor}}</span>
</div>
</div>
<div class="content-text">
<div class="text-field">
<span class="text-field-left" :title="$t('Version')">{{$t('Version')}}:</span>
<span class="text-field-right" :title="configDetail.version"
>{{configDetail.version}}</span>
</div>
<div class="text-field">
<span class="text-field-left" :title="$t('Battery')">{{$t('Battery')}}:</span>
<span class="text-field-right" :title="configDetail.battery"
>{{configDetail.battery}}</span>
</div>
</div>
</a-modal>
</div>
</template>
<script>
import eventBUs from '../../common/event'
import { getAction, postAction } from '@/api/manage'
import CollectionType from '@/components/CollectionType'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import axios from 'axios'
import Vue from 'vue'
import VueDraggableResizable from 'vue-draggable-resizable'
import { mapGetters } from 'vuex'
export default {
name: 'index',
props: {
//接口
url: {
type: Object,
default: {}
},
// 详细列表得一条数据
paramsManifest: {
type: Object,
default: {},
require: true
},
formInline: {
type: Object,
default: true
},
queryParamQuery: {
type: Object,
default: true
},
currentPersonRole: {
type: String,
default: true
}
},
components: {
CollectionType,
VueDraggableResizable
},
data() {
this.components = {
header: {
cell: (h, props, children) => {
const { key, ...restProps } = props
// 此处的this.columns 是定义的table的表头属性变量
const col = this.columns.find((col) => {
const k = col.dataIndex || col.key
return k === key
})
if (!col || !col.width) {
return h('th', { ...restProps }, [...children])
}
const dragProps = {
key: col.dataIndex || col.key,
class: 'table-draggable-handle',
attrs: {
w: 10,
x: col.width,
z: 1,
axis: 'x',
draggable: false,
resizable: false
},
on: {
dragging: (x, y) => {
col.width = Math.max(x, 1)
}
}
}
const drag = h('vue-draggable-resizable', { ...dragProps })
return h('th', { ...restProps, class: 'resize-table-th' }, [...children, drag])
}
}
}
return {
token: Vue.ls.get(ACCESS_TOKEN),
jsonBody: [],
checkboxList: [],
tableAll: false,
indeterminate: false,
columns: [],
content: [],
selectedRowKeys: [],
selectedRowrowValue: [],
dataSource: [],
pageNo: 1,
pageSize: 100,
pageSizeOptions: ['100', '200'],
total: 0,
searchParmes: {},
loading: false,
orderBy: '1',
orderByField: '',
homo: 0, // 认证工程师
sdt: 0, // 工程接口人
dre: 0, // 填写人
areaVisible: false,
areaVisiblezr:false,
form: {},
rules: {
querySdt: [
{
required: true,
message: this.$t('PleaseSelect') + this.$t('engineeringInterfacePerson'),
trigger: 'change'
}
],
queryzr: [
{
required: true,
message: this.$t('PleaseSelect') + this.$t('areaOfResponsibility'),
trigger: 'change'
}
]
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 14 }
},
labelCol: {
xs: { span: 24 },
sm: { span: 7 }
},
querySdtList: [], // 工程接口人
Dateline: {},
getquerySdtId: '', // 当前工程接口人的id
areaVisibleView: false, // 查看配置得弹框
configDetail: {} // 查看配置得详细信息
}
},
mounted() {
this.getHeader()
},
watch: {
currentPersonRole: {
handler: function() {
console.log(123)
this.getTableList()
},
immediate: true
}
},
methods: {
...mapGetters(['userInfo']),
rowClassName(row, index) {
if (row.changeFlag == '1') {
return 'rowClassRedYellow'
}
if (row.delFlag == '1') {
return 'rowClassRed'
}
},
pageOnChange(page, pageSize) {
this.pageNo = page
this.$emit('handlePreservation')
this.getTableList()
},
SizeChange(page, pageSize) {
this.pageNo = 1
this.pageSize = pageSize
this.$emit('handlePreservation')
this.getTableList()
},
// 查看配置详细信息
onClickSee(val) {
let _this = this
this.areaVisibleView = true
let url = ''
if (this.$route.query.it === undefined) {
url = `/jero-boot/params/config/getById?id=${val.db_field_name}`
} else {
// 历史版本
url = `/jero-boot/params/collectManifestHistory/getConfigById?id=${val.db_field_name}`
}
axios({
url: url,
method: 'get',
transformRequest: [function(data) {
let ret = ''
for (let it in data) {
ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
}
return ret
}],
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
'X-Access-Token': _this.token
}
})
.then((res) => {
console.log(res)
if (res.data.success) {
this.configDetail = res.data.result || {}
} else {
this.configDetail = {}
_this.$message.warning(res.data.result)
}
})
.catch((error) => {
console.log(error)
})
},
// 获取工程接口人
getquerySdtList(record) {
// 当前工程接口人的id
this.getquerySdtId = record.id
getAction(this.url.getquerySdtList, {
projectId: this.$route.query.projectId,
dutyTerritory: record.dutyTerritory
}).then((res) => {
if (res.success) {
this.querySdtList = res.result
}
})
},
// 责任领域 保存
handleSubmitzr(record) {
let _this = this
let param = { dutyTerritory: this.Dateline.queryzr, ids: this.getquerySdtId,paramsManifestId: this.$route.query.id, }
this.$refs.ruleForm.validate(valid => {
if (valid) {
axios({
url: '/jero-boot/params/collectManifest/updateDutyTerritory',
method: 'post',
data: param,
transformRequest: [function(data) {
let ret = ''
for (let it in data) {
ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
}
return ret
}],
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
'X-Access-Token': _this.token
}
})
.then((res) => {
console.log(res)
if (res.data.success) {
_this.$message.success(_this.$t('OperationSuccessful'))
_this.areaVisiblezr = false
this.getLoginUserType()
} else {
_this.$message.warning(_this.$t('operationFailed'))
}
})
.catch((error) => {
console.log(error)
})
}
})
},
// 工程接口人 保存
handleSubmit(record) {
let _this = this
let param = { sdt: this.Dateline.querySdt, ids: this.getquerySdtId }
this.$refs.ruleForm.validate(valid => {
if (valid) {
axios({
url: '/jero-boot/params/collectManifest/updateSdt',
method: 'post',
data: param,
transformRequest: [function(data) {
let ret = ''
for (let it in data) {
ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
}
return ret
}],
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
'X-Access-Token': _this.token
}
})
.then((res) => {
console.log(res)
if (res.data.success) {
_this.$message.success(_this.$t('OperationSuccessful'))
_this.areaVisible = false
this.getLoginUserType()
} else {
_this.$message.warning(_this.$t('operationFailed'))
}
})
.catch((error) => {
console.log(error)
})
}
})
},
// 工程接口人 取消
cancleImports() {
this.areaVisible = false
this.$refs['ruleForm'].resetFields()
},
cancel(){
this.areaVisiblezr = false
this.$refs['ruleForm'].resetFields()
},
// 点击工程接口人的详情人员 有权限
areaOfResponsibility(record) {
this.areaVisible = true
// this.$refs.ruleForm.clearValidate()
this.$nextTick(() => {
this.Dateline = { ...this.Dateline }
this.getquerySdtList(record)
this.$refs.ruleForm.clearValidate()
})
},
// 点击责任领域的详情人员 有权限
ondataValueTobe(record) {
this.areaVisiblezr = true
// this.$refs.ruleForm.clearValidate()
this.$nextTick(() => {
this.Dateline = { ...this.Dateline }
this.getquerySdtId = record.id
this.$refs.ruleForm.clearValidate()
})
},
dataValueTobeinitiated() {
this.$message.warning(this.$t('certifiedEngineer') + this.$t('and') + this.$t('Statusis') + this.$t('CollectionInitiated') + this.$t('ReturnedPerson') + this.$t('alteration') + this.$t('toHavePermission'))
},
dataValueTobe() {
this.$message.warning(this.$t('certifiedEngineer') + this.$t('and') + this.$t('Statusis') + this.$t('CollectionInitiated') + this.$t('ReturnedPerson') + this.$t('toHavePermission'))
},
// 点击工程接口人的详情人员 无权限
ondataValueNot() {
this.$message.warning(this.$t('operatethisbutton'))
},
onHeaderRow(column, index) {
console.log(column, index)
},
getLoginUserType() {
let params = {
paramsManifestId: this.$route.query.id,
projectId: this.$route.query.projectId
}
this.loading = true
getAction(this.url.getLoginUserType, params).then((res) => {
if (res.success) {
this.getAndUserId(res.result)
}
})
},
getAndUserId(result) {
let query = {
paramsManifestId: this.$route.query.id,
projectId: this.$route.query.projectId,
userId: this.userInfo().id
}
getAction('/params/userTypeLog/queryCurrentType', query).then((res) => {
if (res.success) {
if (res.result && res.result.userType) {
if (!(result.some(val => val.value == res.result.userType))) {
res.result.userType = result[0] ? result[0].value : ''
}
this.getTableList(res.result.userType)
} else {
this.getTableList(result[0].value)
}
this.$emit('LoginUserType', result, this.currentPersonRole, res.result.userType)
} else {
}
})
},
getHeader() {
let paramsManifestid
let url
if (this.$route.query.it === undefined) {
// 页面跳转
paramsManifestid = this.$route.query.id
url = this.url.tableHeader
} else {
// 历史版本
paramsManifestid = this.$route.query.it
url = 'params/collectManifestHistory/getHeader'
}
let params = {
paramsManifestId: paramsManifestid,
flag: '7'
}
getAction(url, params).then((res) => {
if (res.success) {
var jsonHead = res.result
this.columns = []
let num = 0
this.content = []
jsonHead.forEach((res, index) => {
// 配置列
if (res.type) {
this.columns.push({
dataIndex: res.db_field_name,
align: 'center',
ellipsis: true,
sorter: res.sort,
width: 500
})
num++
this.content.push(res)
this.columns[index].scopedSlots = {
customRender: 'detailClick',
title: 'titleName' + num
}
// 非配置列
} else {
this.columns.push({
title: res.db_field_txt,
dataIndex: res.db_field_name,
align: 'center',
ellipsis: true,
sorter: res.sort,
width: 160
})
console.log(res)
this.columns[index].scopedSlots = {
customRender: 'titleName'
}
if(res.click1){
this.columns[index].scopedSlots = {
customRender: 'operationzr'
}
}
if (res.click) {
// 工程接口人列表修改
this.columns[index].scopedSlots = {
customRender: 'operationbtn'
}
}
}
})
this.columns = [...this.columns]
console.log(this.columns)
}
})
},
tableOnChange(pagination, filters, sorter) {
console.log(pagination, filters, sorter, 'iiiiiiiiiiiiiiiii')
},
getTableListReset() {
this.formInline = {}
let params = {
paramsManifestId: this.$route.query.id,
pageNo: this.pageNo,
pageSize: this.pageSize,
// userTypes: this.currentPersonRole
}
let url
this.loading = true
this.$emit('listReset', '')
// todo
if (this.$route.query.it === undefined) {
// 页面跳转
url = this.url.tableList
params.paramsManifestId = this.$route.query.id
params.userTypes = this.currentPersonRole
} else {
// 历史版本
url = 'params/collectManifestHistory/list'
params.paramsManifestId = this.$route.query.it
}
getAction(url, params).then((res) => {
if (res.success) {
let tt = []
if (this.currentPersonRole !== 'dre') {
res.result.records.forEach((Obj) => {
Object.keys(Obj).forEach((item) => {
if (Obj[item] instanceof Object && Obj[item].controlType !== undefined) {
Obj[item].list.forEach((itemLi) => {
itemLi.isLock = 1
if (itemLi.type === 'pull_more') {
itemLi.dataValue = itemLi.dataValue === null ? [] : itemLi.dataValue.split(',')
}
})
}
})
tt.push(Obj)
})
} else {
res.result.records.forEach((Obj) => {
Object.keys(Obj).forEach((item) => {
if (Obj[item] instanceof Object && Obj[item].controlType !== undefined) {
Obj[item].list.forEach((itemLi) => {
if (itemLi.type === 'pull_more') {
itemLi.dataValue = itemLi.dataValue === null ? [] : itemLi.dataValue.split(',')
}
})
}
})
tt.push(Obj)
})
}
this.dataSource = tt
this.total = res.result.total
this.selectedRowKeys = []
this.$emit('getDataSource', this.dataSource)
setTimeout(() => {
this.loading = false
}, 500)
} else {
this.loading = false
}
})
},
cancleoperationFailed() {
this.selectedRowKeys = []
},
getTableList(currentPersonRole) {
// todo
let paramsManifestid
let url
if (this.$route.query.it === undefined) {
// 页面跳转
paramsManifestid = this.$route.query.id
url = this.url.tableList
} else {
// 历史版本
paramsManifestid = this.$route.query.it
url = 'params/collectManifestHistory/list'
}
let params = {
pageNo: this.pageNo,
pageSize: this.pageSize,
userTypes: this.currentPersonRole || currentPersonRole,
paramsManifestId: paramsManifestid,
...this.formInline,
...currentPersonRole
}
this.loading = true
getAction(url, params).then((res) => {
if (res.success) {
// todo
// console.log(res.result,'res.result')
// let tt = []
// this.dataSource = []
// // 需要转化数据类型
// tt = res.result
// tt.forEach((Obj) => {
// Object.keys(Obj).forEach((item) => {
// if(Obj[item] instanceof Object && Obj[item].controlType !== undefined){
// Obj[item].list.forEach((itemLi) => {
// if(itemLi.type === 'pull_more'){
// itemLi.dataValue = itemLi.dataValue === null ? [] : itemLi.dataValue.splice(',')
// }
// })
// }
// })
// })
let tt = []
if (this.currentPersonRole !== 'dre') {
res.result.records.forEach((Obj) => {
Object.keys(Obj).forEach((item) => {
if (Obj[item] instanceof Object && Obj[item].controlType !== undefined) {
Obj[item].list.forEach((itemLi) => {
itemLi.isLock = 1
if (itemLi.type === 'pull_more') {
itemLi.dataValue = itemLi.dataValue === null ? [] : itemLi.dataValue.split(',')
}
})
}
})
tt.push(Obj)
})
} else {
res.result.records.forEach((Obj) => {
Object.keys(Obj).forEach((item) => {
if (Obj[item] instanceof Object && Obj[item].controlType !== undefined) {
Obj[item].list.forEach((itemLi) => {
if (itemLi.type === 'pull_more') {
itemLi.dataValue = itemLi.dataValue === null ? [] : itemLi.dataValue.split(',')
}
})
}
})
tt.push(Obj)
})
}
this.dataSource = tt
this.total = res.result.total
this.selectedRowKeys = []
this.selectedRowrowValue = []
this.$emit('value', this.selectedRowKeys)
this.$emit('rowValue', this.selectedRowrowValue)
this.$emit('getDataSource', this.dataSource)
setTimeout(() => {
this.loading = false
}, 500)
} else {
this.loading = false
}
})
},
onChange(page, pageSize) {
},
onSelectChange(value, rowValue) {
this.selectedRowKeys = []
this.selectedRowrowValue = []
this.selectedRowKeys = value
this.selectedRowrowValue = rowValue
this.$emit('value', this.selectedRowKeys)
this.$emit('rowValue', this.selectedRowrowValue)
},
OperationClick(ol, item) {
// this.$emit(ol.ClickEvent, item)
},
detailClick(item, index) {
// this.$emit('detailClick', item)
}
}
}
</script>
<style lang='less'>
.imports-footer {
.imports-footer-wrap {
margin: 20px 0;
text-align: center;
.imports-sub {
margin-right: 20px;
}
}
}
.table .ant-table-column-title {
font-weight: bold;
}
.content-text {
width: 100%;
display: flex;
flex-wrap: wrap;
.text-field {
width: 50%;
margin-bottom: 8px;
display: flex;
.text-field-left {
width: 80px;
display: inline-block;
font-size: 16px;
color: #040B29;
font-weight: 400;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.text-field-right {
display: inline-block;
font-size: 16px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
color: #040B29;
font-weight: 400;
}
}
}
</style>
<style scoped>
.box {
width: 100%;
height: calc(100% - 100px);
overflow: auto;
}
.text {
margin-right: 10px;
}
.page {
text-align: right;
margin-top: 20px;
}
/deep/ .ant-table-tbody .yellow {
background-color: #ffff001f !important;
height: 40px !important;
border: none !important;
padding: 0 !important;
}
</style>
<style>
.resize-table-th {
position: relative;
}
.table-draggable-handle {
/* width: 10px !important; */
height: 100% !important;
left: auto !important;
right: -5px;
cursor: col-resize;
touch-action: none;
border: none;
position: absolute;
transform: none !important;
bottom: 0;
}
.rowClassRed {
background: #f3d9de;
}
.rowClassRedYellow {
background: yellow;
}
</style>