上传

src/views/Finance/Salary/Comp/DialogSalary.vue

@@ -0,0 +1,170 @@
+<template>
+  <Dialog v-model="dialogVisible" :title="dialogTitle" style="width: 600px">
+    <el-form :model="formData" ref="formRef" :rules="rules" label-width="80px">
+      <el-form-item label="生效日期" prop="validTime">
+        <el-date-picker
+          v-model="formData.validTime"
+          type="date"
+          format="YYYY-MM-DD"
+          value-format="YYYY-MM-DD"
+          placeholder="选择日期时间"
+        />
+      </el-form-item>
+      <el-divider direction="horizontal" content-position="left">应发</el-divider>
+      <el-row :gutter="20">
+        <el-col :span="12" :offset="0">
+          <el-form-item label="底薪" prop="dixin">
+            <el-input-number v-model="formData.dixin" :min="0" :controls="false" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" :offset="0">
+          <el-form-item label="奖金" prop="jiangjin">
+            <el-input-number v-model="formData.jiangjin" :min="0" :controls="false" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12" :offset="0">
+          <el-form-item label="提成方案" prop="tichengfangan">
+            <el-select v-model="formData.tichengfangan" placeholder="请选择" filterable>
+              <el-option
+                v-for="item in tichengfanganOptions"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" :offset="0">
+          <el-form-item label="其他应发" prop="qitayingfa">
+            <el-input-number v-model="formData.qitayingfa" :min="0" :controls="false" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-divider direction="horizontal" content-position="left">应扣</el-divider>
+      <el-row :gutter="20">
+        <el-col :span="12" :offset="0">
+          <el-form-item label="绩效" prop="jixiao">
+            <el-input placeholder="生成后录入" disabled />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" :offset="0">
+          <el-form-item label="考勤" prop="kaoqin">
+            <el-input placeholder="自动计算" disabled />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12" :offset="0">
+          <el-form-item label="社保" prop="shebao">
+            <el-input-number v-model="formData.shebao" :min="0" :controls="false" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" :offset="0">
+          <el-form-item label="公积金" prop="gongjijin">
+            <el-input-number v-model="formData.gongjijin" :min="0" :controls="false" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12" :offset="0">
+          <el-form-item label="税额" prop="shuie">
+            <el-input placeholder="自动计算" disabled />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" :offset="0">
+          <el-form-item label="其他应扣" prop="qitayingkou">
+            <el-input-number v-model="formData.qitayingkou" :min="0" :controls="false" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+
+    <template #footer>
+      <span>
+        <el-button @click="dialogVisible = false">取消</el-button>
+        <el-button :disabled="formLoading" type="primary" @click="submitForm">保存</el-button>
+      </span>
+    </template>
+  </Dialog>
+</template>
+
+<script setup name="DialogSalarySetting">
+// const message = useMessage() // 消息弹窗
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const dialogTitle = ref('工资条设置')
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+
+const formData = ref({})
+
+const rules = {
+  dixin: { required: true, message: '底薪不可为空', trigger: 'blur' }
+}
+
+/** 打开弹窗 */
+const open = async (row) => {
+  dialogVisible.value = true
+  dialogTitle.value = `工资条设置-【${row.nickname}】`
+  resetForm()
+  getOptions()
+  formLoading.value = true
+  try {
+    // formData.value = await UserApi.getUser(id)
+  } finally {
+    formLoading.value = false
+  }
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+const tichengfanganOptions = ref([])
+function getOptions() {
+  tichengfanganOptions.value = []
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    dixin: 0,
+    tichengfangan: undefined,
+    jiangjin: 0,
+    qitayingfa: 0,
+    jixiao: 0,
+    kaoqin: 0,
+    shebao: 0,
+    gongjijin: 0,
+    shuie: 0,
+    qitayingkou: 0
+  }
+  formRef.value?.resetFields()
+}
+
+const emit = defineEmits(['success'])
+const formRef = ref()
+const submitForm = async () => {
+  // 校验表单
+  if (!formRef.value) return
+  const valid = await formRef.value.validate()
+  if (!valid) return
+  // 提交请求
+  formLoading.value = true
+  try {
+    // const data = formData.value as unknown as UserApi.UserVO
+    // if (formType.value === 'create') {
+    //   await UserApi.createUser(data)
+    //   message.success(t('common.createSuccess'))
+    // } else {
+    //   await UserApi.updateUser(data)
+    // }
+    message.success('配置成功')
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+</script>
+
+<style lang="scss" scoped></style>