zfire-newmall-admin/src/views/workOrder/workOrderPool/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>