TrackEdit.vue 3.38 KB
<template>
  <template>
    <BasicDrawer
      @register="register"
      v-bind="$attrs"
      title="收入款单"
      width="30%"
      :isDetail="true"
      @ok="handleSubmit"
      :showDetailBack="false"
      okText="保存"
      showFooter
      :destroyOnClose="true"
    >
      <div>
        <div style="font-size: 15px">客户扣款金额$</div>
        <a-input v-model:value="input1" placeholder="请输入" auto-size />
        <div style="margin: 16px 0"></div>
        <div>上传扣款单</div
        ><a-space direction="vertical" style="width: 100%" size="large">
          <a-upload
            v-model:file-list="fileList"
            :beforeUpload="beforeUpload"
            list-type="picture"
            :max-count="1"
            :action="updateDeductUrl"
            @change="handleChange"
          >
            <a-button> 上传扣款单 </a-button>
          </a-upload>
        </a-space>
      </div>
      <!-- <template #titleToolbar> <a-button type="primary"> 申请编辑权限 </a-button></template> -->
      <template #appendFooter>
        <!-- <a-button type="primary" @click="onGoCheckDetail"> 申请权限</a-button> -->
      </template>
    </BasicDrawer>
  </template>
</template>
<script lang="ts" setup>
  import { BasicDrawer, useDrawerInner } from '@/components/Drawer';
  import { defineComponent, ref, computed, unref, toRaw, reactive } from 'vue';
  import { getEmailList } from '/@/api/sys/config';
  import { UploadOutlined } from '@ant-design/icons-vue';
  import type { UploadProps } from 'ant-design-vue';
  import { updateDeduct } from '@/api/project/invoice';
  import { useMessage } from '/@/hooks/web/useMessage';

  const emit = defineEmits(['success']);
  const fileList = ref<UploadProps['fileList']>([]);

  const input1 = ref();
  const deductUrl = ref();
  const id = ref();
  const invoiceNo = ref();
  const uploadUrl = ref('http://47.104.8.35:8081/api/localStorage/upload_file_oss?name=');
  const updateDeductUrl = ref('http://47.104.8.35:8081/api/localStorage/upload_file_oss?name=');
  const deductUrlOld = ref();
  const { createMessage } = useMessage();
  const { error } = createMessage;

  const [register, { setDrawerProps, closeDrawer }] = useDrawerInner((data) => {
    id.value = data.data.id;
    invoiceNo.value = data.data.invoiceNo;
    input1.value = data.data.deductAmount;
    deductUrl.value = data.data.deductUrl;
    deductUrlOld.value = data.data.deductUrl;
  });

  function handleChange(info) {
    if (info.file.status == 'done') {
      updateDeductUrl.value = info.file.response.data.fileUrl;
      deductUrl.value = updateDeductUrl.value;
    }
    if (info.fileList.length == 0) {
      info.file = null;
      deductUrl.value = '';
    }
  }
  function beforeUpload(info) {
    updateDeductUrl.value = uploadUrl.value + info.name;
  }

  //完成编辑
  async function handleSubmit() {
    console.log(input1.value, '5656', deductUrl.value);
    if (!input1.value || deductUrl.value == '') {
      error('选项不能为空');
    } else {
      if (deductUrl.value == deductUrlOld.value || deductUrl.value == '') {
        error('请上传扣款单');
      } else {
        await updateDeduct({
          id: id.value,
          invoiceNo: invoiceNo.value,
          deductAmount: input1.value,
          deductUrl: deductUrl.value,
        });
        fileList.value = [];
        emit('success');
        closeDrawer();
      }
    }
  }
</script>