From 49cb46e0c203ec08939f67759ba2d2c45cb25788 Mon Sep 17 00:00:00 2001
From: lion <120344285@qq.com>
Date: Wed, 21 May 2025 16:03:42 +0800
Subject: [PATCH] =?UTF-8?q?=E7=9B=B8=E5=85=B3=E6=B5=81=E7=A8=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/yearHoliday.js                        |  35 +++
 src/utils/formBuilder.js                      | 223 ++++++++++-----
 .../attendance/components/addYearHoliday.vue  | 119 ++++++++
 src/views/attendance/yearHoliday.vue          | 266 ++++++++++++++++++
 4 files changed, 566 insertions(+), 77 deletions(-)
 create mode 100644 src/api/yearHoliday.js
 create mode 100644 src/views/attendance/components/addYearHoliday.vue
 create mode 100644 src/views/attendance/yearHoliday.vue

diff --git a/src/api/yearHoliday.js b/src/api/yearHoliday.js
new file mode 100644
index 0000000..29544f7
--- /dev/null
+++ b/src/api/yearHoliday.js
@@ -0,0 +1,35 @@
+import request from '@/utils/request';
+
+export function index (params) {
+  return request({
+    url: "/api/oa/year-holiday-plan/index",
+    method: "get",
+    params
+  })
+}
+
+export function save (data) {
+  return request({
+    url: "/api/oa/year-holiday-plan/save",
+    method: "post",
+    data
+  })
+}
+
+export function show (params) {
+  return request({
+    url: "/api/oa/year-holiday-plan/show",
+    method: "get",
+    params
+  })
+}
+
+export function destroy (params) {
+  return request({
+    url: "/api/oa/year-holiday-plan/destroy",
+    method: "get",
+    params
+  })
+}
+
+
diff --git a/src/utils/formBuilder.js b/src/utils/formBuilder.js
index a0afc8f..e449020 100644
--- a/src/utils/formBuilder.js
+++ b/src/utils/formBuilder.js
@@ -454,93 +454,162 @@ export default function formBuilder(
               this.$set(this.flows, info.name, res.data.data);
             });
           }
