From a9357cf20e0079dac30e76abf4d075c712c71186 Mon Sep 17 00:00:00 2001
From: qsh <>
Date: Mon, 15 Jul 2024 15:05:11 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=8A=E4=BC=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Basic/Salary/Comp/CommissionPlan.vue      | 104 ++++++++-
 src/views/Basic/Salary/Comp/DialogPlan.vue    | 221 ++++++++++++++++++
 2 files changed, 323 insertions(+), 2 deletions(-)
 create mode 100644 src/views/Basic/Salary/Comp/DialogPlan.vue

diff --git a/src/views/Basic/Salary/Comp/CommissionPlan.vue b/src/views/Basic/Salary/Comp/CommissionPlan.vue
index a3bd493..d276c44 100644
--- a/src/views/Basic/Salary/Comp/CommissionPlan.vue
+++ b/src/views/Basic/Salary/Comp/CommissionPlan.vue
@@ -1,7 +1,107 @@
 <template>
-  <div> 提成方案 </div>
+  <div>
+    <el-form :model="searchForm" inline>
+      <el-form-item>
+        <el-input v-model="searchForm.name" placeholder="方案名称" />
+      </el-form-item>
+      <el-form-item>
+        <el-select v-model="searchForm.status" placeholder="启用状态" clearable filterable>
+          <el-option label="启用" :value="0" />
+          <el-option label="停用" :value="1" />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="handleQuery">搜索</el-button>
+        <el-button type="primary" plain @click="openForm('create')"> 新增 </el-button>
+      </el-form-item>
+    </el-form>
+    <el-table v-loading="loading" :data="tableList" border stripe>
+      <el-table-column type="index" width="50" />
+      <el-table-column label="方案名称" prop="name" width="240" />
+      <el-table-column label="结算方式" prop="percentageType" width="150" />
+      <el-table-column label="结算规则">
+        <template #default="{ row }">
+          <div v-dompurify-html="row.ruleParam"></div>
+        </template>
+      </el-table-column>
+      <el-table-column label="启用状态" prop="status" width="150">
+        <template #default="scope">
+          <el-switch
+            v-model="scope.row.status"
+            :active-value="0"
+            :inactive-value="1"
+            @change="handleStatusChange(scope.row)"
+          />
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" width="200">
+        <template #default="scope">
+          <el-button type="primary" link @click="openForm('update', scope.row)"> 修改 </el-button>
+          <el-button type="primary" link @click="handleDelete(scope.row.id)"> 删除 </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <Pagination
+      :total="total"
+      v-model:page="searchForm.pageNo"
+      v-model:limit="searchForm.pageSize"
+      @pagination="getList"
+    />
+
+    <DialogPlan ref="planDialogRef" @success="getList" />
+  </div>
 </template>
 
-<script name="CommissionPlan" setup></script>
+<script name="CommissionPlan" setup>
+import DialogPlan from './DialogPlan.vue'
+const searchForm = ref({
+  name: undefined,
+  status: undefined,
+  pageNo: 1,
+  pageSize: 20
+})
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  searchForm.value.pageNo = 1
+  getList()
+}
+
+const loading = ref(false)
+const tableList = ref([])
+const total = ref(0)
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    tableList.value = [{ status: 0 }]
+    // const data = await UserApi.getUserPage(queryParams)
+    // tableList.value = data.list
+    // total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+
+const planDialogRef = ref()
+function openForm(type, row = undefined) {
+  planDialogRef.value.open(type, row)
+}
+
+const handleStatusChange = async (row) => {
+  try {
+    // 修改状态的二次确认
+    const text = row.status === 0 ? '启用' : '停用'
+    await message.confirm('确认要"' + text + '""' + row.name + '"方案吗?')
+    // 发起修改状态
+    // await UserApi.updateUserStatus(row.id, row.status)
+    // 刷新列表
+    await getList()
+  } catch {
+    // 取消后，进行恢复按钮
+    row.status = row.status === 0 ? 1 : 0
+  }
+}
+</script>
 
 <style lang="scss" scoped></style>
