From 19c6d245b9a6f3739c367b27bba60bb0fd787ca8 Mon Sep 17 00:00:00 2001
From: cool <653314653@qq.com>
Date: Fri, 22 Mar 2024 11:03:35 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BA=BA=E5=91=98=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ah-jjzhgd-web/src/api/basic/project.js        |   2 +-
 ah-jjzhgd-web/src/api/car-man/staff.js        |  84 +++
 ah-jjzhgd-web/src/api/car-man/team.js         |   2 +-
 .../staff/components/AccessTypeSelect.vue     |  55 ++
 .../staff/components/ProfessionSelect.vue     |  55 ++
 .../man-car/staff/components/TeamSelect.vue   |  55 ++
 .../src/views/man-car/staff/index.vue         | 505 ++++++++++++++++++
 7 files changed, 756 insertions(+), 2 deletions(-)
 create mode 100644 ah-jjzhgd-web/src/api/car-man/staff.js
 create mode 100644 ah-jjzhgd-web/src/views/man-car/staff/components/AccessTypeSelect.vue
 create mode 100644 ah-jjzhgd-web/src/views/man-car/staff/components/ProfessionSelect.vue
 create mode 100644 ah-jjzhgd-web/src/views/man-car/staff/components/TeamSelect.vue
 create mode 100644 ah-jjzhgd-web/src/views/man-car/staff/index.vue

diff --git a/ah-jjzhgd-web/src/api/basic/project.js b/ah-jjzhgd-web/src/api/basic/project.js
index 0d92053..b7c7214 100644
--- a/ah-jjzhgd-web/src/api/basic/project.js
+++ b/ah-jjzhgd-web/src/api/basic/project.js
@@ -70,7 +70,7 @@ export function exportProject(data) {
     url: '/system/sys/export/exportProData',
     method: 'get',
     responseType: 'blob',
-    data
+    params: data
   })
 }
 
diff --git a/ah-jjzhgd-web/src/api/car-man/staff.js b/ah-jjzhgd-web/src/api/car-man/staff.js
new file mode 100644
index 0000000..3691a0f
--- /dev/null
+++ b/ah-jjzhgd-web/src/api/car-man/staff.js
@@ -0,0 +1,84 @@
+import request from '@/utils/request'
+
+// 查询人员列表
+export function getStaffList(data) {
+  return request({
+    url: '/background/back/personnel/getHumanLists',
+    method: 'get',
+    params: data
+  })
+}
+
+// 新增人员
+export function addStaffItem(data) {
+  return request({
+    url: '/background/back/personnel/addPersonnel',
+    method: 'post',
+    data
+  })
+}
+
+// 编辑人员
+export function updateStaffItem(data) {
+  return request({
+    url: '/background/back/personnel/editPersonnel',
+    method: 'post',
+    data
+  })
+}
+
+// 删除人员
+export function deleteStaffItem(data) {
+  return request({
+    url: '/background/back/personnel/delPersonnel',
+    method: 'post',
+    data
+  })
+}
+
+// 查看人员详情
+export function getTeamStaffDetail(data) {
+  return request({
+    url: '/background/back/personnel/getPersonnelById',
+    method: 'get',
+    params: data
+  })
+}
+
+// 导出人员
+export function exportStaff(data) {
+  return request({
+    url: '/background/back/export/exportTeamUserData',
+    method: 'get',
+    responseType: 'blob',
+    params: data
+  })
+}
+
+// 人员照片预览
+export function getStaffPhoto(data) {
+  return request({
+    url: '/background/back/personnel/viewPersonnelFile',
+    method: 'get',
+    params: data
+  })
+}
+
+// 人员入场记录
+export function getStaffAccessRecord(data) {
+  return request({
+    url: '/background/back/personnel/getPersonnelAccessLists',
+    method: 'get',
+    params: data
+  })
+}
+
+// 导出人员入场记录
+export function exportStaffAccessRecord(data) {
+  return request({
+    url: '/background/back/export/exportUserAccessData',
+    method: 'get',
+    responseType: 'blob',
+    params: data
+  })
+}
diff --git a/ah-jjzhgd-web/src/api/car-man/team.js b/ah-jjzhgd-web/src/api/car-man/team.js
index 7351b33..db67e25 100644
--- a/ah-jjzhgd-web/src/api/car-man/team.js
+++ b/ah-jjzhgd-web/src/api/car-man/team.js
@@ -51,7 +51,7 @@ export function exportTeam(data) {
     url: '/background/back/export/exportTeamData',
     method: 'get',
     responseType: 'blob',
-    data
+    params: data
   })
 }
 
