console
<template lang="pug">
.main
.table-header
.header-title(:class="{ 'header-title-state':$store.state.slotNameState == basicData.id }") {{ basicData.name}}
a-icon.icon(:type="!isTable?'edit':'rollback'" @click="isTable = !isTable")
.content
a-button.editable-add-btn(v-if="isTable && basicData.add" type="primary" icon="plus" @click="ev_newlyIncreased") 新增
a-table(v-if="basicData.find" :customHeaderRow="customHeaderRow" :scroll="{ x: 1200 }" size="small" :data-source="tableData" :columns="columns" bordered :rowKey="record=>record.itemId" :pagination="false")
template( slot="id" slot-scope="text, record")
.item-box
a(v-if="basicData.edit" @click="ev_edit(record)") 编辑
a-popconfirm(
title="确定要删除吗?"
@confirm="ev_delete(record.itemId)"
)
a(v-if="basicData.delete") 删除
a-modal(
:title="modalTitleType == 'add'?'新增':'编辑'"
:width="tableType?1400:1200"
:keyboard="false"
v-model="modalVisible"
wrapClassName="global-modal"
footer=""
:maskClosable="false"
@cancel="ev_cancel"
:dialog-style="{ top: '4rem' }"
)
a-form-model.form(ref="ruleForm" :model="formData" :rules="rules")
a-form-model-item(
label="评价体系"
prop="typeVo"
:label-col="{ span: 2 }"
:wrapper-col="{ span: 10 }"
:style="{ marginLeft:tableType?'94px':'110px'}"
)
a-radio-group(:disabled="modalTitleType != 'add'" v-model="formData.typeVo" @change="ev_changeTypeVo")
a-radio(v-for="item in typeVoArr" :key="item.id" :value="item.id") {{item.label}}
a-form-model-item(
label="评价体系序号"
prop="sn"
:label-col="{ span: 12 }"
:wrapper-col="{ span: 10 }"
:style="{ display: 'inline-block', marginLeft:'118px'}"
)
a-input-number(:disabled="modalTitleType != 'add' || disabledSn" :min="0" :max="999" v-model="formData.sn" placeholder="序号" )
a-form-model-item(
label="有效期"
prop="time"
:label-col="{ span: 8 }"
:wrapper-col="{ span: 10 }"
:style="{ display: 'inline-block'}")
a-range-picker.input(
:disabled="modalTitleType != 'add' || disabledSn"
v-model="formData.time"
format="YYYY-MM-DD"
)
a-form-model-item(
label="评价标准"
prop="criterion"
:label-col="{ span: 6 }"
:wrapper-col="{ span: 16 }"
:style="{ display: 'inline-block', marginLeft:'118px'}"
)
a-textarea(
v-model="formData.criterion"
placeholder="请输入评价标准"
:auto-size="{ minRows: 2, maxRows: 8 }"
)
a-form-model-item(
label="评价标准描述"
prop="descr"
:label-col="{ span: 8 }"
:wrapper-col="{ span: 16 }"
:style="{ display: 'inline-block'}"
)
a-textarea(
v-model="formData.descr"
placeholder="请输入评价标准描述"
:auto-size="{ minRows: 2, maxRows: 8 }"
)
a-form-model-item(:style="{ display: 'inline-block', marginLeft:tableType?'505px':'235px'}")
a-button.editable-add-btn(
type="primary"
icon="plus"
@click="ev_addFormDataItemList") 添加
table.gridtable
thead
tr
th(:colspan="tableType?9:7") 评价标准细则
tr
th *序号
th *最小值
th *最大值
template(v-if="tableType")
th *等级
th *定性
th *十分制
th *五分制
th *百分制
th 操作
tbody
tr(v-for="(item,index) in formData.itemList" :key="index")
td
a-form-model-item(:prop="`itemList[${index}].itemSn`" :rules="rules.itemSn")
a-input-number(:min="0" :max="999" v-model="item.itemSn" placeholder="序号" )
td
a-form-model-item(:prop="`itemList[${index}].achFrom`" :rules="rules.achFrom")
a-input-number(:precision="4" :min="0" :max="999999" v-model="item.achFrom" placeholder="最小值" )
td
a-form-model-item(:prop="`itemList[${index}].achTo`" :rules="rules.achTo")
a-input-number(:precision="4" :min="0" :max="999999" v-model="item.achTo" placeholder="最大值" )
template(v-if="tableType")
td
a-form-model-item(:prop="`itemList[${index}].gradeabcVo`" :rules="rules.gradeabcVo")
a-select(style="width:120px" v-model="item.gradeabcVo" placeholder="等级")
a-select-option(v-for="item in gradeabcVoArr" :key="item.id" :value="item.id") {{item.label}}
td
a-form-model-item(:prop="`itemList[${index}].gradezylVo`" :rules="rules.gradezylVo")
a-select(style="width:120px" v-model="item.gradezylVo" placeholder="定性等级")
a-select-option(v-for="item in gradezylVoArr" :key="item.id" :value="item.id") {{item.label}}
td
a-form-model-item(:prop="`itemList[${index}].point10`" :rules="rules.point10")
a-input-number(:precision="4" :min="0" :max="10" @change="ev_pointItem(item.point10,index)" v-model="item.point10" placeholder="十分制")
td
a-form-model-item(:prop="`itemList[${index}].convertPoint5`" :rules="rules.convertPoint5")
a-input-number(:disabled="true" :precision="4" :min="0" :max="5" v-model="item.convertPoint5" placeholder="五分制")
td
a-form-model-item(:prop="`itemList[${index}].convertPoint100`" :rules="rules.convertPoint100")
a-input-number(:disabled="true" :precision="4" :min="0" :max="100" v-model="item.convertPoint100" placeholder="百分制")
td
a(v-if="formData.itemList.length > 1" @click="formData.itemList.splice(index,1)") 删除
span(v-else) -
a-form-model-item(
label="附件"
:label-col="{ span: 2 }"
:wrapper-col="{ span: 10 }"
:style="{ marginLeft:tableType?'94px':'110px'}"
)
a-upload(
name="file"
:action="$fileUpload"
:file-list="fileList"
@change="ev_handleChange"
:headers="{token}"
)
a-button
a-icon(type="upload")
span 上传
br
.button-box
a-button(type="primary" @click="ev_submit") 保存
a-button(
style="margin-left:1rem;"
@click="ev_cancel"
) 取消
</template>
<script>
import { mapState } from 'vuex'
import { selectListByVal } from '@/api/organization.js'
import {
targetStandardList,
targetStandardSave,
targetStandardUpdate,
targetStandardItemDelete,
targetStandardListOne
} from '@/api/target'
let columnsRation = [
{
title: '体系序号',
dataIndex: 'sn',
width: '60'
},
{
title: '评价体系',
dataIndex: 'typeVo',
width: 60
},
{
title: '评价标准',
dataIndex: 'criterion',
width: 60,
scopedSlots: { customRender: 'criterion' }
},
{
title: '评价描述',
dataIndex: 'descr',
width: 60,
scopedSlots: { customRender: 'descr' }
},
{
title: '附件',
dataIndex: 'fileVo',
width: 150
},
{
title: '评价标准细则',
dataIndex: 'itemList',
children: [
{
title: '序号',
dataIndex: 'itemSn',
width: 50
},
{
title: '最小值',
dataIndex: 'achFrom',
width: 50
},
{
title: '最大值',
dataIndex: 'achTo',
width: 50
},
{
title: '十分制',
dataIndex: 'point10',
width: 50
},
{
title: '五分制',
dataIndex: 'convertPoint5',
width: 50
},
{
title: '百分制',
dataIndex: 'convertPoint100',
width: 50
}
]
},
{
title: '有效期',
align: 'center',
dataIndex: 'beginDate',
width: 200,
scopedSlots: { customRender: 'beginDate' }
}
]
let columnsNature = [
{
title: '体系序号',
dataIndex: 'sn',
width: 60
},
{
title: '评价体系',
dataIndex: 'typeVo',
width: 60
},
{
title: '评价标准',
dataIndex: 'criterion',
width: 60,
scopedSlots: { customRender: 'criterion' }
},
{
title: '评价描述',
dataIndex: 'descr',
width: 60,
scopedSlots: { customRender: 'descr' }
},
{
title: '附件',
dataIndex: 'fileVo',
width: 150
},
{
title: '评价标准细则',
dataIndex: 'itemList',
children: [
{
title: '序号',
dataIndex: 'itemSn',
width: 50
},
{
title: '最小值',
dataIndex: 'achFrom',
width: 50
},
{
title: '最大值',
dataIndex: 'achTo',
width: 50
},
{
title: '十分制',
dataIndex: 'point10',
width: 50
},
{
title: '五分制',
dataIndex: 'convertPoint5',
width: 50
},
{
title: '百分制',
dataIndex: 'convertPoint100',
width: 50
},
{
title: '等级',
dataIndex: 'gradeabcVo',
width: 50
},
{
title: '定性',
dataIndex: 'gradezylVo',
width: 50
// scopedSlots: { customRender: 'gradezylVo' }
}
]
},
{
title: '有效期',
align: 'center',
dataIndex: 'beginDate',
width: 140,
scopedSlots: { customRender: 'beginDate' }
}
]
export default {
props: {
initData: {
type: Object,
require: true
},
basicData: {
type: Object,
require: true
},
moduleCode: {
type: String,
require: true
}
},
data() {
let validateAchTo = (rule, value, callback) => {
let minIndex = rule.field.substring(9, 10)
if (value === '') {
callback(new Error('不能为空'))
} else if (value <= this.formData.itemList[minIndex].achFrom && this.formData.itemList[minIndex].achFrom) {
callback(new Error('必须大于最小值'))
} else {
callback()
}
}
let validateAchFrom = (rule, value, callback) => {
let maxIndex = rule.field.substring(9, 10)
if (value === '') {
callback(new Error('不能为空'))
} else if (value >= this.formData.itemList[maxIndex].achTo && this.formData.itemList[maxIndex].achTo) {
callback(new Error('必须小于最大值'))
} else {
callback()
}
}
return {
isTable: false,
modalVisible: false,
modalTitleType: 'add',
disabledSn: false,
tableType: true,
targetPropVo: [],
targetItemVo: [],
statisticsTimeVo: [],
fileList: [], //附件
columns: JSON.parse(JSON.stringify(columnsNature)),
tableData: [],
formData: {
itemList: [
{
itemSn: '',
achFrom: '',
achTo: '',
convertPoint100: '',
convertPoint5: '',
gradeabcVo: '',
gradezylVo: '',
point10: ''
}
]
},
rules: {
sn: [{ required: true, message: '不能为空' }],
typeVo: [{ required: true, message: '不能为空' }],
itemSn: [{ required: true, message: '不能为空' }],
achFrom: [{ required: true, validator: validateAchFrom }], //最小
achTo: [{ required: true, validator: validateAchTo, trigger: 'change' }], // 最大
convertPoint100: [{ required: true, message: '不能为空' }],
convertPoint5: [{ required: true, message: '不能为空' }],
gradeabcVo: [{ required: true, message: '不能为空' }],
gradezylVo: [{ required: true, message: '不能为空' }],
point10: [{ required: true, message: '不能为空' }],
time: [{ required: true, message: '不能为空' }]
},
typeVoArr: [], //评价体系
gradeabcVoArr: [], //等级
gradezylVoArr: [] //定性中良优等级
}
},
components: {},
computed: {
...mapState(['token'])
},
watch: {
isTable(value) {
let action = this.basicData.edit || this.basicData.delete
if (value && action) {
this.columns.push({
title: '操作',
key: 'id',
align: 'center',
width: 120,
dataIndex: 'id',
scopedSlots: { customRender: 'id' },
fixed: 'right'
})
} else if (action) {
this.columns.pop()
}
}
},
mounted() {
this.ev_init()
},
methods: {
ev_pointItem(value, index) {
console.log('测试1', value, index)
this.formData.itemList[index].convertPoint5 = value / 2
this.formData.itemList[index].convertPoint100 = value * 10
},
ev_addFormDataItemList() {
this.formData.itemList.push({
itemSn: '',
achFrom: '',
achTo: '',
convertPoint100: '',
convertPoint5: '',
gradeabcVo: '',
gradezylVo: '',
point10: ''
})
},
ev_init() {
let param = JSON.parse(JSON.stringify(this.initData))
param = { ...param, ...param.type }
Reflect.deleteProperty(param, 'type')
targetStandardList({
...param
}).then((res) => {
this.tableType = !res.data.falg
if (!this.tableType) {
this.columns = JSON.parse(JSON.stringify(columnsRation))
}
this.tableData = res.data.list
this.columns = this.fn_columns(this.columns)
})
},
ev_cancel() {
this.modalVisible = false
this.formData = {
itemList: [
{
itemSn: '',
achFrom: '',
achTo: '',
convertPoint100: '',
convertPoint5: '',
gradeabcVo: '',
gradezylVo: '',
point10: ''
}
]
}
},
//评价体系
ev_changeTypeVo(value) {
let initData = { ...this.initData, ...this.initData.type }
Reflect.deleteProperty(initData, 'type')
Reflect.deleteProperty(initData, 'id')
initData.type = value.target.value
targetStandardListOne({ ...initData }).then((res) => {
let data = res.data
if (res.data != null) {
this.disabledSn = true
this.formData.id = data.id
this.formData.sn = data.sn
this.formData.criterion = data.criterion
this.formData.descr = data.descr
this.formData.time = [this.$moment(data.beginDate), this.$moment(data.endDate)]
this.formData = { ...this.formData }
} else {
this.disabledSn = false
this.formData.descr = ''
this.formData.criterion = ''
this.formData.sn = ''
this.formData.time = []
this.formData = { ...this.formData }
}
})
},
fn_columns(list) {
return list.map((item, idx) => {
if (item.children && item.children.length > 0) {
item.children = this.fn_columns(item.children)
} else if (item.dataIndex != 'id') {
item = {
title: item.title,
align: 'center',
width: item.dataIndex == 'sn' || item.dataIndex == 'typeVo' ? 100 : '',
fixed: item.dataIndex == 'sn' || item.dataIndex == 'typeVo' ? 'left' : false,
dataIndex: item.dataIndex,
customRender: (text, record, index) => {
return {
children: this.fn_children(item, record, text),
attrs: {
rowSpan: (() => {
let param = record.rowspan
if (param) {
if (param[item.dataIndex] === 0) return 0
return param[item.dataIndex] || 1
}
})(),
colSpan: (() => {
let param = record.colspan
if (param) {
if (param[item.dataIndex] === 0) return 0
return param[item.dataIndex] || 1
}
})()
}
}
}
}
}
return item
})
},
fn_children(item, record, text) {
if (item.dataIndex == 'descr') {
if (text.length > 5) {
return (
<a-popover placement="topLeft">
<template slot="content">{text}</template>
<span>{text.slice(0, 5) + '...'}</span>
</a-popover>
)
}
if (text.length > 0 && text.length < 5) {
return <span>{text}</span>
}
}
if (item.dataIndex == 'beginDate') {
return (
<span>
{record.beginDate}
<br />
{record.endDate}
</span>
)
}
if (Object.prototype.toString.call(text) === '[object Object]') {
if (text.label) {
return text.label
}
if (text.filename) {
let href = `${this.$fileDownload}${text.id}`
return (
<a href={href} target="blank">
{text.filename}
</a>
)
}
return '-'
}
if (text) {
return text
}
return '-'
},
//新增click
async ev_newlyIncreased() {
this.typeVoArr = await this.ev_selectListByVal(`${this.moduleCode}/t_target_attr/target_type`)
this.gradeabcVoArr = await this.ev_selectListByVal(`${this.moduleCode}/t_target_standard_item/gradeABC`)
this.gradezylVoArr = await this.ev_selectListByVal(`${this.moduleCode}/t_target_standard_item/gradeZYL`)
this.modalTitleType = 'add'
this.modalVisible = true
},
// //字典查询
async ev_selectListByVal(param) {
let res = await selectListByVal({ val: param })
return res.data
},
//新增编辑
ev_submit() {
this.$refs.ruleForm.validate((values) => {
if (!values) return
let param = JSON.parse(JSON.stringify(this.formData))
let initData = { ...this.initData, ...this.initData.type }
Reflect.deleteProperty(initData, 'type')
Reflect.deleteProperty(initData, 'id')
param.beginDate = this.$moment(param.time[0]).format('YYYY-MM-DD')
param.endDate = this.$moment(param.time[1]).format('YYYY-MM-DD')
param.type = param.typeVo
param.itemList = param.itemList.map((item) => {
item.gradeabc = item.gradeabcVo
item.gradezyl = item.gradezylVo
Reflect.deleteProperty(item, 'gradeabcVo')
Reflect.deleteProperty(item, 'gradezylVo')
return item
})
Reflect.deleteProperty(param, 'time')
//附件
param.fileId = (this.fileList && this.fileList.length && this.fileList[0].response.data) || undefined
param = { ...param, ...initData }
if (this.modalTitleType == 'add') {
// 新增
targetStandardSave({ ...param }).then((res) => {
this.$message.success('新增成功')
this.ev_cancel()
this.ev_init()
})
} else {
// 编辑
targetStandardUpdate({ ...param }).then((res) => {
this.$message.success('更新成功')
this.ev_cancel()
this.modalVisible = false
this.ev_init()
})
}
})
},
//删除
ev_delete(id) {
let formData = new FormData()
formData.append('id', id)
this.modalVisible = false
targetStandardItemDelete(formData).then((res) => {
this.$message.success('删除成功')
this.ev_init()
})
},
//上传
ev_handleChange(info) {
let fileList = [...info.fileList]
fileList = fileList.slice(-1)
if (info.file.status === 'done') {
this.$message.success(`${info.file.name} 文件上传成功`)
} else if (info.file.status === 'error') {
this.$message.error(`${info.file.name} 文件上传失败.`)
}
this.fileList = fileList
},
//编辑回写
async ev_edit(item) {
console.log(item)
this.typeVoArr = await this.ev_selectListByVal(`${this.moduleCode}/t_target_attr/target_type`)
this.gradeabcVoArr = await this.ev_selectListByVal(`${this.moduleCode}/t_target_standard_item/gradeABC`)
this.gradezylVoArr = await this.ev_selectListByVal(`${this.moduleCode}/t_target_standard_item/gradeZYL`)
let initData = { ...this.initData, ...this.initData.type }
Reflect.deleteProperty(initData, 'type')
Reflect.deleteProperty(initData, 'id')
initData.type = item.typeVo.id
this.formData.id = item.id
this.formData.criterion = item.criterion || '-'
this.formData.descr = item.descr || '-'
this.formData.typeVo = item.typeVo.id
let res = await targetStandardListOne({ ...initData })
let data = res.data
console.log('测试', data)
if (res.data.sn) {
this.formData.sn = data.sn
this.formData.time = [this.$moment(data.beginDate), this.$moment(data.endDate)]
this.formData = { ...this.formData }
}
this.formData.itemList = data.itemList.map((item1) => {
item1.gradeabcVo = item.gradeabcVo.id
item1.gradezylVo = item.gradezylVo.id
return item1
})
this.formData.typeVo = item.typeVo.id
this.formData.gradeabcVo = item.gradeabcVo.id
this.formData.gradezylVo = item.gradezylVo.id
this.formData = { ...this.formData }
this.modalTitleType = 'edit'
this.modalVisible = true
},
fn_options(id, list) {
let data = list.filter((item) => {
return item.id == id
})
return data.length > 0 ? data[0].label : ''
},
//颜色
customHeaderRow() {
return {
style: {
color: 'red'
}
}
}
}
}
</script>
<style lang="less" scoped>
@import url('./public.less');
.template {
display: flex;
span {
margin-top: 18px;
&:hover {
cursor: pointer;
color: @red_1;
}
}
}
.template-box {
width: 360px;
margin: 14px 8px 0 -60px;
padding: 10px 0 0 10px;
background: #fffafa;
border-radius: 4px;
.iconfilled {
position: relative;
top: 0;
right: 0;
&:hover {
color: @red_1;
}
}
}
.iconplus-box {
width: 360px;
height: 32px;
margin: 16px 0 0 -60px;
border: 1px solid #f5f5fa;
display: flex;
justify-content: flex-start;
padding-left: 14px;
align-items: center;
span {
font-size: 14px;
margin-left: 8px;
}
&:hover {
cursor: pointer;
}
}
table.gridtable {
margin-left: 120px;
height: 44px;
font-size: 14px;
color: @black_2;
border-width: 1px;
border-color: @border_line_color;
border-collapse: collapse;
thead tr {
height: 40px;
font-size: 12px;
}
}
table.gridtable th {
text-align: center;
border-width: 1px;
padding: 2px;
border-style: solid;
border-color: @border_line_color;
// background-color: #dedede;
}
table.gridtable td {
text-align: center;
min-width: 120px;
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: @border_line_color;
background-color: #ffffff;
}
.td-input-max {
width: 160px;
height: 32px;
}
.ant-form-item {
margin-bottom: 10px;
}
.button-box {
margin-top: 100px;
}
.item-box {
justify-content: space-around;
}
/deep/ .ant-table {
.ant-table-align-center {
padding: 0px;
}
.ant-table-layout-fixed,
.ant-table-scroll-position-left {
font-size: 13px !important;
}
.ant-table-thead > tr > th {
background: #f5f5fa !important;
color: #777 !important;
}
}
</style>