-          formItem = h(
-            "el-select",
-            {
-              ref: `relation-flow-${info.name}`,
-              props: {
-                value: target[info.name]
-                  ? target[info.name]
-                      .toString()
-                      ?.split(",")
-                      .map((i) => Number(i))
-                  : [],
-                clearable: true,
-                placeholder: info.help_text || '输入标题或编号搜索流程..',
-                multiple: true,
-                filterable: true,
-                "reserve-keyword": true,
-                "filter-method": debounce((query) => {
-                  this.tempFlowList = this.flows[info.name].filter(flow => new RegExp(query, 'i').test(flow.title + flow.no))
-                  console.log(query)
-                  if (this.tempFlowList.length === 0) {
-                    Message.warning("未搜索到匹配流程")
-                  }
-                }, 500).bind(this)
-              },
-              attrs: {
-                placeholder: info.help_text,
-              },
+          formItem = h("div", {
               style: {
-                width: "100%",
-              },
-              on: {
-                input: (e) => {
-                  this.$set(target, info.name, e.toString());
-                  this.tempFlowList.length = 0;
-                },
-              },
-            },
-            (this.tempFlowList.length > 0 ? this.tempFlowList : this.flows[info.name])?.map((option) =>
-              h("el-option", {
+                // display: "flex",
+                // gap: "10px",
+                // alignItems: "flex-start"
+              }
+            }, [
+              // 原有的 el-select
+              h("el-select", {
+                ref: `relation-flow-${info.name}`,
                 props: {
-                  label: option.title,
-                  value: option.id,
+                  value: target[info.name] ? target[info.name].toString()?.split(",").map(Number) : [],
+                  clearable: true,
+                  placeholder: info.help_text || '输入标题或编号搜索流程..',
+                  multiple: true,
+                  filterable: true,
+                  "reserve-keyword": true,
+                  "filter-method": debounce((query) => {
+                    this.tempFlowList = this.handleFlowFilter(query, this.flows[info.name]);
+                  }, 500)
+                },
+                style: {
+                  width: "100%",
+                },
+                on: {
+                  input: (e) => {
+                    this.$set(target, info.name, e.toString());
+                    this.tempFlowList = [];
+                    console.log("target",target[info.name] ? target[info.name].toString()?.split(",").map(Number) : [])
+                  },
                 },
-              }, [
-                h("div", {
+              }, (this.tempFlowList.length > 0 ? this.tempFlowList : this.flows[info.name])?.map((option) =>
+                h("el-option", {
+                  props: {
+                    label: option.title,
+                    value: option.id,
+                  },
+                }, [
+                  h("div", {}, [
+                    h("span", {}, option.title),
+                    h("el-button", {
+                      style: {
+                        float: 'right'
+                      },
+                      props: {
+                        type: 'primary',
+                        size: 'mini',
+                        icon: 'el-icon-search'
+                      },
+                      on: {
+                        click: (e) => {
+                           e.stopPropagation()
+                          let target = this.$router.resolve({
+                            path: "/flow/detail",
+                            query: {
+                              module_id: option.custom_model_id,
+                              flow_id: option.id,
+                              isSinglePage: 1,
+                            },
+                          })
+                          this.modalRender = (h) =>
+                            h("iframe", {
+                              attrs: {
+                                src: target.href,
+                              },
+                              style: {
+                                border: "none",
+                                width: "100%",
+                                height: "100%",
+                              },
+                            });
+                          this.isShowModal = true;
+                          this.$refs[`relation-flow-${info.name}`]?.blur()
+                        }
+                      }
+                    }, '查看')
+                  ])
+                ])
+              )),
+
+              // 新增的已选项显示区域
+              h("div", {
+                style: {
+                  flex: "1",
+                  display: "flex",
+                  flexWrap: "wrap",
+                  gap: "6px"
+                }
+              }, target[info.name] ? target[info.name].toString().split(",").map(id => {
+                const selectedFlow = this.flows[info.name].find(flow => flow.id === Number(id));
+                if (!selectedFlow) return null;
+
+                return h("div", {
+                  style: {
+                    padding: "4px 8px",
+                    background: "#f0f2f5",
+                    borderRadius: "4px",
+                    cursor: "pointer",
+                    display: "flex",
+                    alignItems: "center",
+                    gap: "4px",
+                    height:'35px',
+                    margin:"5px 0"
+                  },
+                  on: {
+                    click: () => {
+                      console.log("selectedFlow",selectedFlow)
+                      let target = this.$router.resolve({
+                        path: "/flow/detail",
+                        query: {
+                          module_id: selectedFlow.custom_model_id,
+                          flow_id: selectedFlow.id,
+                          isSinglePage: 1,
+                        },
+                      })
+                      this.modalRender = (h) =>
+                        h("iframe", {
+                          attrs: {
+                            src: target.href,
+                          },
+                          style: {
+                            border: "none",
+                            width: "100%",
+                            height: "100%",
+                          },
+                        });
+                      this.isShowModal = true;
+                      this.$refs[`relation-flow-${info.name}`]?.blur()
+                    }
+                  }
                 }, [
-                  h("span", {},option.title),
-                  h("el-button", {
+                  h("span", {
                     style: {
-                      float: 'right'
+                      color:'blue'
                     },
-                    props: {
-                      type: 'primary',
-                      size: 'mini',
-                      icon: 'el-icon-search'
+                  }, selectedFlow.title),
+                  h("i", {
+                    class: "el-icon-close",
+                    style: {
+                      fontSize: "12px",
+                      cursor: "pointer",
+                      marginLeft: "4px"
                     },
                     on: {
-                      click: e => {
-                        e.stopPropagation()
-                        let target = this.$router.resolve({
-                          path: "/flow/detail",
-                          query: {
-                            module_id: option.custom_model_id,
-                            flow_id: option.id,
-                            isSinglePage: 1,
-                          },
-                        });
-                        this.modalRender = (h) =>
-                          h("iframe", {
-                            attrs: {
-                              src: target.href,
-                            },
-                            style: {
-                              border: "none",
-                              width: "100%",
-                              height: "100%",
-                            },
-                          });
-                        this.isShowModal = true;
-                        this.$refs[`relation-flow-${info.name}`]?.blur()
+                      click: (e) => {
+                        e.stopPropagation();
+                        const currentValue = target[info.name] ? target[info.name].toString().split(",").map(Number) : [];
+                        const newValue = currentValue.filter(v => v !== Number(id));
+                        this.$set(target, info.name, newValue.toString());
+                        console.log("newValue",newValue,target[info.name] ? target[info.name].toString()?.split(",").map(Number) : [])
                       }
                     }
-                  }, '查看')
-                ])
-              ])
-            )
-          );
+                  })
+                ]);
+              }) : [])
+            ]);
           break;
         case "relation":
           formItem = h(
diff --git a/src/views/attendance/components/addYearHoliday.vue b/src/views/attendance/components/addYearHoliday.vue
new file mode 100644
index 0000000..24d4ff0
--- /dev/null
+++ b/src/views/attendance/components/addYearHoliday.vue
@@ -0,0 +1,119 @@
+<template>
+  <div>
+    <vxe-modal
+      :value="isShow"
+      show-footer
+      title="年休假"
+      show-confirm-button
+      :width="defaultModalSize.width"
+      :height="defaultModalSize.height"
+      esc-closable
+      transfer
+      show-zoom
+      resize
+      @input="e => $emit('update:isShow',e)"
+    >
+      <el-form ref="elForm" :model="form" :rules="rules" label-position="top" label-width="100">
+        <el-form-item label="年份" prop="year" required>
+            <el-date-picker style="width: 100%;" type="year" v-model="form.year" size="small" value-format="yyyy" />
+        </el-form-item>
+
+        <el-form-item label="工作年限" prop="work_year" required>
+          <el-input v-model="form.work_year" type="number"/>
+        </el-form-item>
+        <el-form-item label="应休假天数" prop="should_holiday_days" required>
+          <el-input v-model="form.should_holiday_days" type="number"/>
+        </el-form-item>
+        <el-form-item label="计划安排开始时间" prop="plan_start_time" required>
+          <el-date-picker style="width: 100%;" type="date" v-model="form.plan_start_time" size="small" value-format="yyyy-MM-dd" />
+        </el-form-item>
+        <el-form-item label="计划安排结束时间" prop="plan_end_time" required>
+          <el-date-picker style="width: 100%;" type="date" v-model="form.plan_end_time" size="small" value-format="yyyy-MM-dd" />
+        </el-form-item>
+      </el-form>
+
+      <template #footer>
+        <el-button type="primary" :loading="loading" @click="submit">确认</el-button>
+      </template>
+    </vxe-modal>
+  </div>
+</template>
+
+<script>
+import { getToken } from '@/utils/auth'
+import { save } from '@/api/yearHoliday'
+import {defaultModalSize} from "@/settings";
+export default {
+  props: {
+    departments: {
+      type: Array,
+      default: () => []
+    },
+    isShow: {
+      type: Boolean,
+      default: false,
+      required: true
+    }
+  },
+  data() {
+    return {
+      defaultModalSize,
+      action: process.env.VUE_APP_UPLOAD_API,
+      fileList: [],
+      loading: false,
+      form: {
+        year: '',
+        work_year: '',
+        should_holiday_days: '',
+        plan_start_time: '',
+        plan_end_time: '',
+      },
+      rules: {
+        year: [
+          { required: true, message: '请输入年份' }
+        ],
+        work_year: [
+          { required: true, message: '请输入工作年限' }
+        ],
+        should_holiday_days: [
+          { required: true, message: '请输入应休假天数' }
+        ],
+        plan_start_time: [
+          { required: true, message: '请输入计划安排开始时间' }
+        ],
+        plan_end_time: [
+          { required: true, message: '请输入计划安排结束时间' }
+        ]
+      }
+    }
+  },
+  computed: {},
+  methods: {
+    submit() {
+      this.$refs['elForm'].validate(async valid => {
+        if (valid) {
+          this.loading = true
+          try {
+            await save(this.form)
+            this.$message.success('新增成功')
+            this.$emit('refresh')
+            this.$emit('update:isShow', false)
+            this.loading = false
+            this.$refs['elForm'].resetFields()
+          } catch (err) {
+            this.loading = false
+          }
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+::v-deep .el-form {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-gap: 10px 20px;
+}
+</style>
diff --git a/src/views/attendance/yearHoliday.vue b/src/views/attendance/yearHoliday.vue
new file mode 100644
index 0000000..20abedc
--- /dev/null
+++ b/src/views/attendance/yearHoliday.vue
@@ -0,0 +1,266 @@
+<template>
+  <div>
+    <card-container>
+      <vxe-toolbar>
+        <template #buttons>
+          <el-date-picker v-model="select.year"
+            type="year" size="small" value-format="yyyy"
+            placeholder="年份" format="yyyy">
+          </el-date-picker>
+          <el-select style="width:250px;margin-left:6px"  size="small" v-model="select.department_id" placeholder="请选择">
+            <el-option v-for="item in departments" :key="item.id" :label="item.name" :value="item.id">
+            </el-option>
+          </el-select>
+          <el-button icon="el-icon-search" type="primary" plain size="small" style="margin-left: 6px;"
+            @click="getList">搜索</el-button>
+          <el-button icon="el-icon-plus" type="primary" size="small" @click="isShowAdd = true">新增</el-button>
+        </template>
+      </vxe-toolbar>
+      <vxe-table
+        ref="table"
+        stripe
+        style="margin-top: 10px;"
+        :loading="loading"
+        keep-source
+        show-overflow
+        :column-config="{ resizable: true }"
+        :edit-rules="validRules"
+        :edit-config="{ trigger: 'manual', mode: 'row', showStatus: true, isHover: true, autoClear: false }"
+        :align="allAlign"
+        :data="tableData"
+      >
+        <vxe-column type="seq" width="58" align="center" />
+        <vxe-column field="year" width="170" title="年份" :edit-render="{}">
+          <template #edit="{ row }">
+            <el-date-picker style="width: 100%;" type="year" v-model="row.year" size="small" value-format="yyyy" />
+          </template>
+        </vxe-column>
+
+        <vxe-column field="work_year" title="工作年限" width="120" :edit-render="{name: 'input', attrs: { type: 'number' }}" />
+
+        <vxe-column field="should_holiday_days" width="140" title="应休假天数" :edit-render="{ name: 'input', attrs: { type: 'number' } }" />
+       <vxe-column field="plan_start_time" width="170" title="计划安排开始时间" :edit-render="{}">
+         <template #edit="{ row }">
+           <el-date-picker style="width: 100%;" type="date" v-model="row.plan_start_time" size="small" value-format="yyyy-MM-dd" />
+         </template>
+       </vxe-column>
+        <vxe-column field="plan_end_time" width="170" title="计划安排结束时间" :edit-render="{}">
+          <template #edit="{ row }">
+            <el-date-picker style="width: 100%;" type="date" v-model="row.plan_end_time" size="small" value-format="yyyy-MM-dd" />
+          </template>
+        </vxe-column>
+
+        <vxe-column field="admin.name" width="170" title="创建人" :edit-render="{}">
+        </vxe-column>
+
+        <vxe-column field="operate" title="操作" min-width="220" fixed="right">
+          <template #default="{ row }">
+            <template v-if="isActiveStatus(row)">
+              <el-button size="small" type="primary" @click="saveRowEvent(row)">保存</el-button>
+              <el-button size="small" type="primary" plain @click="cancelRowEvent(row)">取消</el-button>
+            </template>
+            <template v-else>
+              <el-button size="small" type="warning" @click="editRowEvent(row)">编辑</el-button>
+              <el-button size="small" type="danger" @click="destroyRowEvent(row)">删除</el-button>
+            </template>
+          </template>
+        </vxe-column>
+      </vxe-table>
+
+      <el-pagination
+        style="margin-top: 10px;"
+        :current-page.sync="select.page"
+        :page-sizes="[20, 30, 40, 50]"
+        :page-size.sync="select.page_size"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="total"
+        @size-change="e => {
+          select.page_size = e;
+          select.page = 1;
+          getList();
+        }"
+        @current-change="e => {
+          select.page = e;
+          getList();
+        }"
+      />
+    </card-container>
+    <addYearHoliday ref="addYearHoliday" :is-show.sync="isShowAdd" @refresh="getList" />
+  </div>
+</template>
+
+<script>
+import { index as departmentIndex } from '@/api/department'
+import { deepCopy } from '@/utils'
+import { index, save, destroy } from '@/api/yearHoliday'
+import addYearHoliday from './components/addYearHoliday.vue'
+import axios from "axios";
+import {getToken} from "@/utils/auth";
+export default {
+  components: {
+    addYearHoliday
+  },
+  data() {
+    return {
+      departments: [],
+      isShowAdd: false,
+
+      loading: false,
+      select: {
+        page: 1,
+        page_size: 20,
+        year:new Date().getFullYear()+'',
+        department_id:''
+      },
+      total: 0,
+      allAlign: null,
+      tableData: [],
+      validRules: {
+        year: [
+          { required: true, message: '请输入年份' }
+        ],
+        work_year: [
+          { required: true, message: '请输入工作年限' }
+        ],
+        should_holiday_days: [
+          { required: true, message: '请输入应休假天数' }
+        ],
+        plan_start_time: [
+          { required: true, message: '请输入计划安排开始时间' }
+        ],
+        plan_end_time: [
+          { required: true, message: '请输入计划安排结束时间' }
+        ]
+      },
+      form: {
+        id: '',
+        year: '',
+        work_year: '',
+        should_holiday_days: '',
+        plan_start_time: '',
+        plan_end_time: '',
+      }
+    }
+  },
+  computed: {
+    isActiveStatus() {
+      return function(row) {
+        if (this.$refs['table']) {
+          return this.$refs['table'].isEditByRow(row)
+        }
+      }
+    }
+  },
+  created() {
+    this.getDepartments()
+    this.getList()
+  },
+  methods: {
+
+    editRowEvent(row) {
+      if (this.$refs['table']) {
+        this.$refs['table'].setEditRow(row)
+      }
+    },
+    cancelRowEvent(row) {
+      if (this.$refs['table']) {
+        this.$refs['table'].clearEdit().then(() => {
+          // 还原行数据
+          this.$refs['table'].revertData(row)
+        })
+      }
+    },
+
+    async getDepartments() {
+      try {
+        this.departments = await departmentIndex({
+          page: 1,
+          page_size: 9999
+        })
+        this.departments.unshift({
+          id:'',
+          name:'全部'
+        })
+      } catch (err) {
+        console.error(err)
+      }
+    },
+    async getList() {
+      this.loading = true
+      try {
+        const res = await index({
+          page:this.select.page,
+          page_size:this.select.page_size,
+          'filter[0][key]':'year',
+          'filter[0][op]':'eq',
+          'filter[0][value]':this.select.year?this.select.year:'',
+          'filter[1][key]':'department_id',
+          'filter[1][op]':'eq',
+          'filter[1][value]':this.select.department_id?this.select.department_id:'',
+        })
+        this.tableData = res.data
+        this.total = res.total
+        this.loading = false
+      } catch (err) {
+        console.error(err)
+        this.loading = false
+      }
+    },
+
+    async saveRowEvent(row) {
+      try {
+        await this.$confirm('确认保存？', '提示', {
+          confirmButtonText: '确认',
+          cancelButtonText: '取消'
+        })
+        await this.$refs['table'].clearEdit()
+        const form = deepCopy(this.form)
+        for (const key in form) {
+          form[key] = row[key]
+        }
+        if (!form.password) {
+          delete form.password
+        }
+        this.loading = true
+        await save(form)
+        await this.getList()
+        this.loading = false
+      } catch (err) {
+        this.loading = false
+      }
+    },
+    async destroyRowEvent(row) {
+      try {
+        await this.$confirm('确认删除？', '提示', {
+          confirmButtonText: '确认',
+          cancelButtonText: '取消'
+        })
+        this.loading = true
+        if (row.id) {
+          await destroy({
+            id: row.id
+          })
+          await this.getList()
+        } else {
+          console.log(row)
+          this.tableData.splice(this.tableData.findIndex(i => i._X_ROW_KEY === row._X_ROW_KEY), 1)
+        }
+        this.loading = false
+      } catch (err) {
+        this.loading = false
+      }
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.total {
+  color: #666;
+  text-align: right;
+  line-height: 3;
+}
+::v-deep .el-tag + .el-tag {
+  margin-left: 4px;
+}
+</style>