picc / admin-no-ui · Files

<template>
  <div>
    <a-form
      id="components-form-demo-validate-other"
      :form="form"
      v-bind="formItemLayout"
      @submit="handleSubmit"
    >
      <a-form-item label="审批额度(元)">
        <a-input-number
          style="width:150px;margin-right:10px"
          :formatter="value => `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
          :parser="value => value.replace(/\\s?|(,*)/g, '')"
          v-decorator="['approvalAmount', {'initialValue':records.transAmount&&records.transAmount!=0?records.transAmount:'',rules:[{required: true,message: '输入审批额度'}]}]"
          placeholder="输入审批额度"
        />
        <a @click="showShenPi">额度体系查看</a>
      </a-form-item>

      <a-form-item label="审批结果">
        <a-radio-group
          v-decorator="['approvalResult',{rules:[{required: true,message: '请选择审批结果'}]}]"
        >
          <a-radio :value="1">通过</a-radio>
          <a-radio :value="3">退件待补</a-radio>
          <a-radio :value="2">拒绝</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="审批意见">
        <a-textarea
          v-decorator="['approvalNote', {rules:[{required: true,message: '输入审批意见'}]}]"
          placeholder="输入审批意见"
          :autosize="{ minRows: 2, maxRows: 6 }"
        />
      </a-form-item>
      <a-form-item label="审批报告" extra="仅支持上传jpg\png\jpeg\bmp\pdf文件格式">
        <a-upload
          v-decorator="[
          'approvalUploadFileUrl',
          {},
        ]"
          :action="url.upload"
          @change="uploadList"
        >
          <a-button>
            <a-icon type="upload" />上传
          </a-button>
        </a-upload>
      </a-form-item>
      <a-form-item :wrapper-col="{ span: 12, offset: 6 }">
        <a-button type="primary" @click="handleSubmit">提交信息</a-button>
      </a-form-item>
    </a-form>
    <a-modal :maskClosable="false"  
      title="编辑额度模板"
      :width="850"
      :centered="true"
      :visible="accountNoFlag"
      cancelText="关闭"
      :confirmLoading="confirmLoading"
      @ok="queren"
      @cancel="cancle"
      style="top:20px;"
    >
      <p>额度模板：</p>
      <a-table
        ref="table"
        bordered
        size="middle"
        rowKey="id"
        :columns="columns"
        :dataSource="detailDatas"
        :pagination="{hideOnSinglePage:true}"
        :scroll="{ x: 800 }"
        :defaultExpandAllRows="true"
      >
        <span slot="zhanbi" slot-scope="text, record">
          <a-input-number
            v-if="record.nodeLevel!=1"
            :defaultValue="text"
            :min="0"
            :max="100"
            :formatter="text => `${text}%`"
            :parser="text => text.replace('%', '')"
            @change="onChange"
          />
        </span>
        <span slot="actionOpen" slot-scope="text,record">
          <!-- <a-switch v-if="record.nodeLevel==1"  size="small" @click="changeStatus(record)" :checked="record.nodeStatus==1" /> -->
        </span>
      </a-table>
    </a-modal>
  </div>
</template>

