合同管理的附件上传功能

zhangwencui

3 天以前 332eb3d94ead893f48348fdaab13f61ce9703a5f

合同管理的附件上传功能

 src/views/officeProcessAutomation/HrManage/staff-contract/components/formDia.vue

@@ -1,96 +1,93 @@
<template>
  <div>
    <el-dialog
        v-model="dialogFormVisible"
        title="详情"
        width="70%"
        @close="closeDia"
    >
      <PIMTable
          rowKey="id"
          :column="tableColumn"
          :tableData="tableData"
          :tableLoading="tableLoading"
          height="600"
      ></PIMTable>
    <el-dialog v-model="dialogFormVisible"
               title="详情"
               width="70%"
               @close="closeDia">
      <PIMTable rowKey="id"
                :column="tableColumn"
                :tableData="tableData"
                :tableLoading="tableLoading"
                height="600"></PIMTable>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="closeDia">取消</el-button>
        </div>
      </template>
    </el-dialog>
    <Files ref="filesDia"></Files>
    <FileList v-if="fileDialogVisible"
              v-model:visible="fileDialogVisible"
              :record-type="'staff_contract'"
              :record-id="recordId" />
  </div>
</template>

<script setup>
import {ref} from "vue";
import {findStaffContractListPage} from "@/api/personnelManagement/staffContract.js";
const Files = defineAsyncComponent(() => import( "@/views/personnelManagement/contractManagement/filesDia.vue"));
const { proxy } = getCurrentInstance()
const emit = defineEmits(['close'])
const filesDia = ref()
const dialogFormVisible = ref(false);
const operationType = ref('')
const tableColumn = ref([
  {
    label: "合同年限",
    prop: "contractTerm",
  },
  {
    label: "合同开始日期",
    prop: "contractStartTime",
  },
  {
    label: "合同结束日期",
    prop: "contractEndTime",
  },
  {
    dataType: "action",
    label: "操作",
    align: "center",
    fixed: 'right',
    width: 120,
    operation: [
      {
        name: "上传附件",
        type: "text",
        clickFun: (row) => {
          filesDia.value.openDialog( row,'合同')
  import { ref, defineAsyncComponent, getCurrentInstance } from "vue";
  import { findStaffContractListPage } from "@/api/personnelManagement/staffContract.js";
  const FileList = defineAsyncComponent(() =>
    import("@/components/Dialog/FileList.vue")
  );
  const { proxy } = getCurrentInstance();
  const emit = defineEmits(["close"]);
  const fileDialogVisible = ref(false);
  const recordId = ref(0);
  const dialogFormVisible = ref(false);
  const operationType = ref("");
  const tableColumn = ref([
    {
      label: "合同年限",
      prop: "contractTerm",
    },
    {
      label: "合同开始日期",
      prop: "contractStartTime",
    },
    {
      label: "合同结束日期",
      prop: "contractEndTime",
    },
    {
      dataType: "action",
      label: "操作",
      align: "center",
      fixed: "right",
      width: 120,
      operation: [
        {
          name: "附件",
          type: "text",
          clickFun: row => {
            recordId.value = row.id;
            fileDialogVisible.value = true;
          },
        },
      }
    ],
  },
]);
const tableData = ref([]);
const tableLoading = ref(false);
      ],
    },
  ]);
  const tableData = ref([]);
  const tableLoading = ref(false);

// 打开弹框
const openDialog = (type, row) => {
  operationType.value = type;
  dialogFormVisible.value = true;
  if (operationType.value === 'edit') {
    findStaffContractListPage({staffOnJobId: row.id}).then(res => {
      tableData.value = res.data.records
    })
  }
}
  // 打开弹框
  const openDialog = (type, row) => {
    operationType.value = type;
    dialogFormVisible.value = true;
    if (operationType.value === "edit") {
      findStaffContractListPage({ staffOnJobId: row.id }).then(res => {
        tableData.value = res.data.records;
      });
    }
  };

const openUploadFile = (row) => {
  filesDia.value.open = true
  filesDia.value.row = row
}

// 关闭弹框
const closeDia = () => {
  dialogFormVisible.value = false;
  emit('close')
};
defineExpose({
  openDialog,
});
  // 关闭弹框
  const closeDia = () => {
    dialogFormVisible.value = false;
    emit("close");
  };
  defineExpose({
    openDialog,
  });
</script>

<style scoped>

</style>

 src/views/personnelManagement/contractManagement/components/formDia.vue

@@ -1,96 +1,93 @@
<template>
  <div>
    <el-dialog
        v-model="dialogFormVisible"
        title="详情"
        width="70%"
        @close="closeDia"
    >
      <PIMTable
          rowKey="id"
          :column="tableColumn"
          :tableData="tableData"
          :tableLoading="tableLoading"
          height="600"
      ></PIMTable>
    <el-dialog v-model="dialogFormVisible"
               title="详情"
               width="70%"
               @close="closeDia">
      <PIMTable rowKey="id"
                :column="tableColumn"
                :tableData="tableData"
                :tableLoading="tableLoading"
                height="600"></PIMTable>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="closeDia">取消</el-button>
        </div>
      </template>
    </el-dialog>
    <Files ref="filesDia"></Files>
    <FileList v-if="fileDialogVisible"
              v-model:visible="fileDialogVisible"
              :record-type="'staff_contract'"
              :record-id="recordId" />
  </div>
</template>

<script setup>
import {ref} from "vue";
import {findStaffContractListPage} from "@/api/personnelManagement/staffContract.js";
const Files = defineAsyncComponent(() => import( "@/views/personnelManagement/contractManagement/filesDia.vue"));
const { proxy } = getCurrentInstance()
const emit = defineEmits(['close'])
const filesDia = ref()
const dialogFormVisible = ref(false);
const operationType = ref('')
const tableColumn = ref([
  {
    label: "合同年限",
    prop: "contractTerm",
  },
  {
    label: "合同开始日期",
    prop: "contractStartTime",
  },
  {
    label: "合同结束日期",
    prop: "contractEndTime",
  },
  {
    dataType: "action",
    label: "操作",
    align: "center",
    fixed: 'right',
    width: 120,
    operation: [
      {
        name: "上传附件",
        type: "text",
        clickFun: (row) => {
          filesDia.value.openDialog( row,'合同')
  import { ref, defineAsyncComponent, getCurrentInstance } from "vue";
  import { findStaffContractListPage } from "@/api/personnelManagement/staffContract.js";
  const FileList = defineAsyncComponent(() =>
    import("@/components/Dialog/FileList.vue")
  );
  const { proxy } = getCurrentInstance();
  const emit = defineEmits(["close"]);
  const fileDialogVisible = ref(false);
  const recordId = ref(0);
  const dialogFormVisible = ref(false);
  const operationType = ref("");
  const tableColumn = ref([
    {
      label: "合同年限",
      prop: "contractTerm",
    },
    {
      label: "合同开始日期",
      prop: "contractStartTime",
    },
    {
      label: "合同结束日期",
      prop: "contractEndTime",
    },
    {
      dataType: "action",
      label: "操作",
      align: "center",
      fixed: "right",
      width: 120,
      operation: [
        {
          name: "附件",
          type: "text",
          clickFun: row => {
            recordId.value = row.id;
            fileDialogVisible.value = true;
          },
        },
      }
    ],
  },
]);
const tableData = ref([]);
const tableLoading = ref(false);
      ],
    },
  ]);
  const tableData = ref([]);
  const tableLoading = ref(false);

// 打开弹框
const openDialog = (type, row) => {
  operationType.value = type;
  dialogFormVisible.value = true;
  if (operationType.value === 'edit') {
    findStaffContractListPage({staffOnJobId: row.id}).then(res => {
      tableData.value = res.data.records
    })
  }
}
  // 打开弹框
  const openDialog = (type, row) => {
    operationType.value = type;
    dialogFormVisible.value = true;
    if (operationType.value === "edit") {
      findStaffContractListPage({ staffOnJobId: row.id }).then(res => {
        tableData.value = res.data.records;
      });
    }
  };

const openUploadFile = (row) => {
  filesDia.value.open = true
  filesDia.value.row = row
}

// 关闭弹框
const closeDia = () => {
  dialogFormVisible.value = false;
  emit('close')
};
defineExpose({
  openDialog,
});
  // 关闭弹框
  const closeDia = () => {
    dialogFormVisible.value = false;
    emit("close");
  };
  defineExpose({
    openDialog,
  });
</script>

<style scoped>

</style>