jsm-mall-front/src/views/workOrder/workOrderPool2/detailModule/PartsApplication/formModule.vue

<template>
  <zj-form-module :title="'申请信息' + (index + 1)" :form-data="item" :form-items="formItems">
    <div
      v-if="item.status == 'ING'"
      style="text-align: right; box-sizing: border-box; padding-bottom: 10px; padding-right: 10px"
    >
      <el-button size="mini" plain @click="quxiao">取消申请</el-button>
      <el-button size="mini" type="primary" plain @click="daohuo">到货反馈</el-button>
    </div>
  </zj-form-module>
</template>

<script>
import editTable from '@/components/template/editTable.js'
import {
  orderPartsApplyItemModify,
  orderPartsApplyCancel,
  orderPartsApplyEnd,
  orderPartsApplyItemDel
} from '@/api/workOrderPool.js'
export default {
  props: {
    id: {
      type: [String, Number],
      default: null
    },
    item: {
      type: Object,
      default: () => ({})
    },
    index: {
      type: [String, Number],
      default: null
    }
  },
  mixins: [editTable],
  data() {
    return {}
  },
  computed: {
    formItems() {
      return [
        {
          name: 'el-input',
          md: 6,
          attributes: { disabled: true, placeholder: '-' },
          formItemAttributes: { label: '申请单号', prop: 'id' }
        },
        {
          name: 'slot-component',
          md: 6,
          formItemAttributes: { label: '申请状态', prop: 'status' },
          render: (h, { props, onInput }) => {
            var { value } = props
            return (
              <el-input
                disabled={true}
                value={{ ING: '申请中', END: '到货反馈', CANCEL: '取消申请' }[value]}
                placeholder=""
              ></el-input>
            )
          }
        },
        {
          name: 'el-input',
          md: 6,
          attributes: { disabled: true, placeholder: '-' },
          formItemAttributes: { label: '申请人', prop: 'createBy' }
        },
        {
          name: 'el-input',
          md: 6,
          attributes: { disabled: true, placeholder: '-' },
          formItemAttributes: { label: '申请时间', prop: 'createTime' }
        },
        {
          name: 'el-input',
          md: 6,
          attributes: { disabled: true, placeholder: '-' },
          formItemAttributes: { label: '取消人', prop: 'cancelBy' }
        },
        {
          name: 'el-input',
          md: 6,
          attributes: { disabled: true, placeholder: '-' },
          formItemAttributes: { label: '取消时间', prop: 'cancelTime' }
        },
        {
          name: 'el-input',
          md: 6,
          attributes: { disabled: true, placeholder: '-' },
          formItemAttributes: { label: '反馈人', prop: 'confirmBy' }
        },
        {
          name: 'el-input',
          md: 6,
          attributes: { disabled: true, placeholder: '-' },
          formItemAttributes: { label: '反馈时间', prop: 'confirmTime' }
        },
        {
          name: 'el-input',
          md: 24,
          attributes: {
            disabled: true,
            type: 'textarea',
            rows: 2,
            placeholder: '-'
          },
          formItemAttributes: {
            label: '备注',
            prop: 'remark'
          }
        },
        {
          name: 'slot-component',
          md: 24,
          formItemAttributes: { label: '配件信息', prop: 'items' },
          render: (h, { props, onInput }) => {
            var { value } = props
            console.log(value)
            return this.convertTableJson(
              value,
              [
                {
                  columnAttributes: {
                    label: '配件名称',
                    prop: 'name',
                    propName: 'name'
                  },
                  editRender: (h, { row, column, index }) => {
                    return (
                      <div class="redbordererr">
                        <el-form-item label="" label-width="0px">
                          <el-input
                            value={row[column.columnAttributes.prop]}
                            onInput={val => {
                              row[column.columnAttributes.prop] = val
                            }}
                            placeholder="请输入内容"
                          ></el-input>
                        </el-form-item>
                      </div>
                    )
                  },
                  viewRender: (h, { row, column, index }) => {
                    return <div style="padding-left:10px">{row[column.columnAttributes.prop]}</div>
                  }
                },
                {
                  columnAttributes: {
                    label: '数量',
                    prop: 'qty',
                    propName: 'qty'
                  },
                  editRender: (h, { row, column, index }) => {
                    return (
                      <div class="redbordererr">
                        <el-form-item label="" label-width="0px">
                          <el-input
                            value={row[column.columnAttributes.prop]}
                            onInput={val => {
                              row[column.columnAttributes.prop] = val
                            }}
                            placeholder="请输入内容"
                            type="number"
                          ></el-input>
                        </el-form-item>
                      </div>
                    )
                  },
                  viewRender: (h, { row, column, index }) => {
                    return <div style="padding-left:10px">{row[column.columnAttributes.prop]}</div>
                  }
                }
              ],
              {
                isEdit: this.item.status == 'ING',
                isAdd: false,
                isDel: false // this.item.status == "ING",
              },
              {
                confirm: ({ row, column, index }) => {
                  orderPartsApplyItemModify({ ...row }).then(res => {
                    this.isEditTableIndex = -1
                    this.$message({
                      type: 'success',
                      message: '保存成功'
                    })
                  })
                },
                delete: ({ row, column, index }, cb) => {
                  orderPartsApplyItemDel({ ...row }).then(res => {
                    this.$message({
                      type: 'success',
                      message: '删除成功'
                    })
                    cb && cb()
                  })
                }
              }
            )
          }
        }
      ]
    }
  },
  methods: {
    quxiao() {
      this.$confirm('是否确认取消?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          orderPartsApplyCancel({
            id: this.item.id
          }).then(res => {
            this.$message({
              type: 'success',
              message: '取消成功'
            })
            this.$emit('shuaxin')
          })
        })
        .catch(() => {})
    },
    daohuo() {
      this.$confirm('是否确认反馈?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          orderPartsApplyEnd({
            id: this.item.id
          }).then(res => {
            this.$message({
              type: 'success',
              message: '反馈成功'
            })
            this.$emit('shuaxin')
          })
        })
        .catch(() => {})
    }
  }
}
</script>

<style lang="scss" scoped></style>