SOURCE

console 命令行工具 X clear

                    
>
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>