jsm-mall-front/src/views/engineeringMaintenance/basicData/index.vue

<template>
  <div class="page">
    <template-page
      v-if="!formDialog"
      ref="pageRef"
      :get-list="getList"
      :table-attributes="tableAttributes"
      :table-events="tableEvents"
      :operationColumnWidth="150"
      :options-evens-group="optionsEvensGroup"
      :moreParameters="moreParameters"
      :column-parsing="columnParsing"
      :operation="operation()"
    >
    </template-page>
    <div class="detail" v-else>
      <detail
        :id="id"
        @back="backList"
        :formType="formDialogType"
        :title="'工程维保' + formDialogTitles[formDialogType]"
      ></detail>
    </div>
  </div>
</template>

<script>
import TemplatePage from '@/components/template/template-page-1.vue'
import import_mixin from '@/components/template/import_mixin.js'
import ImageUpload from '@/components/file-upload'
import detail from './detail.vue'
import operation_mixin from '@/components/template/operation_mixin.js'
import { required, mobileRequired, mobile, httpUrl, email } from '@/components/template/rules_verify.js'
import { listPageV2, pageExport, getDetail, save } from '@/api/engineeringMaintenance/basicData'
export default {
  components: { TemplatePage, ImageUpload, detail },
  mixins: [import_mixin, operation_mixin],
  data() {
    return {
      // 表格属性
      tableAttributes: {
        // 启用勾选列
        selectColumn: false
      },
      // 表格事件
      tableEvents: {
        'selection-change': this.selectionChange
      },
      // 勾选选中行
      recordSelected: [],
      /** 表单变量 */
      formDialogType: 0,
      formDialogTitles: ['新增', '编辑', '详情'],
      formDialog: false,
      formData: {},
      id: ''
    }
  },
  computed: {
    // 更多参数
    moreParameters() {
      return []
    },
    // 事件组合
    optionsEvensGroup() {
      return [
        [
          [
            this.optionsEvensAuth('add', {
              click: () => {
                this.addData()
              }
            })
          ]
        ]
      ]
    },
    formItems() {}
  },
  methods: {
    // 列表请求函数
    getList: listPageV2,
    // 列表导出函数
    exportList: pageExport,
    backList() {
      this.id = ''
      this.formDialog = false
      this.$nextTick(() => {
        this.$refs.pageRef.refreshList()
      })
    },
    // 表格列解析渲染数据更改
    columnParsing(item, defaultData) {
      if (item.jname === 'serviceCode') {
        defaultData.render = (h, { row, index, column }) => {
          return (
            <div style="cursor: pointer;display: flex">
              {' '}
              {row.serviceCode
                ? row.serviceCode
                    .split(',')
                    .map(url => (
                      <el-image
                        src={this.$showImgUrl(url)}
                        preview-src-list={[this.$showImgUrl(url)]}
                        fit="cover"
                        style="width:80px;height:80px;"
                      />
                    ))
                : null}{' '}
            </div>
          )
        }
      }
      if (item.jname === 'startTime') {
        defaultData.render = (h, { row, index, column }) => {
          return <div style="cursor: pointer;display: flex">   {row.startTime.substring(0, 10)} </div>
        }
      }
      if (item.jname === 'endTime') {
        defaultData.render = (h, { row, index, column }) => {
          return <div style="cursor: pointer;display: flex">   {row.endTime.substring(0, 10)} </div>
        }
      }
      return defaultData
    },
    // 监听勾选变化
    selectionChange(data) {
      this.recordSelected = data
    },
    // 表格操作列
    operation() {
      return this.operationBtn({
        edit: {
          btnType: 'text',
          click: ({ row, index, column }) => {
            this.id = row.id
            this.formDialogType = 1
            this.openForm()
          }
        },
        detail: {
          btnType: 'text',
          click: ({ row, index, column }) => {
            this.id = row.id
            this.formDialogType = 2
            this.openForm()
          }
        },
        // expenseApply: {
        // 	btnType: 'text',
        // 	click: ({ row, index, column }) => {
        // 		this.$router.push({
        // 			name: row.isAllFee=='YES'?"allInclusiveExpense":'applicationWithoutFee',
        // 			query: {
        // 				rpProjectRepairId:row.id
        // 			}
        // 		})
        // 	}
        // },
        serviceOrderDetail: {
          btnType: 'text',
          click: ({ row, index, column }) => {
            this.$router.push({
              name: window.isWorkOrderPoolPath,
              params: {
                pageName: row.id,
                pageType: 'rpProjectRepairId',
                pageCode: row.id
              }
            })
          }
        }
      })
    },
    addData() {
      this.formDialogType = 0
      this.openForm()
    },
    openForm() {
      this.formDialog = true
    },
    formCancel() {
      this.$refs.formRef.$refs.inlineForm.clearValidate()
      this.$data.formData = this.$options.data().formData
      this.formDialog = false
    },
    formConfirm() {
      this.$refs.formRef.validate((valid, invalidFields, errLabels) => {
        if (valid) {
          save({
            ...this.formData,
            imgUrl: this.formData.imgUrl.map(item => item.url).join(',')
          }).then(res => {
            this.$message({ type: 'success', message: `${this.formDialogTitles[this.formDialogType]}成功!` })
            this.formCancel()
            this.$refs.pageRef.refreshList()
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.tab {
  padding: 20px 20px 0 20px;
}
.page {
  height: 100%;
}
</style>