湟水峡 1.成品入库添加编辑功能

gaoluyang

5 天以前 a0a35be4065d75b80ba4a9a51da7031e03166766

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

@@ -6,16 +6,57 @@
        width="70%"
        @close="closeDia"
    >
      <PIMTable
          rowKey="id"
          :column="tableColumn"
          :tableData="tableData"
          :tableLoading="tableLoading"
          height="600"
      ></PIMTable>
      <!-- 按照入职新增弹窗字段展示基础信息和合同信息 -->
      <el-descriptions class="detail-descriptions" :column="2" border size="small">
        <el-descriptions-item label="员工编号">
          {{ formData.staffNo || '-' }}
        </el-descriptions-item>
        <el-descriptions-item label="姓名">
          {{ formData.staffName || '-' }}
        </el-descriptions-item>
        <el-descriptions-item label="性别">
          {{ formData.sex || '-' }}
        </el-descriptions-item>
        <el-descriptions-item label="年龄">
          {{ formData.age || '-' }}
        </el-descriptions-item>
        <el-descriptions-item label="户籍住址" :span="2">
          {{ formData.nativePlace || '-' }}
        </el-descriptions-item>
        <el-descriptions-item label="现住址" :span="2">
          {{ formData.adress || '-' }}
        </el-descriptions-item>
        <el-descriptions-item label="岗位">
          {{ formData.postJob || '-' }}
        </el-descriptions-item>
        <el-descriptions-item label="第一学历">
          {{ formData.firstStudy || '-' }}
        </el-descriptions-item>
        <el-descriptions-item label="专业">
          {{ formData.profession || '-' }}
        </el-descriptions-item>
        <el-descriptions-item label="联系电话">
          {{ formData.phone || '-' }}
        </el-descriptions-item>
        <el-descriptions-item label="紧急联系人">
          {{ formData.emergencyContact || '-' }}
        </el-descriptions-item>
        <el-descriptions-item label="紧急联系人电话">
          {{ formData.emergencyContactPhone || '-' }}
        </el-descriptions-item>
        <el-descriptions-item label="合同开始日期">
          {{ formData.contractStartTime || '-' }}
        </el-descriptions-item>
        <el-descriptions-item label="合同结束日期">
          {{ formData.contractExpireTime || '-' }}
        </el-descriptions-item>
        <el-descriptions-item label="合同年限">
          {{ formattedContractTerm }}
        </el-descriptions-item>
      </el-descriptions>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="closeDia">取消</el-button>
          <el-button @click="closeDia">关闭</el-button>
        </div>
      </template>
    </el-dialog>
@@ -23,38 +64,82 @@
</template>

<script setup>
import {ref} from "vue";
import {staffOnJobInfo} from "@/api/personnelManagement/employeeRecord.js";
const { proxy } = getCurrentInstance()
import {ref, reactive, computed} from "vue";
import dayjs from "dayjs";
const emit = defineEmits(['close'])

const dialogFormVisible = ref(false);
const operationType = ref('')
const tableColumn = ref([
  // {
  //   label: "合同年限",
  //   prop: "contractTerm",
  // },
  {
    label: "合同开始日期",
    prop: "contractStartTime",
  },
  {
    label: "合同结束日期",
    prop: "contractEndTime",
  },
]);
const tableData = ref([]);
const tableLoading = ref(false);
const formData = reactive({
  staffNo: "",
  staffName: "",
  sex: "",
  identityCard: "",
  nativePlace: "",
  postJob: "",
  adress: "",
  firstStudy: "",
  profession: "",
  age: 0,
  phone: "",
  emergencyContact: "",
  emergencyContactPhone: "",
  dateSelect: "",
  trialStartDate: "",
  trialEndDate: "",
  proSalary: null,
  signDate: "",
  salarySelect: "",
  contractStartTime: "",
  contractExpireTime: "",
  contractTerm: null,
  remark: "",
});

const formattedContractTerm = computed(() => {
  const value = formData.contractTerm;
  if (value === null || value === undefined || value === "") {
    return "-";
  }
  const numberValue = Number(value);
  if (!isNaN(numberValue)) {
    return `${numberValue}年`;
  }
  return value;
});

const calculatedContractStart = computed(() => {
  const endDate = formData.contractExpireTime;
  const termValue = formData.contractTerm;
  const numberValue = Number(termValue);
  if (!endDate || isNaN(numberValue)) {
    return formData.contractStartTime || "-";
  }
  const start = dayjs(endDate).subtract(numberValue, "year");
  if (!start.isValid()) {
    return formData.contractStartTime || "-";
  }
  return start.format("YYYY-MM-DD");
});

// 打开弹框
const openDialog = (type, row) => {
  operationType.value = type;
  dialogFormVisible.value = true;
  if (operationType.value === 'edit') {
    staffOnJobInfo({staffNo: row.staffNo}).then(res => {
      tableData.value = res.data
    })
  // 重置表单数据
  Object.keys(formData).forEach(key => {
    if (key === 'age') {
      formData[key] = 0;
    } else if (["proSalary", "contractTerm"].includes(key)) {
      formData[key] = null;
    } else {
      formData[key] = "";
    }
  });
  
  if (operationType.value === 'edit' && row) {
    // 直接使用 row 数据赋值
    Object.assign(formData, row);
  }
}

@@ -69,5 +154,25 @@
</script>

<style scoped>
.detail-descriptions {
  margin-bottom: 16px;
  border-radius: 6px;
  overflow: hidden;
}

.detail-descriptions :deep(.el-descriptions__cell) {
  padding: 12px 16px !important;
}

.detail-descriptions :deep(.el-descriptions__label) {
  width: 140px;
  color: #606266;
  background-color: #f7f9fc;
  font-weight: 500;
}

.detail-descriptions :deep(.el-descriptions__content) {
  color: #303133;
  line-height: 20px;
}
</style>