ezhizao_yzbh_vue/src/views/business/deduction/MergeTaxViewDialog.vue

<template>
  <el-dialog
    title="税款申报信息"
    v-model="visible"
    :width="width"
    append-to-body
    draggable
    @close="close"
  >
    <!-- 功能按钮 -->
    <div style="padding: 8px 24px 16px 24px">
      <el-form size="small" label-width="140px" v-model="form">
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="客户名称">
              <div>{{ form.companyName }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所属月份">
              <div>{{ form.year }}-{{ form.month }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-divider content-position="left" style="font-size: 10px"
              >个税</el-divider
            >
          </el-col>
          <el-col :span="12">
            <el-form-item label="个税金额：">
              <div>{{ rowNum(personTax.amount) }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注：">
              <div>{{ personTax.content }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="凭证：" required>
              <img
                v-if="!!personTax.evidenceFile"
                style="height: 148px; width: 148px"
                :src="`${baseUrl}/${personTax.evidenceFile}`"
                class="avatar"
                @click="openFile(personTax.evidenceFile)"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="报表：" required>
              <el-button
                v-if="!!personTax.reportFile"
                type="text"
                class="avatar"
                @click="openFile(personTax.reportFile)"
                >打开文件</el-button
              >
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-divider content-position="left" style="font-size: 10px"
              >其他税</el-divider
            >
          </el-col>
          <el-col :span="12">
            <el-form-item label="增值税：">
              <div>{{ rowNum(reportTax.valueAddedTax) }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="城建税：">
              <div>{{ rowNum(reportTax.cityConstructTax) }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="教育费附加：">
              <div>{{ rowNum(reportTax.additionsTaxOfEducation) }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="地方教育费附加：">
              <div>{{ rowNum(reportTax.ladditionsTaxOfEducation) }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="企业所得税：">
              <div>{{ rowNum(reportTax.businessIncomeTax) }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="印花税：">
              <div>{{ rowNum(reportTax.stampTax) }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="文化事业建设税：">
              <div>{{ rowNum(reportTax.culturalConstructTax) }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="消费税：">
              <div>{{ rowNum(reportTax.excise) }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="合计：">
              <div>{{ rowNum(reportTax.sumTax) }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注：">
              <div>{{ reportTax.content }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="凭证：" required>
              <img
                v-if="!!reportTax.evidenceFile"
                style="height: 148px; width: 148px"
                :src="`${baseUrl}${reportTax.evidenceFile}`"
                class="avatar"
                @click="openFile(reportTax.evidenceFile)"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="报表：" required>
              <el-table
                ref="dbTable"
                :data="reportTax.reportFiles"
                size="small"
                border
                header-row-class-name="list-header-row"
                row-class-name="list-row"
              >
                <el-table-column
                  label="文件名"
                  prop="rawFileName"
                  align="center"
                  show-overflow-tooltip
                >
                  <template #default="scope">
                    <el-button
                      size="small"
                      type="text"
                      @click="openFile(scope.row.fileUrl)"
                      >{{ scope.row.rawFileName }}</el-button
                    >
                  </template>
                </el-table-column>
                <el-table-column
                  label="文件类型"
                  width="80"
                  prop="fileType"
                  align="center"
                />
              </el-table>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="form-btns-container" style="height: 40px">
      <el-button size="small" style="float: right" @click="close"
        ><i class="fa fa-close" aria-hidden="true" f /> 取消</el-button
      >
    </div>
    <!-- <feedback-dialog ref="feedbackDialogView" :parent="this" />
    <print-dialog ref="printDialog" :parent="this" /> -->
  </el-dialog>
</template>
<script setup>
import { getAmountView } from "@/api/business/production/deduction";
import { uploadFile } from "@/api/tool/file";
import { rowNum } from "@/utils/index";
import { ref } from "vue";
const { proxy } = getCurrentInstance();
const visible = ref(false);
const width = ref(800);
const selections = ref([]);
const currentSource = ref(null);
const editStatus = ref(false);
const canSave = ref(false);
const baseUrl = ref(import.meta.env.VITE_APP_BASE_API);
const props = defineProps({
  getList: {
    type: Function,
    default: () => {},
  },
});

const { getList } = toRefs(props);
const total = ref(0);

const employeeEmptyData = {
  id: null,
  title: "",
  remark: "",
  employeeName: "",
  departmentName: "",
  idCardImage: "",
  idCardImageBack: "",
  idiograph: "",
  details: [],
  editStatus: true,
};

const form = ref({});
const conditions = ref({});
const reportTax = ref({});
const personTax = ref({});

const emptyForm = {
  details: [],
};

function open(detail) {
  visible.value = true;
  conditions.value = detail;
  loadData();
}

function loadData() {
  console.log(conditions.value);
  getAmountView(conditions.value).then((res) => {
    form.value = res.data.form;
    reportTax.value = res.data.reportTax;
    personTax.value = res.data.individualTax;
  });
}

function close() {
  visible.value = false;
  reset();
}

function reset() {
  form.value = proxy.deepClone(emptyForm);
  reportTax.value = {};
  personTax.value = {};
  canSave.value = false;
}

function handleCurrentChange(row) {
  currentSource.value = row;
}

function openFile(url) {
  window.open(`${baseUrl.value}${url}`);
}

// 暴露给父组件的方法
defineExpose({
  open,
});
</script>
<style scoped>
.img {
  width: 23px;
  height: 23px;
  display: flex;
  justify-content: center;
  align-items: center;
}

::v-deep(.el-upload) {
  display: flex;
  text-align: center;
  justify-content: center;
  cursor: pointer;
  outline: 0;
}

.required::after {
  content: "*";
  color: red;
}
</style>