<script>
import {
  submitApprovalTrans,
  approvalStrategyStatus,
  queryCreditModelConfigDetail,
  queryApprovalStrategyConfigPage
} from '@/api/insys'
import { creditAmountModify } from '@/api/configApi'
import { formatAmount, formatAmountFen, reverseAmountFen, reverseAmount } from '@/utils/format'
export default {
  name: 'deteailModal',
  props: ['detailData', 'id', 'records'],
  data: () => ({
    accountNoFlag: false,
    confirmLoading: false,
    detailDatas: {},
    url: {
      upload: window._CONFIG['uploadUrl']
    },
    columns: [
      {
        title: '层级',
        // dataIndex: '',
        // key: 'rowIndex',
        width: '150px',
        align: 'center',
        //   fixed: 'left',
        // customRender: function(t, r, index) {
        //   return parseInt(index) + 1
        // }
        dataIndex: 'nodeLevel'
      },
      {
        title: '额度名称',
        align: 'center',
        width: 100,
        dataIndex: 'nodeName'
      },

      // {
      //   title: '额度',
      //   align: 'center',
      //   //   width: 100,
      //   dataIndex: 'creditAmount'
      // },
      {
        title: '限额',
        align: 'center',
        // width: 100,
        dataIndex: 'nodeLimit',
        // customRender: function(t, r, index) {
        //   return t / 100
        // }
      },
      {
        title: '占比',
        align: 'center',
        // width: 100,
        scopedSlots: { customRender: 'zhanbi' },
        dataIndex: 'nodeExtendsRatio'
      },

      {
        title: '节点启用状态',
        dataIndex: 'action',
        scopedSlots: { customRender: 'actionOpen' },
        align: 'center',
        width: 100
        // fixed: 'right'
      }
    ],
    formItemLayout: {
      labelCol: { span: 6 },
      wrapperCol: { span: 14 }
    },
    // form: this.$form.createForm(this)
  }),
  beforeCreate() {
    this.form = this.$form.createForm(this, { name: 'validate_other' })
  },

  mounted() {
    console.log(this.records)
    // let formData = {customerType:this.records.customerType}
    let formData = { params: { customerType: this.records.customerType }, pageNo: 1, pageSize: 10 }
    queryCreditModelConfigDetail(formData)
      .then(res => {
        if (res.status.statusCode == 0) {
          // this.$message.success(res.status.statusReason)
          // console.log(res.result);
          this.detailDatas = res.result
        } else {
          // this.$message.warning(res.status.statusReason)
        }
      })
      .finally(() => {
        this.confirmLoading = false
        this.cancle()
      })
  },
  watch: {
    //  "accountNoFlag":{
    //     handler:function(val,oldval){
    //       console.log(val)
    //       this.accountNoFlag = val
    //     },
    //   },
  },
  methods: {
    handleSubmit(e) {
      e.preventDefault()
      var _self = this
      this.form.validateFields((err, values) => {
        // console.log(this.records)
        // return ''
        this.confirmLoading = true
        if (!err) {
          let id = {
            id: this.id,
            approvalRoleCode: this.records.assignee,
            approvalAmount: Number(values.approvalAmount)
          }
          let formData = Object.assign(id, values)
          if (!!values.approvalUploadFileUrl) {
            formData.approvalUploadFileUrl = values.approvalUploadFileUrl.fileList[0].response.data.fileURL
          }
          // this.$emit('ok','shenpi')
          // return ""
          submitApprovalTrans(formData)
            .then(res => {
              if (res.status.statusCode == 0) {
                this.confirmLoading = false
                this.$message.success(res.status.statusReason)
                this.form.resetFields()
                this.$nextTick(() => {
                  this.form.setFieldsValue()
                })
                this.$emit('ok', 'shenpi')
              } else {
                this.$message.warning(res.status.statusReason)
              }
            })
            .finally(() => {
              _self.confirmLoading = false
            })
        }
      })
    },
    // 文件上传
    uploadList(e) {},
    //获取模板
    getModle() {
      let formData = { customerType: this.records.customerType }
      queryCreditModelConfigDetail(formData)
        .then(res => {
          if (res.status.statusCode == 0) {
            // this.$message.success(res.status.statusReason)
            console.log(res.result)
            this.detailDatas = res.result
          } else {
            this.$message.warning(res.status.statusReason)
          }
        })
        .finally(() => {
          this.confirmLoading = false
        })
    },
    //更改启用禁用状态
    changeStatus(res) {
      console.log(res.nodeStatus)
      let _p = {}
      creditAmountModify(_p)
        .then(res => {
          if (res.status.statusCode == 0) {
            this.getModle()
          } else {
            this.$message.warning(res.status.statusReason)
          }
        })
        .finally(() => {
          this.confirmLoading = false
        })
    },
    normFile(e) {
      console.log('Upload event:', e)
      if (Array.isArray(e)) {
        return e
      }
      return e && e.fileList
    },
    // 编辑占比
    onChange(value) {
      console.log(value)
    },
    showShenPi() {
      this.accountNoFlag = true
    },
    cancle() {
      this.accountNoFlag = false
    },
    queren() {
      this.cancle()
    }
  }
}
</script>