fans-mobile/src/views/processApproval/components/InvoiceTaxDeduction.vue

<template>
  <div class="form">
    <testForm v-model="formData.data" :formOption="formOption" :formConfig="formConfig" :rules="rules" ref="formDom">
      <template #detail>
        <div style="width:100%">
          <div style="width:100%;overflow-x:auto;">
            <table border class="table">
              <thead>
                <tr>
                  <th style="min-width:130px;">发票附件(电子发票需上传PDF或OFD格式)</th>
                  <th style="min-width:50px">金额</th>
                </tr>
              </thead>
              <tbody v-if="formData.data.invoiceTaxDeductionDetailsList && formData.data.invoiceTaxDeductionDetailsList.length>0">
                <tr v-for="(item,index) in formData.data.invoiceTaxDeductionDetailsList" :key="index">
                  <td>
                    <div v-for="file in item.fileList" :key="file.id" style="color: #409eff;cursor: pointer;"
                         @click="onPreviewFile(file.fileName,file.fileUrl)">
                      {{file.fileName}}
                    </div>
                  </td>
                  <td>{{item.amount}}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </template>
    </testForm>
  </div>
</template>

<script setup>
import {
  ref,
  getCurrentInstance,
  onMounted,
  defineProps,
  defineExpose,
  watch,
  reactive,
  toRefs,
} from "vue";
import { useRoute } from "vue-router";
import testForm from "@/components/testForm/index.vue";
import { getUserInfo } from "@/utils/auth";
import { showFailToast } from "vant";
// 接收父组件的传值
const props = defineProps({
  queryData: Object,
});
const refProps = toRefs(props);
const proxy = getCurrentInstance().proxy;
const route = useRoute();
const active = ref(0);
const tabsChange = () => {
  active.value++;
};
const selectData = ref([]);
const formData = reactive({
  data: {},
});
const formDom = ref(null);
const formOption = reactive({
  readonly: false,
  disabled: false,
  labelAlign: "top",
  scroll: true,
  labelWidth: "62pk",
  hiddenSubmitBtn: true,
});
const formConfig = reactive([
  {
    type: "title",
    title: "基本信息",
  },
  {
    type: "input",
    label: "流水号",
    prop: "code",
    itemType: "text",
    readonly: true,
  },
  {
    type: "input",
    label: "提交日期",
    prop: "applyTime",
    itemType: "text",
    readonly: true,
  },
  {
    type: "input",
    label: "提交人",
    prop: "createUserName",
    itemType: "text",
    readonly: true,
  },
  {
    type: "input",
    label: "抵扣金额汇总",
    prop: "amount",
    itemType: "text",
    readonly: true,
  },
  {
    type: "input",
    label: "抵扣工资月份",
    prop: "deductionSalaryMonth",
    itemType: "text",
    readonly: true,
  },

  {
    type: "slot",
    label: "抵扣明细",
    slotName: "detail",
  },
]);

const rules = {};

const getDict = () => {
  proxy
    .post("/educationConfig/page", {
      pageNum: 1,
      pageSize: 999,
    })
    .then((res) => {
      selectData.value = res.data.rows.map((x) => ({
        ...x,
        label: x.name,
        value: x.id,
      }));
    });
};
// getDict();

const status = ref(true);
const handleSubmit = async () => {
  if (status.value) {
    return formData.data;
  }
};

onMounted(() => {
  if (route.query && route.query.businessId) {
    formOption.readonly = true;
    formOption.hiddenSubmitBtn = true;
    let businessId = route.query.businessId;
    proxy
      .post("/invoiceTaxDeduction/detail", { id: businessId })
      .then((res) => {
        formData.data = res.data;
        let ids = formData.data.invoiceTaxDeductionDetailsList.map((x) => x.id);
        proxy.post("/fileInfo/getList", { businessIdList: ids }).then((res) => {
          let fileObj = res.data;
          if (Object.keys(fileObj).length > 0) {
            for (
              let i = 0;
              i < formData.data.invoiceTaxDeductionDetailsList.length;
              i++
            ) {
              const row = formData.data.invoiceTaxDeductionDetailsList[i];
              for (const key in fileObj) {
                if (row.id == key) {
                  row.fileList = fileObj[key].map((item) => {
                    return {
                      ...item,
                      name: item.fileName,
                      url: item.fileUrl,
                    };
                  });
                  break;
                }
              }
            }
          }
        });
      });
  }
});

defineExpose({
  handleSubmit,
  tabsChange,
});
onMounted(() => {});
</script>
<style lang="scss" scoped>
._title {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 700;
  margin-left: -10px;
  .line {
    width: 4px;
    background-color: #0084ff;
    height: 15px;
    margin-right: 8px;
  }
}

.table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  border-color: #ebeef5;
  color: #606266;
  thead tr th {
    padding: 6px;
    text-align: left;
  }
  td {
    text-align: left;
    padding: 6px;
  }
}
</style>