diff --git a/ah-jjzhgd-web/src/views/man-car/staff/components/AccessTypeSelect.vue b/ah-jjzhgd-web/src/views/man-car/staff/components/AccessTypeSelect.vue
new file mode 100644
index 0000000..45a5c11
--- /dev/null
+++ b/ah-jjzhgd-web/src/views/man-car/staff/components/AccessTypeSelect.vue
@@ -0,0 +1,55 @@
+<template>
+  <el-select v-model="currentOption" placeholder="请选择" style="width: 100%" @change="handleChange">
+    <el-option
+      v-for="item in options"
+      :key="item.value"
+      :label="item.label"
+      :value="item.value"
+    />
+  </el-select>
+</template>
+
+<script>
+import { getDictSelectList } from '@/api/public'
+
+export default {
+  name: 'AccessTypeSelect',
+  props: ['bindValue', 'disabled'],
+  data() {
+    return {
+      options: []
+    }
+  },
+  computed: {
+    currentOption: {
+      get() {
+        return this.bindValue
+      },
+      set(val) {
+        this.$emit('update:bindValue', val)
+      }
+    }
+  },
+  mounted() {
+    this.getList()
+  },
+  methods: {
+    getList() {
+      getDictSelectList(1000).then(res => {
+        this.options = res.data.map(item => {
+          const { id, name } = item
+          return {
+            value: id,
+            label: name
+          }
+        })
+      })
+    },
+    handleChange(value) {
+
+    }
+  }
+}
+</script>
+
+<style scoped lang="less"></style>
diff --git a/ah-jjzhgd-web/src/views/man-car/staff/components/ProfessionSelect.vue b/ah-jjzhgd-web/src/views/man-car/staff/components/ProfessionSelect.vue
new file mode 100644
index 0000000..3dc1b37
--- /dev/null
+++ b/ah-jjzhgd-web/src/views/man-car/staff/components/ProfessionSelect.vue
@@ -0,0 +1,55 @@
+<template>
+  <el-select v-model="currentOption" placeholder="请选择" style="width: 100%" @change="handleChange">
+    <el-option
+      v-for="item in options"
+      :key="item.value"
+      :label="item.label"
+      :value="item.value"
+    />
+  </el-select>
+</template>
+
+<script>
+import { getDictSelectList } from '@/api/public'
+
+export default {
+  name: 'ProfessionSelect',
+  props: ['bindValue', 'disabled'],
+  data() {
+    return {
+      options: []
+    }
+  },
+  computed: {
+    currentOption: {
+      get() {
+        return this.bindValue
+      },
+      set(val) {
+        this.$emit('update:bindValue', val)
+      }
+    }
+  },
+  mounted() {
+    this.getList()
+  },
+  methods: {
+    getList() {
+      getDictSelectList(1000).then(res => {
+        this.options = res.data.map(item => {
+          const { id, name } = item
+          return {
+            value: id,
+            label: name
+          }
+        })
+      })
+    },
+    handleChange(value) {
+
+    }
+  }
+}
+</script>
+
+<style scoped lang="less"></style>
diff --git a/ah-jjzhgd-web/src/views/man-car/staff/components/TeamSelect.vue b/ah-jjzhgd-web/src/views/man-car/staff/components/TeamSelect.vue
new file mode 100644
index 0000000..c672c1c
--- /dev/null
+++ b/ah-jjzhgd-web/src/views/man-car/staff/components/TeamSelect.vue
@@ -0,0 +1,55 @@
+<template>
+  <el-select v-model="currentOption" placeholder="请选择" style="width: 100%" @change="handleChange">
+    <el-option
+      v-for="item in options"
+      :key="item.value"
+      :label="item.label"
+      :value="item.value"
+    />
+  </el-select>
+</template>
+
+<script>
+import { getQualityTeamList } from '@/api/basic/quality'
+
+export default {
+  name: 'TeamSelect',
+  props: ['bindValue', 'disabled'],
+  data() {
+    return {
+      options: []
+    }
+  },
+  computed: {
+    currentOption: {
+      get() {
+        return this.bindValue
+      },
+      set(val) {
+        this.$emit('update:bindValue', val)
+      }
+    }
+  },
+  mounted() {
+    this.getList()
+  },
+  methods: {
+    getList() {
+      getQualityTeamList(600).then(res => {
+        this.options = res.data.map(item => {
+          const { id, name } = item
+          return {
+            value: id,
+            label: name
+          }
+        })
+      })
+    },
+    handleChange(value) {
+
+    }
+  }
+}
+</script>
+
+<style scoped lang="less"></style>
diff --git a/ah-jjzhgd-web/src/views/man-car/staff/index.vue b/ah-jjzhgd-web/src/views/man-car/staff/index.vue
new file mode 100644
index 0000000..9f1235d
--- /dev/null
+++ b/ah-jjzhgd-web/src/views/man-car/staff/index.vue
@@ -0,0 +1,505 @@
+<template>
+  <div class="app-container">
+    <div class="filter-container">
+      <ProjectSelect :bind-value.sync="listQuery.bidCode" class="filter-item" style="width: 200px" />
+      <el-input
+        v-model="listQuery.userName"
+        placeholder="人员姓名"
+        style="width: 200px"
+        class="filter-item ml-20"
+        :maxlength="30"
+        @keyup.enter.native="handleFilter"
+      />
+      <el-button
+
+        style="margin-left: 40px"
+        class="filter-item"
+        type="primary"
+        @click="handleFilter"
+      >
+        查询
+      </el-button>
+      <el-button class="filter-item" style="margin-left: 10px" type="primary" @click="handleCreate">
+        新增
+      </el-button>
+      <el-button class="filter-item" style="margin-left: 10px" type="primary" @click="handleExport">
+        导出
+      </el-button>
+    </div>
+
+    <el-table
+      :key="tableKey"
+      v-loading="listLoading"
+      :data="list"
+      border
+      fit
+      highlight-current-row
+      style="width: 100%"
+      :max-height="tableHeight"
+    >
+      <el-table-column label="序号" align="center" width="80" type="index">
+        <template scope="scope">
+          <span>{{ (listQuery.pageNum - 1) * 10 + scope.$index + 1 }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="姓名" align="center" prop="userName" />
+      <el-table-column label="性别" align="center" prop="sex" />
+      <el-table-column label="工种" align="center" prop="userType" />
+      <el-table-column label="性别" align="center" prop="sex" />
+      <el-table-column label="年龄" align="center" prop="age" />
+      <el-table-column label="状态" align="center" prop="status" />
+      <el-table-column label="班组名称" align="center" prop="teamName" />
+      <el-table-column label="班组长" align="center" prop="teamLeader" />
+      <el-table-column label="所属工程" align="center" prop="proName" />
+      <!--      <el-table-column label="身份证号" align="center" prop="idNumber" />-->
+      <!--      <el-table-column label="电话" align="center" prop="phone" />-->
+      <el-table-column label="人员照片" align="center" prop="photo">
+        <template slot-scope="{ row }">
+          <el-button type="text" size="mini" @click="handleViewImage(row)">查看</el-button>
+          <el-image
+            v-show="false"
+            ref="imageView"
+            style="width: 0; height: 0;"
+            :src="null"
+            :preview-src-list="currentImageViewList"
+          />
+        </template>
+      </el-table-column>
+      <el-table-column label="进出场记录" align="center" prop="accessRecord">
+        <template slot-scope="{ row }">
+          <el-button type="text" size="mini" @click="handleViewRecord(row)">查看</el-button>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="160">
+        <template slot-scope="{ row }">
+          <el-button type="text" size="mini" @click="handleUpdate(row)">编辑</el-button>
+          <el-button type="text" size="mini" @click="handleDelete(row)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="listQuery.pageNum"
+      :limit.sync="listQuery.pageSize"
+      @pagination="getList"
+    />
+
+    <!--    编辑模态框-->
+    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" width="630px" @closed="handleClosedModal">
+      <el-form
+        ref="dataForm"
+        :rules="rules"
+        :model="temp"
+        label-position="right"
+        label-width="120px"
+      >
+        <el-form-item label="所属班组：" prop="teamId">
+          <TeamSelect :bind-value.sync="temp.teamId" />
+        </el-form-item>
+        <el-form-item label="姓名：" prop="userName">
+          <el-input v-model="temp.userName" placeholder="姓名" :maxlength="50" />
+        </el-form-item>
+        <!--        <el-form-item label="性别：" prop="sex">-->
+        <!--          <el-input v-model="temp.sex" placeholder="性别" :maxlength="50" />-->
+        <!--        </el-form-item>-->
+        <!--        <el-form-item label="年龄：" prop="age">-->
+        <!--          <el-input v-model="temp.age" placeholder="年龄" :maxlength="50" />-->
+        <!--        </el-form-item>-->
+        <el-form-item label="身份证号：" prop="idNumber">
+          <el-input v-model="temp.idNumber" placeholder="身份证号" :maxlength="50" />
+        </el-form-item>
+        <el-form-item label="手机号：" prop="phone">
+          <el-input v-model="temp.phone" placeholder="手机号" :maxlength="50" />
+        </el-form-item>
+        <el-form-item label="工种：" prop="userType">
+          <ProfessionSelect :bind-value.sync="temp.userType" />
+        </el-form-item>
+        <el-form-item label="照片：" prop="imageList">
+          <el-upload
+            ref="pictureUpload"
+            action="#"
+            list-type="picture-card"
+            :auto-upload="false"
+            :limit="imageUploadLimit"
+            :file-list="imageList"
+            :on-change="handleImageChange"
+          >
+            <i slot="default" class="el-icon-plus" />
+            <div slot="file" slot-scope="{file}">
+              <img
+                class="el-upload-list__item-thumbnail"
+                :src="file.url"
+              >
+              <span class="el-upload-list__item-actions">
+                <span
+                  class="el-upload-list__item-delete"
+                  @click="handleRemoveImageItem(file)"
+                >
+                  <i class="el-icon-delete" />
+                </span>
+              </span>
+            </div>
+          </el-upload>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogFormVisible = false"> 关闭 </el-button>
+        <el-button type="primary" @click="dialogStatus === 'create' ? createData() : updateData()">
+          提交
+        </el-button>
+      </div>
+    </el-dialog>
+
+    <!--    查看记录模态框-->
+    <el-dialog title="进出场记录" :visible.sync="dialogFormVisible2" width="80%" append-to-body custom-class="custom-modal">
+      <div class="app-container">
+        <div class="filter-container">
+          <el-date-picker
+            v-model="listQuery2.time"
+            style="width: 500px"
+            value-format="yyyy-MM-dd"
+            type="daterange"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+          />
+          <el-button
+
+            style="margin-left: 40px"
+            class="filter-item"
+            type="primary"
+            @click="handleFilter2"
+          >
+            查询
+          </el-button>
+          <el-button
+
+            style="margin-left: 10px"
+            class="filter-item"
+            type="primary"
+            @click="handleExport2"
+          >
+            导出
+          </el-button>
+        </div>
+
+        <el-table
+          :key="tableKey2"
+          v-loading="listLoading"
+          :data="list2"
+          border
+          fit
+          highlight-current-row
+          style="width: 100%"
+          :max-height="tableHeight"
+        >
+          <el-table-column label="序号" align="center" width="80" type="index">
+            <template scope="scope">
+              <span>{{ (listQuery2.pageNum - 1) * 10 + scope.$index + 1 }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="姓名" align="center" prop="userName" />
+          <el-table-column label="出入类型" align="center" prop="accessType" />
+          <el-table-column label="出入时间" align="center" prop="accessTime" />
+          <el-table-column label="身份证号" align="center" prop="idNumber" />
+          <el-table-column label="手机" align="center" prop="userPhone" />
+        </el-table>
+
+        <pagination
+          v-show="total2 > 0"
+          :total="total2"
+          :page.sync="listQuery2.pageNum"
+          :limit.sync="listQuery2.pageSize"
+          @pagination="getList2"
+        />
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import Pagination from '@/components/Pagination'
+
+import _ from 'lodash/fp'
+import { getQualityTeamList } from '@/api/basic/quality'
+import { downloadFile } from '@/utils/download'
+import ProjectSelect from '@/views/basic/sideband/components/ProjectSelect.vue'
+import TeamSelect from '@/views/man-car/staff/components/TeamSelect.vue'
+import {
+  addStaffItem,
+  deleteStaffItem,
+  exportStaff,
+  getStaffList,
+  getTeamStaffDetail,
+  updateStaffItem,
+  getStaffPhoto, getStaffAccessRecord, exportStaffAccessRecord
+} from '@/api/car-man/staff'
+import ProfessionSelect from '@/views/man-car/staff/components/ProfessionSelect.vue'
+
+const defaultTmp = {
+  teamId: '',
+  userName: '',
+  idNumber: '',
+  phone: '',
+  userType: '',
+  userId: ''
+}
+export default {
+  components: { ProfessionSelect, TeamSelect, ProjectSelect, Pagination },
+  data() {
+    return {
+      tableKey: 0,
+      tableKey2: 1,
+      list: [],
+      list2: [],
+      teamList: [],
+      total: 0,
+      total2: 0,
+      imageList: [],
+      delFiles: [],
+      currentImageViewList: [],
+      imageUploadLimit: 5,
+      listLoading: false,
+      listQuery: {
+        pageNum: 1,
+        pageSize: 10,
+        userName: '',
+        bidCode: ''
+      },
+      listQuery2: {
+        pageNum: 1,
+        pageSize: 10,
+        id: '',
+        time: []
+      },
+      tableHeight: 650,
+      showReviewer: false,
+      temp: _.cloneDeep(defaultTmp),
+      dialogFormVisible: false,
+      dialogFormVisible2: false,
+      dialogStatus: '',
+      downloadLoading: false,
+      textMap: {
+        update: '编辑',
+        create: '新增'
+      },
+      dialogPvVisible: false,
+      rules: {
+        teamId: [{ required: true, message: '不能为空', trigger: 'change' }],
+        teamName: [{ required: true, message: '不能为空', trigger: 'blur' }],
+        teamLeader: [{ required: true, message: '不能为空', trigger: 'blur' }],
+        teamLeaderPhone: [{ required: true, message: '不能为空', trigger: 'blur' }],
+        score: [{ required: true, message: '不能为空', trigger: 'change' }],
+        content: [{ required: true, message: '不能为空', trigger: 'blur' }]
+      }
+    }
+  },
+  created() {
+    this.getList()
+    this.getTeamList()
+  },
+  methods: {
+    // 获取班组列表
+    getTeamList() {
+      getQualityTeamList().then(res => {
+        this.teamList = res.data
+      })
+    },
+    // 查看照片
+    handleViewImage(row) {
+      getStaffPhoto({ id: row.userId }).then(res => {
+        this.currentImageViewList = res.data.map(item => {
+          const { base64Url } = item
+          return base64Url
+        })
+        this.$refs.imageView.showViewer = true
+      })
+    },
+    // 查看记录
+    handleViewRecord(row) {
+      this.dialogFormVisible2 = true
+      this.listQuery2.id = row.userId
+      this.getList2()
+    },
+    // 导出
+    handleExport() {
+      exportStaff().then(res => {
+        downloadFile({ fileName: '人员详情.xlsx', fileData: res, fileType: 'application/vnd.ms-excel;charset=utf-8' })
+      })
+    },
+    // 导出入场记录
+    handleExport2() {
+      exportStaffAccessRecord(this.listQuery2).then(res => {
+        downloadFile({ fileName: '人员入场记录.xlsx', fileData: res, fileType: 'application/vnd.ms-excel;charset=utf-8' })
+      })
+    },
+    getList() {
+      this.listLoading = true
+      getStaffList(this.listQuery).then((response) => {
+        this.list = response.rows.map(item => {
+          return item
+        })
+        this.total = response.total
+        this.listLoading = false
+      })
+    },
+    getList2() {
+      this.listLoading = true
+      this.listQuery2.time = this.listQuery2.time.join(' - ')
+      console.log(this.listQuery2)
+      getStaffAccessRecord(this.listQuery2).then((response) => {
+        this.list2 = response.rows.map(item => {
+          return item
+        })
+        this.total2 = response.total
+        this.listLoading = false
+      })
+    },
+    // 查询
+    handleFilter() {
+      this.listQuery.pageNum = 1
+      this.getList()
+    },
+    handleFilter2() {
+      this.listQuery2.pageNum = 1
+      this.getList2()
+    },
+    // 新增
+    handleCreate() {
+      this.dialogStatus = 'create'
+      this.dialogFormVisible = true
+    },
+    getFileData() {
+      const file = []
+      this.imageList.forEach(item => {
+        if (item?.hasOwnProperty('raw')) {
+          file.push(item.raw)
+        }
+      })
+      return { file }
+    },
+    createData() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          const reqData = new FormData()
+          reqData.append('params', JSON.stringify(this.temp))
+          const { file } = this.getFileData()
+          file.forEach(item => {
+            reqData.append('file', item)
+          })
+          addStaffItem(reqData).then((response) => {
+            this.$message({
+              showClose: true,
+              message: response.msg,
+              type: 'success',
+              duration: 2000
+            })
+            this.getList()
+            this.dialogFormVisible = false
+          }).finally(() => {
+            // this.dialogFormVisible = false
+          })
+        }
+      })
+    },
+    // 编辑
+    handleUpdate(row) {
+      getTeamStaffDetail({ id: row.userId }).then((res) => {
+        this.temp = Object.assign({}, res.data)
+        const { fileData } = res.data
+        const imageList = []
+        this.delFiles = []
+        if (fileData?.length) {
+          fileData.forEach(item => {
+            const { base64Url, fileId } = item
+            imageList.push({
+              name: fileId,
+              url: base64Url
+            })
+          })
+        }
+        this.imageList = imageList
+      })
+      this.dialogStatus = 'update'
+      this.dialogFormVisible = true
+    },
+    updateData() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          const reqData = new FormData()
+          const reqD = _.cloneDeep(this.temp)
+          reqD['delFiles'] = this.delFiles.join(',')
+          delete reqD['fileData']
+          reqData.append('params', JSON.stringify(reqD))
+          const { file } = this.getFileData()
+          file.forEach(item => {
+            reqData.append('file', item)
+          })
+          updateStaffItem(reqData).then((response) => {
+            this.$message({
+              showClose: true,
+              message: response.msg,
+              type: 'success',
+              duration: 2000
+            })
+            this.getList()
+          }).finally(() => {
+            this.dialogFormVisible = false
+          })
+        }
+      })
+    },
+    // 删除数据
+    handleDelete(row, index) {
+      this.$confirm(`确定要删除该数据吗？`, {
+        type: 'warning',
+        title: '操作提示',
+        beforeClose: async(action, instance, done) => {
+          if (action === 'confirm') {
+            deleteStaffItem({ id: row.userId }).then((response) => {
+              done()
+              this.$message({
+                showClose: true,
+                message: response.msg,
+                type: 'success',
+                duration: 2000
+              })
+              this.getList()
+            })
+          } else {
+            done()
+          }
+        }
+      })
+    },
+    handleClosedModal() {
+      this.$refs['dataForm'].resetFields()
+      this.temp = _.cloneDeep(defaultTmp)
+      this.imageList = []
+      this.delFiles = []
+    },
+    handleValidateField(name, type) {
+      this.$refs[name].validateField(type)
+    },
+    handleImageChange(file, fileList) {
+      this.imageList = fileList
+      this.handleValidateField('dataForm', 'imageList')
+    },
+    handleRemoveImageItem(file) {
+      if (!file?.hasOwnProperty('raw')) {
+        this.delFiles.push(file.name)
+      }
+      const uploadFiles = this.$refs.pictureUpload.uploadFiles
+      for (const i in uploadFiles) {
+        if (file.url === uploadFiles[i].url) {
+          uploadFiles.splice(i, 1)
+        }
+      }
+      this.imageList = uploadFiles
+      this.handleValidateField('dataForm', 'imageList')
+    }
+  }
+}
+</script>