From 51301acb173cc788de4d2a6f91b9769147d15e05 Mon Sep 17 00:00:00 2001
From: luolianxin <huxin02@aisino.com>
Date: Fri, 21 Feb 2025 11:31:52 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E6=8A=95=E8=AF=89=E4=B8=BE?=
 =?UTF-8?q?=E6=8A=A5=E3=80=81=E8=A3=85=E5=A4=87=E7=AE=A1=E7=90=86=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/jbts/ComplaintReportBoard.vue   |  29 ++
 client/src/views/jbts/login.vue               | 200 ++++++++++++
 client/src/views/zbgl/zfclgl.vue              | 299 ++++++++++++++++++
 client/src/views/zbgl/zfzbgl.vue              | 275 ++++++++++++++++
 client/src/views/zbgl/zsfzgl.vue              | 230 ++++++++++++++
 5 files changed, 1033 insertions(+)
 create mode 100644 client/src/views/jbts/ComplaintReportBoard.vue
 create mode 100644 client/src/views/jbts/login.vue
 create mode 100644 client/src/views/zbgl/zfclgl.vue
 create mode 100644 client/src/views/zbgl/zfzbgl.vue
 create mode 100644 client/src/views/zbgl/zsfzgl.vue

diff --git a/client/src/views/jbts/ComplaintReportBoard.vue b/client/src/views/jbts/ComplaintReportBoard.vue
new file mode 100644
index 0000000..da022ab
--- /dev/null
+++ b/client/src/views/jbts/ComplaintReportBoard.vue
@@ -0,0 +1,29 @@
+<template>
+  <div class="complaint-report-board">
+    <iframe
+      class="complaint-report-board__iframe"
+      src="https://xa-screen-pro.12350.work/"
+      title="投诉举报看板"
+      frameborder="0"
+      allowfullscreen
+    />
+  </div>
+</template>
+
+<script setup>
+</script>
+
+<style lang="scss" scoped>
+.complaint-report-board {
+  width: 100%;
+  height: 100%;
+  display: flex;
+}
+
+.complaint-report-board__iframe {
+  flex: 1;
+  border: none;
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/client/src/views/jbts/login.vue b/client/src/views/jbts/login.vue
new file mode 100644
index 0000000..3a32a62
--- /dev/null
+++ b/client/src/views/jbts/login.vue
@@ -0,0 +1,200 @@
+<template>
+  <div class="complaint-system-login">
+    <div class="login-container">
+      <div class="login-card">
+        <h1>投诉系统登录</h1>
+        <p class="description">正在为您跳转到投诉系统...</p>
+        
+        <div class="button-group">
+          <el-button 
+            type="primary" 
+            size="large"
+            @click="handleSSO"
+            :loading="isLoading"
+          >
+            {{ isLoading ? '正在跳转...' : '点击跳转到投诉系统' }}
+          </el-button>
+          
+          <el-button 
+            size="large"
+            @click="handleCancel"
+          >
+            取消
+          </el-button>
+        </div>
+
+        <div v-if="errorMessage" class="error-message">
+          <el-alert 
+            :title="errorMessage" 
+            type="error" 
+            :closable="true"
+            @close="errorMessage = ''"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { ElMessage } from 'element-plus';
+import { SignJWT } from 'jose';
+import { useUserStore } from '@/stores/modules/user';
+// 投诉系统配置
+const COMPLAINT_SYSTEM_URL = 'https://auth.xa.12350.work/backend.auth/zhzf_login'
+const SSO_SECRET_KEY = import.meta.env.VITE_SSO_SECRET_KEY || 'default-secret-key-change-in-production'
+
+const isLoading = ref(false)
+const errorMessage = ref('')
+const userStore = useUserStore()
+/**
+ * 生成 SSO JWT 令牌
+ */
+async function generateSSOToken(userInfo) {
+  try {
+    // 将密钥转换为 Uint8Array
+    const encoder = new TextEncoder();
+    const secret = encoder.encode(SSO_SECRET_KEY);
+
+    const now = Math.floor(Date.now() / 1000);
+    
+    const token = await new SignJWT({
+      userId: userInfo.userId,
+      officerName: userInfo.officerName,
+      officerMobilePhone: userInfo.officerMobilePhone
+    })
+      .setProtectedHeader({ alg: 'HS256' })
+      .setIssuedAt(now)
+      .setExpirationTime(now + 86400) // 24小时有效期
+      .sign(secret);
+
+    return token;
+  } catch (error) {
+    console.error('生成 SSO 令牌失败:', error);
+    throw new Error('生成 SSO 令牌失败: ' + error.message);
+  }
+}
+
+/**
+ * 生成投诉系统的重定向 URL
+ */
+async function generateRedirectURL(userInfo) {
+  try {
+    const token = await generateSSOToken(userInfo);
+    const redirectURL = `${COMPLAINT_SYSTEM_URL}?token=${encodeURIComponent(token)}`;
+    return redirectURL;
+  } catch (error) {
+    console.error('生成重定向 URL 失败:', error);
+    throw error;
+  }
+}
+
+/**
+ * 执行 SSO 跳转
+ */
+async function handleSSO() {
+  isLoading.value = true;
+  errorMessage.value = '';
+
+  try {
+    // 使用测试用户信息
+    const testUserInfo = {
+      userId: userStore.userInfo.yhwybs,
+      officerName: userStore.username,
+      officerMobilePhone: userStore.mobile,
+      iat: Math.floor(Date.now() / 1000),
+      exp: Math.floor(Date.now() / 1000) + 86400
+    };
+
+    const redirectURL = await generateRedirectURL(testUserInfo);
+    
+    console.log('生成的重定向 URL:', redirectURL);
+    console.log('用户信息:', testUserInfo);
+
+    // 在当前窗口跳转到投诉系统（登录组件通常已在新窗口中打开）
+    window.location.href = redirectURL;
+    
+    ElMessage.success('已为您打开投诉系统，请等待加载。');
+  } catch (error) {
+    console.error('SSO 跳转失败:', error);
+    errorMessage.value = error.message || '跳转失败，请稍后重试';
+    ElMessage.error(errorMessage.value);
+  } finally {
+    isLoading.value = false;
+  }
+}
+
+/**
+ * 取消操作
+ */
+function handleCancel() {
+  window.history.back();
+}
+
+/**
+ * 组件挂载时的初始化
+ */
+onMounted(() => {
+  console.log('投诉系统登录挂载完成');
+  handleSSO();
+});
+</script>
+
+<style scoped lang="scss">
+.complaint-system-login {
+  width: 100%;
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+
+  .login-container {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 20px;
+
+    .login-card {
+      background: white;
+      border-radius: 8px;
+      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
+      padding: 40px;
+      max-width: 500px;
+      width: 100%;
+      text-align: center;
+
+      h1 {
+        margin: 0 0 10px 0;
+        color: #333;
+        font-size: 28px;
+        font-weight: 600;
+      }
+
+      .description {
+        color: #666;
+        font-size: 14px;
+        margin-bottom: 30px;
+        line-height: 1.6;
+      }
+
+      .button-group {
+        display: flex;
+        gap: 12px;
+        margin-bottom: 20px;
+
+        :deep(.el-button) {
+          flex: 1;
+        }
+      }
+
+      .error-message {
+        margin-top: 20px;
+      }
+    }
+  }
+}
+</style>
diff --git a/client/src/views/zbgl/zfclgl.vue b/client/src/views/zbgl/zfclgl.vue
new file mode 100644
index 0000000..868e829
--- /dev/null
+++ b/client/src/views/zbgl/zfclgl.vue
@@ -0,0 +1,299 @@
+<template>
+  <browser :component-loading="componentLoading"
+           :api-config="apiConfig"
+           :permissions="permissions"
+           :dialog-config="dialogConfig"
+           :table-config="tableConfig"
+           :actions="actions"
+           @update:actions="actions = $event"
+           @update:dialog-config="dialogConfig = $event">
+    <template #queryPanel="{ queryParams: qp }">
+      <el-form ref="queryForm" :model="qp" label-width="80px">
+        <el-row class="query-condition">
+          <el-col :span="6"><el-form-item label="所属机构"><AgencySelector v-model="qp.agency" :lazy-load="true" :multiple="false" placeholder="请选择"/></el-form-item></el-col>
+          <el-col :span="6"><el-form-item label="车牌号"><el-input v-model="qp.cph" clearable/></el-form-item></el-col>
+          <el-col :span="6"><el-form-item label="车辆类型"><el-select v-model="qp.cllxdm" placeholder="请选择" clearable><el-option v-for="item in DICTITEMS.ZFCLCLLX_OPTIONS" :key="item.value" :label="item.label" :value="item.value"></el-option></el-select></el-form-item></el-col>
+        </el-row>
+      </el-form>
+    </template>
+    <el-table-column header-align="center" align="center" prop="sdmc" label="所属机构" min-width="200"/>
+    <el-table-column header-align="center" align="center" prop="cph" label="车牌号" min-width="200" show-overflow-tooltip/>
+    <el-table-column header-align="center" align="center" prop="cllx" label="车辆类型" min-width="200"/>
+    <el-table-column header-align="center" align="center" prop="gzsj" label="购置时间" min-width="200"/>
+    <el-table-column header-align="center" align="center" prop="zsbzbh" label="制式标志编号" min-width="200"/>
+    <template #dialogContent="{ dialogConfig: dc }">
+      <el-row>
+        <el-col :span="8">
+          <el-form-item label="所属机构" prop="agency">
+            <AgencySelector v-model="dc.data.agency" :lazy-load="true" :multiple="false" placeholder="请选择"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="车牌号" prop="cph">
+            <el-input v-model="dc.data.cph"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="车辆类型" prop="cllxdm">
+            <el-select v-model="dc.data.cllxdm" clearable>
+              <el-option v-for="item in DICTITEMS.ZFCLCLLX_OPTIONS" :key="item.value" :label="item.label" :value="item.value">
+              </el-option></el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="车辆编码" prop="clbm">
+            <el-input v-model="dc.data.clbm"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="购置时间" prop="gzsj">
+            <el-date-picker v-model="dc.data.gzsj" type="datetime" placeholder="选择购置时间" format="YYYY-MM-DD" value-format="YYYY-MM-DD" style="width: 100%;"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="喷涂制式标志" prop="zsbz">
+            <el-select v-model="dc.data.zsbz" clearable>
+              <el-option v-for="item in DICTITEMS.SF_OPTIONS" :key="item.value" :label="item.label" :value="item.value">
+              </el-option></el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="制式标志编号" prop="zsbzbh">
+            <el-input v-model="dc.data.zsbzbh"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="经度" prop="longitude">
+            <el-input v-model="dc.data.longitude"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="纬度" prop="latitude">
+            <el-input v-model="dc.data.latitude"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-col :span="24">
+        <el-form-item label-width="95px" label="车辆照片">
+          <MultiplePicture ref="multiple_pictures_zfclgl"
+                           :form-data="{urls: zhaopians}"
+                           :parameters="{mode: dc.mode, autoUpload: true, limit: 20}"
+                           @on-success="onSuccessZfclgl"
+                           @on-pic-view="onPicViewZfclgl"
+                           @on-remove="onRemoveZfclgl"/>
+        </el-form-item>
+      </el-col>
+    </template>
+  </browser>
+</template>
+<script setup>
+import {reactive, toRefs, ref, watch, defineProps} from 'vue'
+import Browser from '@/components/Browser.vue'
+import {useUserStore} from '@/stores/modules/user'
+import { ElMessage } from "element-plus"
+import AgencySelector from "@/components/AgencySelector.vue"
+import { DICTITEMS } from "@/utils/Constants.js"
+import zfclgls from "@/api/lawenforcement/Zfclgl.js";
+import MultiplePicture from "@pages/common/MultiplePicture.vue"
+
+const userStore = useUserStore()
+const props = defineProps({
+  dc: {type: Object}
+})
+
+const state = reactive({
+  componentLoading: false,
+  permissions: {
+    query: true,
+    add: true,
+    modify: true,
+    detail: true,
+    delete: true,
+    deleteAll: false,
+    importFile: false,
+    exportFile: false,
+    exportSelectFile: false,
+    downloadTemp: false,
+  },
+  apiConfig: {
+    api: zfclgls,
+    modelId: 'zfclglid',
+  },
+  tableConfig: {
+    hasControlColumn: true,
+    controlWidth: '180',
+    multipleSelect: false
+  },
+  dialogConfig: {
+    show: false,
+    mode: 'detail',
+    formLabelWidth: '110px',
+    loading: false,
+    baseTitle: '执法车辆管理',
+    rules: {
+      agency: [{ required: true, message: '所属机构不能为空', trigger: 'blur' }],
+      cph: [{ required: true, message: '车牌号不能为空', trigger: 'blur' }],
+      cllxdm: [{ required: true, message: '车辆类型不能为空', trigger: 'blur' }],
+      gzsj: [{ required: true, message: '购置时间不能为空', trigger: 'blur' }],
+      zsbz: [{ required: true, message: '喷涂制式标志不能为空', trigger: 'blur' }]
+    },
+    data: {},
+    actions: {
+      handleDialogOk: handleDialogOk
+    }
+  },
+  actions: {
+    add: handleAdd,
+    modify: handleModify,
+    detail: handleDetail,
+    handleSelectionChange
+  },
+  simpleConfigCase: {confName: 'case'},
+  simpleConfigZfws: {confName: 'document'},
+  simpleConfigSdfs: {confName: 'recipient'},
+  simpleConfigSsr: {confName: 'method'},
+  deliverys: []
+})
+
+const {
+  componentLoading,
+  permissions,
+  tableConfig,
+  apiConfig,
+  dialogConfig,
+  actions,
+  simpleConfigCase,
+  simpleConfigZfws,
+  simpleConfigSdfs,
+  simpleConfigSsr,
+  deliverys
+} = toRefs(state)
+
+const methodName = ref('')
+
+// 响应是变量照片
+const zhaopians = ref([])
+
+function handleAdd() {
+  dialogConfig.value.show = true
+  methodName.value = null
+  dialogConfig.value.mode = 'add'
+  dialogConfig.value.title = '执法车辆管理新增'
+  dialogConfig.value.data = Object.assign({}, {})
+  dialogConfig.value.data.zfclglzps = [] // 车辆图片
+  zhaopians.value = []
+}
+
+function handleModify(row) {
+  dialogConfig.value.show = true
+  methodName.value = null
+  dialogConfig.value.mode = 'modify'
+  dialogConfig.value.title = '执法车辆管理修改'
+  dialogConfig.value.data.documentIds = []
+  if (row.zfclglzps &&  row.zfclglzps.length > 0) {
+    row.zfclglzps.forEach(item => item.uid = item.zfclglzpid)
+  }
+  zhaopians.value = row.zfclglzps // 赋值照片
+  findOne(row)
+}
+
+function handleDetail(row) {
+  dialogConfig.value.show = true
+  methodName.value = null
+  dialogConfig.value.mode = 'detail'
+  dialogConfig.value.title = '执法车辆管理详情'
+  dialogConfig.value.showFooter = false
+  if (row.zfclglzps &&  row.zfclglzps.length > 0) {
+    row.zfclglzps.forEach(item => item.uid = item.zfclglzpid)
+  }
+  zhaopians.value = row.zfclglzps // 赋值照片
+  findOne(row)
+}
+
+function findOne(row) {
+  dialogConfig.value.loading = true
+  apiConfig.value.api.findOne(row[apiConfig.value.modelId]).then(res => {
+    if (res.success) {
+      dialogConfig.value.loading = false
+      let data = res.data
+      methodName.value = data.deliveryMethod?.methodName
+      data.documentIds = data.documentIds?.split(',') || []
+      // if (res.data.zfclglzps && res.data.zfclglzps.length > 0) {
+      //   console.log('执行没')
+      //   res.data.zfclglzps.forEach(item => item.uid = item.zfclglzpid)
+      // }
+      dialogConfig.value.data = Object.assign({}, data)
+    } else {
+      dialogConfig.value.loading = false
+      throw new Error('查询失败')
+    }
+  }).catch(() => {
+    dialogConfig.value.loading = false
+  })
+}
+
+function handleDialogOk(formRef) {
+  let _event = actions.value
+  formRef.validate(valid => {
+    if (valid) {
+      // dialogConfig.value.loading = true
+      let data = Object.assign({}, dialogConfig.value.data)
+      if (data.agency === null || data.agency === '') {
+        ElMessage.error('所属机构不能为空！')
+      }
+      console.log('提交参数=', data)
+      if (dialogConfig.value.mode === 'add') {
+        apiConfig.value.api.add(data).then(res => {
+          dialogConfig.value.show = false
+          if (res.success) {
+            ElMessage.success('操作成功')
+            _event.query()
+          } else {
+            throw new Error('操作失败')
+          }
+          dialogConfig.value.loading = false
+        }).catch(() => {
+          dialogConfig.value.loading = false
+        })
+      } else if (dialogConfig.value.mode === 'modify') {
+        apiConfig.value.api.modify(dialogConfig.value.data[apiConfig.value.modelId], data).then(res => {
+          dialogConfig.value.show = false
+          if (res.success) {
+            ElMessage.success('操作成功')
+            _event.query()
+          } else {
+            throw new Error('操作失败')
+          }
+          dialogConfig.value.loading = false
+        }).catch(() => {
+          dialogConfig.value.loading = false
+        })
+      }
+    }
+  })
+}
+
+function handleSelectionChange(selectedData) {
+  deliverys.value = [...selectedData]
+}
+
+// 图片添加
+function onSuccessZfclgl(data, file, row) {
+  let obj = {zfclglzpid: file.uid, name: data.fileName, savePath: data.savePathName, url: data.url}
+  console.log('照片==', obj)
+  dialogConfig.value.data.zfclglzps.push(obj)
+}
+
+const pictureViewRef = ref(null)
+
+function onPicViewZfclgl(url) {
+  pictureViewRef.value.viewPicture(url)
+}
+function onRemoveZfclgl(file, row) {
+  const idx =  dialogConfig.value.data.zfclglzps.findIndex((item) => item.uid === file.uid)
+  if (idx > -1) dialogConfig.value.data.zfclglzps.splice(idx, 1)
+}
+</script>
+<style lang="scss" scoped>
+
+</style>
diff --git a/client/src/views/zbgl/zfzbgl.vue b/client/src/views/zbgl/zfzbgl.vue
new file mode 100644
index 0000000..c27cef2
--- /dev/null
+++ b/client/src/views/zbgl/zfzbgl.vue
@@ -0,0 +1,275 @@
+<template>
+  <browser :component-loading="componentLoading"
+           :api-config="apiConfig"
+           :permissions="permissions"
+           :dialog-config="dialogConfig"
+           :table-config="tableConfig"
+           :actions="actions"
+           @update:actions="actions = $event"
+           @update:dialog-config="dialogConfig = $event">
+    <template #queryPanel="{ queryParams: qp }">
+      <el-form ref="queryForm" :model="qp" label-width="80px">
+        <el-row class="query-condition">
+          <el-col :span="6"><el-form-item label="属地"><AgencySelector v-model="qp.agency" :lazy-load="true" :multiple="false" placeholder="请选择"/></el-form-item></el-col>
+          <el-col :span="6"><el-form-item label="装备名称"><el-input v-model="qp.zbmc" clearable/></el-form-item></el-col>
+          <el-col :span="6"><el-form-item label="装备类型"><el-select v-model="qp.zblxdm" placeholder="请选择" clearable><el-option v-for="item in DICTITEMS.ZFZBZBLX_OPTIONS" :key="item.value" :label="item.label" :value="item.value"></el-option></el-select></el-form-item></el-col>
+        </el-row>
+      </el-form>
+    </template>
+    <el-table-column header-align="center" align="center" prop="sdmc" label="属地" min-width="200"/>
+    <el-table-column header-align="center" align="center" prop="zbmc" label="装备名称" min-width="200" show-overflow-tooltip/>
+    <el-table-column header-align="center" align="center" prop="zblx" label="装备类型" min-width="200"/>
+    <el-table-column header-align="center" align="center" prop="gzsj" label="购置时间" min-width="200"/>
+    <el-table-column header-align="center" align="center" prop="syr" label="使用人" min-width="200"/>
+    <template #tableControlColumn="{ data: r }">
+      <el-link v-if="r.data.row.zblxdm === '7' || r.data.row.zblxdm === '8'" type="primary" @click="lslx(r.data.row)" title="历史录像">历史录像</el-link>
+    </template>
+    <template #dialogContent="{ dialogConfig: dc }">
+      <el-row>
+        <el-col :span="8">
+          <el-form-item label="属地" prop="agency">
+            <AgencySelector v-model="dc.data.agency" :lazy-load="true" :multiple="false" placeholder="请选择"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="装备名称" prop="zbmc">
+            <el-input v-model="dc.data.zbmc"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="装备编码" prop="sbbm">
+            <el-input v-model="dc.data.sbbm"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="装备类型" prop="zblxdm">
+            <el-select v-model="dc.data.zblxdm" clearable>
+              <el-option v-for="item in DICTITEMS.ZFZBZBLX_OPTIONS" :key="item.value" :label="item.label" :value="item.value">
+              </el-option></el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="购置时间" prop="gzsj">
+            <el-date-picker v-model="dc.data.gzsj" type="datetime" placeholder="选择实际送达时间" format="YYYY-MM-DD" value-format="YYYY-MM-DD" style="width: 100%;"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="使用人" prop="syr">
+            <el-input v-model="dc.data.syr"/>
+          </el-form-item>
+        </el-col>
+       </el-row>
+      <el-divider v-show="dialogConfig.mode === 'lslx'" content-position="left">设备历史录像</el-divider>
+      <el-row v-show="dialogConfig.mode === 'lslx'" class="width-100">
+        <el-col :span="24" class="padding-bottom-10">
+          <el-table :data="dialogConfig.data.videos" height="200" border>
+            <el-table-column header-align="center" align="center" prop="zbmc" label="装备名称" min-width="150" show-overflow-tooltip/>
+            <el-table-column header-align="center" align="center" prop="zbdm" label="装备代码" min-width="150"/>
+            <el-table-column header-align="center" align="center" prop="zblxmc" label="装备类型名称"  min-width="150"/>
+            <el-table-column header-align="center" align="center" prop="cjsj" label="创建时间" min-width="150"/>
+            <el-table-column fixed="right" label="操作" width="120" align="center">
+              <template #default="{row}">
+                <el-link type="primary" title="查看" @click="handCheckDetail(row)">查看</el-link>
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-col>
+      </el-row>
+    </template>
+  </browser>
+</template>
+<script setup>
+import {reactive, toRefs, ref, watch} from 'vue'
+import Browser from '@/components/Browser.vue'
+import {useUserStore} from '@/stores/modules/user'
+import {ElButton, ElMessage} from "element-plus"
+import AgencySelector from "@/components/AgencySelector.vue"
+import {DEFAULT_ENTERPRISE_DETAIL, DICTDISPLAYS, DICTITEMS} from "@/utils/Constants.js"
+import zfzbgls from "@/api/lawenforcement/Zfzbgl.js";
+
+const userStore = useUserStore()
+
+const state = reactive({
+  componentLoading: false,
+  permissions: {
+    query: true,
+    add: true,
+    modify: true,
+    detail: true,
+    delete: true,
+    deleteAll: false,
+    importFile: false,
+    exportFile: false,
+    exportSelectFile: false,
+    downloadTemp: false,
+  },
+  apiConfig: {
+    api: zfzbgls,
+    modelId: 'zfzbglid',
+  },
+  tableConfig: {
+    hasControlColumn: true,
+    controlWidth: '180',
+    multipleSelect: false
+  },
+  dialogConfig: {
+    show: false,
+    mode: 'detail',
+    formLabelWidth: '110px',
+    loading: false,
+    baseTitle: '执法装备管理',
+    rules: {
+      agency: [{ required: true, message: '属地不能为空', trigger: 'blur' }],
+      zbmc: [{ required: true, message: '装备名称不能为空', trigger: 'blur' }],
+      zblxdm: [{ required: true, message: '装备类型不能为空', trigger: 'blur' }],
+      gzsj: [{ required: true, message: '购置时间不能为空', trigger: 'blur' }],
+      syr: [{ required: true, message: '使用人不能为空', trigger: 'blur' }]
+    },
+    data: {},
+    actions: {
+      handleDialogOk: handleDialogOk
+    }
+  },
+  actions: {
+    add: handleAdd,
+    modify: handleModify,
+    detail: handleDetail,
+    handleSelectionChange
+  },
+  simpleConfigCase: {confName: 'case'},
+  simpleConfigZfws: {confName: 'document'},
+  simpleConfigSdfs: {confName: 'recipient'},
+  simpleConfigSsr: {confName: 'method'},
+  deliverys: []
+})
+
+const {
+  componentLoading,
+  permissions,
+  tableConfig,
+  apiConfig,
+  dialogConfig,
+  actions,
+  simpleConfigCase,
+  simpleConfigZfws,
+  simpleConfigSdfs,
+  simpleConfigSsr,
+  deliverys
+} = toRefs(state)
+
+const methodName = ref('')
+
+
+function handleAdd() {
+  dialogConfig.value.show = true
+  methodName.value = null
+  dialogConfig.value.mode = 'add'
+  dialogConfig.value.title = '执法装备管理新增'
+  dialogConfig.value.data = Object.assign({}, {})
+}
+
+function handleModify(row) {
+  dialogConfig.value.show = true
+  methodName.value = null
+  dialogConfig.value.mode = 'modify'
+  dialogConfig.value.title = '执法装备管理修改'
+  dialogConfig.value.data.documentIds = []
+  findOne(row)
+}
+
+function handleDetail(row) {
+  dialogConfig.value.show = true
+  methodName.value = null
+  dialogConfig.value.mode = 'detail'
+  dialogConfig.value.title = '执法装备管理详情'
+  dialogConfig.value.showFooter = false
+  findOne(row)
+}
+
+function findOne(row) {
+  dialogConfig.value.loading = true
+  apiConfig.value.api.findOne(row[apiConfig.value.modelId]).then(res => {
+    if (res.success) {
+      dialogConfig.value.loading = false
+      let data = res.data
+      methodName.value = data.deliveryMethod?.methodName
+      data.logistics = data.logistics? data.logistics:{}
+      data.documentIds = data.documentIds?.split(',') || []
+      if (data.materials) data.materials.forEach(item => item.uid = item.materialsId)
+      dialogConfig.value.data = Object.assign({}, data, {picList: data.materials})
+    } else {
+      dialogConfig.value.loading = false
+      throw new Error('查询失败')
+    }
+  }).catch(() => {
+    dialogConfig.value.loading = false
+  })
+}
+
+function handleDialogOk(formRef) {
+  let _event = actions.value
+  formRef.validate(valid => {
+    if (valid) {
+      dialogConfig.value.loading = true
+      let data = Object.assign({}, dialogConfig.value.data)
+      if (data.agency === null || data.agency === '') {
+        ElMessage.error('属地不能为空！')
+      }
+      if (dialogConfig.value.mode === 'add') {
+        console.log('参数=', data)
+        apiConfig.value.api.add(data).then(res => {
+          dialogConfig.value.show = false
+          if (res.success) {
+            ElMessage.success('操作成功')
+            _event.query()
+          } else {
+            throw new Error('操作失败')
+          }
+          dialogConfig.value.loading = false
+        }).catch(() => {
+          dialogConfig.value.loading = false
+        })
+      } else if (dialogConfig.value.mode === 'modify') {
+        apiConfig.value.api.modify(dialogConfig.value.data[apiConfig.value.modelId], data).then(res => {
+          dialogConfig.value.show = false
+          if (res.success) {
+            ElMessage.success('操作成功')
+            _event.query()
+          } else {
+            throw new Error('操作失败')
+          }
+          dialogConfig.value.loading = false
+        }).catch(() => {
+          dialogConfig.value.loading = false
+        })
+      }
+    }
+  })
+}
+
+function handleSelectionChange(selectedData) {
+  deliverys.value = [...selectedData]
+}
+
+// 历史录像
+function lslx(row) {
+  dialogConfig.value.show = true
+  methodName.value = null
+  dialogConfig.value.mode = 'lslx'
+  dialogConfig.value.title = '历史录像'
+  dialogConfig.value.showFooter = false
+  findOne(row)
+}
+
+
+// 视频查看
+function handCheckDetail(row) {
+  dialogConfig1.value.show = true
+  dialogConfig.value.loading = true
+}
+
+
+</script>
+<style lang="scss" scoped>
+
+</style>
diff --git a/client/src/views/zbgl/zsfzgl.vue b/client/src/views/zbgl/zsfzgl.vue
new file mode 100644
index 0000000..c5b67cc
--- /dev/null
+++ b/client/src/views/zbgl/zsfzgl.vue
@@ -0,0 +1,230 @@
+<template>
+  <browser :component-loading="componentLoading"
+           :api-config="apiConfig"
+           :permissions="permissions"
+           :dialog-config="dialogConfig"
+           :table-config="tableConfig"
+           :actions="actions"
+           @update:actions="actions = $event"
+           @update:dialog-config="dialogConfig = $event">
+    <template #queryPanel="{ queryParams: qp }">
+      <el-form ref="queryForm" :model="qp" label-width="80px">
+        <el-row class="query-condition">
+          <el-col :span="6"><el-form-item label="所属机构"><AgencySelector v-model="qp.agency" :lazy-load="true" :multiple="false" placeholder="请选择"/></el-form-item></el-col>
+          <el-col :span="6"><el-form-item label="姓名"><el-input v-model="qp.name" clearable/></el-form-item></el-col>
+          <el-col :span="6"><el-form-item label="服装类型"><el-select v-model="qp.fzlxdm" placeholder="请选择" clearable><el-option v-for="item in DICTITEMS.ZSFZFZLX_OPTIONS" :key="item.value" :label="item.label" :value="item.value"></el-option></el-select></el-form-item></el-col>
+        </el-row>
+      </el-form>
+    </template>
+    <el-table-column header-align="center" align="center" prop="sdmc" label="所属机构" min-width="200"/>
+    <el-table-column header-align="center" align="center" prop="name" label="姓名" min-width="200" show-overflow-tooltip/>
+    <el-table-column header-align="center" align="center" prop="fzlx" label="服装类型" min-width="200"/>
+    <el-table-column header-align="center" align="center" prop="gzsj" label="配发时间" min-width="200"/>
+    <template #dialogContent="{ dialogConfig: dc }">
+      <el-row>
+        <el-col :span="8">
+          <el-form-item label="所属机构" prop="agency">
+            <AgencySelector v-model="dc.data.agency" :lazy-load="true" :multiple="false" placeholder="请选择"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="姓名" prop="name">
+            <el-input v-model="dc.data.name"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="服装类型" prop="fzlx">
+            <el-select v-model="dc.data.fzlxdm" clearable>
+              <el-option v-for="item in DICTITEMS.ZSFZFZLX_OPTIONS" :key="item.value" :label="item.label" :value="item.value">
+              </el-option></el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="服装编码" prop="fzbm">
+            <el-input v-model="dc.data.fzbm"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="配发时间" prop="gzsj">
+            <el-date-picker v-model="dc.data.gzsj" type="datetime" placeholder="选择实际送达时间" format="YYYY-MM-DD" value-format="YYYY-MM-DD" style="width: 100%;"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </template>
+  </browser>
+</template>
+<script setup>
+import {reactive, toRefs, ref, watch} from 'vue'
+import Browser from '@/components/Browser.vue'
+import {useUserStore} from '@/stores/modules/user'
+import {ElButton, ElMessage} from "element-plus"
+import AgencySelector from "@/components/AgencySelector.vue"
+import {DEFAULT_ENTERPRISE_DETAIL, DICTDISPLAYS, DICTITEMS} from "@/utils/Constants.js"
+import ssfzgl from "@/api/lawenforcement/Zsfzgl";
+
+const userStore = useUserStore()
+
+const state = reactive({
+  componentLoading: false,
+  permissions: {
+    query: true,
+    add: true,
+    modify: true,
+    detail: true,
+    delete: true,
+    deleteAll: false,
+    importFile: false,
+    exportFile: false,
+    exportSelectFile: false,
+    downloadTemp: false,
+  },
+  apiConfig: {
+    api: ssfzgl,
+    modelId: 'zsfzglid',
+  },
+  tableConfig: {
+    hasControlColumn: true,
+    controlWidth: '180',
+    multipleSelect: false
+  },
+  dialogConfig: {
+    show: false,
+    mode: 'detail',
+    formLabelWidth: '110px',
+    loading: false,
+    baseTitle: '执法车辆管理',
+    rules: {
+      agency: [{ required: true, message: '所属机构不能为空', trigger: 'blur' }],
+      name: [{ required: true, message: '姓名不能为空', trigger: 'blur' }],
+      fzlxdm: [{ required: true, message: '服装类型不能为空', trigger: 'blur' }],
+      gzsj: [{ required: true, message: '配发时间不能为空', trigger: 'blur' }]
+    },
+    data: {},
+    actions: {
+      handleDialogOk: handleDialogOk
+    }
+  },
+  actions: {
+    add: handleAdd,
+    modify: handleModify,
+    detail: handleDetail,
+    handleSelectionChange
+  },
+  simpleConfigCase: {confName: 'case'},
+  simpleConfigZfws: {confName: 'document'},
+  simpleConfigSdfs: {confName: 'recipient'},
+  simpleConfigSsr: {confName: 'method'},
+  deliverys: []
+})
+
+const {
+  componentLoading,
+  permissions,
+  tableConfig,
+  apiConfig,
+  dialogConfig,
+  actions,
+  simpleConfigCase,
+  simpleConfigZfws,
+  simpleConfigSdfs,
+  simpleConfigSsr,
+  deliverys
+} = toRefs(state)
+
+const methodName = ref('')
+
+
+function handleAdd() {
+  dialogConfig.value.show = true
+  methodName.value = null
+  dialogConfig.value.mode = 'add'
+  dialogConfig.value.title = '制式服装新增'
+  dialogConfig.value.data = Object.assign({}, {})
+}
+
+function handleModify(row) {
+  dialogConfig.value.show = true
+  methodName.value = null
+  dialogConfig.value.mode = 'modify'
+  dialogConfig.value.title = '制式服装修改'
+  dialogConfig.value.data.documentIds = []
+  findOne(row)
+}
+
+function handleDetail(row) {
+  dialogConfig.value.show = true
+  methodName.value = null
+  dialogConfig.value.mode = 'detail'
+  dialogConfig.value.title = '制式服装详情'
+  dialogConfig.value.showFooter = false
+  findOne(row)
+}
+
+function findOne(row) {
+  dialogConfig.value.loading = true
+  apiConfig.value.api.findOne(row[apiConfig.value.modelId]).then(res => {
+    if (res.success) {
+      dialogConfig.value.loading = false
+      let data = res.data
+      methodName.value = data.deliveryMethod?.methodName
+      data.logistics = data.logistics? data.logistics:{}
+      data.documentIds = data.documentIds?.split(',') || []
+      if (data.materials) data.materials.forEach(item => item.uid = item.materialsId)
+      dialogConfig.value.data = Object.assign({}, data, {picList: data.materials})
+    } else {
+      dialogConfig.value.loading = false
+      throw new Error('查询失败')
+    }
+  }).catch(() => {
+    dialogConfig.value.loading = false
+  })
+}
+
+function handleDialogOk(formRef) {
+  let _event = actions.value
+  formRef.validate(valid => {
+    if (valid) {
+      dialogConfig.value.loading = true
+      let data = Object.assign({}, dialogConfig.value.data)
+      if (data.agency === null || data.agency === '') {
+        ElMessage.error('所属机构不能为空！')
+      }
+      if (dialogConfig.value.mode === 'add') {
+        apiConfig.value.api.add(data).then(res => {
+          dialogConfig.value.show = false
+          if (res.success) {
+            ElMessage.success('操作成功')
+            _event.query()
+          } else {
+            throw new Error('操作失败')
+          }
+          dialogConfig.value.loading = false
+        }).catch(() => {
+          dialogConfig.value.loading = false
+        })
+      } else if (dialogConfig.value.mode === 'modify') {
+        apiConfig.value.api.modify(dialogConfig.value.data[apiConfig.value.modelId], data).then(res => {
+          dialogConfig.value.show = false
+          if (res.success) {
+            ElMessage.success('操作成功')
+            _event.query()
+          } else {
+            throw new Error('操作失败')
+          }
+          dialogConfig.value.loading = false
+        }).catch(() => {
+          dialogConfig.value.loading = false
+        })
+      }
+    }
+  })
+}
+
+function handleSelectionChange(selectedData) {
+  deliverys.value = [...selectedData]
+}
+
+</script>
+<style lang="scss" scoped>
+
+</style>