diff --git a/src/views/Basic/Salary/Comp/DialogPlan.vue b/src/views/Basic/Salary/Comp/DialogPlan.vue
new file mode 100644
index 0000000..3ebed9c
--- /dev/null
+++ b/src/views/Basic/Salary/Comp/DialogPlan.vue
@@ -0,0 +1,221 @@
+<template>
+  <Dialog v-model="dialogVisible" :title="dialogTitle" style="width: 1000px">
+    <el-form
+      :model="comissionForm"
+      ref="formRef"
+      :rules="rules"
+      class="mt-10px"
+      label-width="80px"
+      inline
+    >
+      <el-row :gutter="20">
+        <el-col :span="12" :offset="0">
+          <el-form-item label="方案名称" prop="name">
+            <el-input v-model="comissionForm.name" placeholder="请输入方案名称" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" :offset="0">
+          <el-form-item label="结算方式">
+            <el-radio-group v-model="comissionForm.percentageType">
+              <el-radio :label="1">
+                <Tooltip message="可配置多级，命中某档位后，按照档位分级结算" />阶梯结算
+              </el-radio>
+              <el-radio :label="2">
+                <Tooltip message="可配置多级，命中某档位后所有金额全部按照该档位结算" />常规结算
+              </el-radio>
+            </el-radio-group>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-button type="primary" class="mb-10px" plain @click="handleAddRules"
+        >添加提成档位</el-button
+      >
+      <el-row :gutter="20" class="mb-10px">
+        <el-col
+          :span="24"
+          :offset="0"
+          class="flex"
+          v-for="(item, index) in comissionForm.rules"
+          :key="index"
+        >
+          <el-select v-model="item.ruleParam1" style="width: 100px">
+            <el-option
+              v-for="it in opts.percentage_param1"
+              :key="Number(it.value)"
+              :label="it.label"
+              :value="Number(it.value)"
+            />
+          </el-select>
+          <el-select class="ml-5px" v-model="item.ruleParam2" style="width: 100px">
+            <el-option
+              v-for="it in opts.percentage_param2"
+              :key="Number(it.value)"
+              :label="it.label"
+              :value="Number(it.value)"
+            />
+          </el-select>
+          <span class="ml-5px">满</span>
+          <el-input
+            class="ml-5px"
+            v-model="item.ruleParam3"
+            placeholder="金额"
+            type="number"
+            :min="0"
+            style="width: 100px"
+          />
+          <span class="ml-5px">元，</span>
+          <el-select class="ml-5px" v-model="item.ruleParam4" style="width: 120px">
+            <el-option
+              v-for="it in opts.percentage_param4"
+              :key="Number(it.value)"
+              :label="it.label"
+              :value="Number(it.value)"
+            />
+          </el-select>
+          <div v-if="item.ruleParam4 == 2" class="inline-flex items-center">
+            <el-input
+              class="ml-5px"
+              v-model="item.ruleParam7"
+              placeholder="金额"
+              type="number"
+              :min="0"
+              style="width: 100px"
+            />
+            <span class="ml-5px">元结算</span>
+          </div>
+          <div v-else class="inline-flex items-center">
+            <span class="ml-5px">取</span>
+            <el-select class="ml-5px" v-model="item.ruleParam5" style="width: 100px">
+              <el-option
+                v-for="it in opts.percentage_param5"
+                :key="Number(it.value)"
+                :label="it.label"
+                :value="Number(it.value)"
+              />
+            </el-select>
+            <span class="ml-5px">结算</span>
+            <el-input
+              class="ml-5px"
+              v-model="item.ruleParam6"
+              placeholder="比例"
+              type="number"
+              :min="1"
+              style="width: 100px"
+            >
+              <template #suffix> % </template>
+            </el-input>
+          </div>
+        </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 comissionForm = ref({})
+const rules = {
+  name: { required: true, message: '方案名称不可为空', trigger: 'blur' }
+}
+const opts = ref({
+  percentage_param1: [],
+  percentage_param2: [],
+  percentage_param4: [],
+  percentage_param5: []
+})
+
+const formType = ref('create')
+/** 打开弹窗 */
+const open = async (type, row) => {
+  dialogVisible.value = true
+  dialogTitle.value = type == 'create' ? `新增方案` : '修改方案'
+  formType.value = type
+  resetForm()
+
+  if (!opts.value.length) {
+    // const arr = await ClassApi.getCommissionParams()
+    // arr.map((item) => {
+    //   opts.value[item.dictType].push(item)
+    // })
+  }
+
+  if (row?.id) {
+    formLoading.value = true
+    try {
+      // comissionForm.value = await UserApi.getUser(id)
+    } finally {
+      formLoading.value = false
+    }
+  }
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 重置表单 */
+const resetForm = () => {
+  comissionForm.value = {
+    name: undefined,
+    percentageType: 1,
+    rules: [
+      {
+        ruleParam1: 1,
+        ruleParam2: 1,
+        ruleParam3: 0,
+        ruleParam4: 1,
+        ruleParam5: 1,
+        ruleParam6: 10
+      }
+    ]
+  }
+  formRef.value?.resetFields()
+}
+
+function handleAddRules() {
+  comissionForm.value.rules.push({
+    ruleParam1: 1,
+    ruleParam2: 1,
+    ruleParam3: 0,
+    ruleParam4: 1,
+    ruleParam5: 1,
+    ruleParam6: 1
+  })
+}
+
+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 {
+    if (formType.value === 'create') {
+      // await ClassApi.createClassType(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      // await ClassApi.updateClassType(data)
+      message.success(t('common.updateSuccess'))
+    }
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+</script>
+
+<style lang="scss" scoped></style>