.env.development

@@ -1,8 +1,8 @@
# é¡µé¢æ ‡é¢˜

VITE_APP_TITLE = èŠ¯å¯¼äº‘（管理信息系统）

VITE_APP_TITLE = ä¸­å¼ºæ’兴管理系统



# å¼€å‘环境配置

VITE_APP_ENV = 'development'



# èŠ¯å¯¼äº‘（管理信息系统）/开发环境

# ä¸­å¼ºæ’兴管理系统/开发环境

VITE_APP_BASE_API = '/dev-api'


 .env.production

@@ -1,10 +1,10 @@
# é¡µé¢æ ‡é¢˜

VITE_APP_TITLE = èŠ¯å¯¼äº‘（管理信息系统）

VITE_APP_TITLE = ä¸­å¼ºæ’兴管理系统



# ç”Ÿäº§çŽ¯å¢ƒé…ç½®

VITE_APP_ENV = 'production'



# èŠ¯å¯¼äº‘（管理信息系统）/生产环境

# ä¸­å¼ºæ’兴管理系统/生产环境

VITE_APP_BASE_API = '/prod-api'



# æ˜¯å¦åœ¨æ‰“包时开启压缩，支持 gzip å’Œ brotli


 .env.staging

@@ -1,10 +1,10 @@
# é¡µé¢æ ‡é¢˜

VITE_APP_TITLE = èŠ¯å¯¼äº‘（管理信息系统）

VITE_APP_TITLE = ä¸­å¼ºæ’兴管理系统



# ç”Ÿäº§çŽ¯å¢ƒé…ç½®

VITE_APP_ENV = 'staging'



# èŠ¯å¯¼äº‘（管理信息系统）/生产环境

# ä¸­å¼ºæ’兴管理系统/生产环境

VITE_APP_BASE_API = '/stage-api'



# æ˜¯å¦åœ¨æ‰“包时开启压缩，支持 gzip å’Œ brotli


 index.html

@@ -6,8 +6,8 @@
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <meta name="renderer" content="webkit">

  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

  <link rel="icon" href="/favicon.ico">

  <title>芯导云（管理信息系统）</title>

  <link rel="icon" href="/ZQHXico.ico">

  <title>中强恒兴管理系统</title>

  <!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->

  <style>

    html,


 package.json

@@ -1,7 +1,7 @@
{
  "name": "ruoyi",
  "version": "3.8.9",
  "description": "芯导云（管理信息系统）",
  "description": "中强恒兴管理系统",
  "author": "若依",
  "license": "MIT",
  "type": "module",

 src/api/equipmentManagement/brand.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,93 @@
// è®¾å¤‡å“ç‰Œç®¡ç† - æœ¬åœ°å‡æ•°æ® API（使用 localStorage æŒä¹…化）

const STORAGE_KEY = 'EQUIPMENT_BRANDS';

function readStore() {
  try {
    const raw = localStorage.getItem(STORAGE_KEY);
    if (raw) {
      const parsed = JSON.parse(raw);
      if (Array.isArray(parsed)) return parsed;
    }
  } catch (e) {
    // ignore
  }
  // åˆå§‹åŒ–一些示例数据
  const initial = [
    { id: 1, name: '西门子', country: '德国', description: '工业自动化与电气工程品牌', createdAt: Date.now() - 86400000 * 10 },
    { id: 2, name: '施耐德', country: '法国', description: '能源管理与自动化', createdAt: Date.now() - 86400000 * 7 },
    { id: 3, name: '三菱电机', country: '日本', description: '电气与自动化设备', createdAt: Date.now() - 86400000 * 3 },
  ];
  localStorage.setItem(STORAGE_KEY, JSON.stringify(initial));
  return initial;
}

function writeStore(list) {
  localStorage.setItem(STORAGE_KEY, JSON.stringify(list));
}

function nextId(list) {
  const maxId = list.reduce((max, item) => Math.max(max, Number(item.id) || 0), 0);
  return maxId + 1;
}

export function getBrandPage(params = {}) {
  const { current = 1, size = 10, name } = params;
  const list = readStore();
  let filtered = list;
  if (name) {
    const kw = String(name).trim();
    filtered = filtered.filter((b) =>
      (b.name && b.name.includes(kw)) || (b.country && b.country.includes(kw))
    );
  }
  const start = (current - 1) * size;
  const end = start + Number(size);
  const records = filtered.slice(start, end);
  return Promise.resolve({
    code: 200,
    data: {
      total: filtered.length,
      records,
    },
    msg: 'ok',
  });
}

export function getBrandById(id) {
  const list = readStore();
  const item = list.find((i) => String(i.id) === String(id));
  return Promise.resolve({ code: 200, data: item || null, msg: 'ok' });
}

export function addBrand(data) {
  const list = readStore();
  const item = { ...data };
  item.id = nextId(list);
  item.createdAt = Date.now();
  list.unshift(item);
  writeStore(list);
  return Promise.resolve({ code: 200, data: item, msg: '新增成功' });
}

export function editBrand(data) {
  const list = readStore();
  const index = list.findIndex((i) => String(i.id) === String(data.id));
  if (index !== -1) {
    list[index] = { ...list[index], ...data };
    writeStore(list);
    return Promise.resolve({ code: 200, data: list[index], msg: '修改成功' });
  }
  return Promise.resolve({ code: 404, data: null, msg: '未找到该品牌' });
}

export function delBrand(idOrIds) {
  const list = readStore();
  const ids = Array.isArray(idOrIds) ? idOrIds.map(String) : [String(idOrIds)];
  const newList = list.filter((i) => !ids.includes(String(i.id)));
  writeStore(newList);
  return Promise.resolve({ code: 200, data: null, msg: '删除成功' });
}




 src/api/login.js

@@ -93,3 +93,15 @@
    data: data

  })

}



export function tideLogin(data) {

  return request({

    url: '/tide/tideLogin',

    headers: {

      isToken: false,

      repeatSubmit: false

    },

    method: 'post',

    data: data

  })

}


 src/assets/logo/logo.png

 src/components/PIMTable/PIMTable.vue

@@ -124,7 +124,6 @@
          <template v-for="(o, key) in item.operation" :key="key">
            <el-button
              v-show="o.type != 'upload'"
              size="small"
              v-if="o.showHide ? o.showHide(scope.row) : true"
              :disabled="o.disabled ? o.disabled(scope.row) : false"
              :plain="o.plain"
@@ -149,7 +148,6 @@
                (o.uploadIdFun ? o.uploadIdFun(scope.row) : scope.row.id)
              "
              ref="uploadRef"
              size="small"
              :multiple="o.multiple ? o.multiple : false"
              :limit="1"
              :disabled="o.disabled ? o.disabled(scope.row) : false"
@@ -178,7 +176,6 @@
              :show-file-list="false"
            >
              <el-button
                :size="o.size ? o.size : 'small'"
                link
                type="primary"
                :disabled="o.disabled ? o.disabled(scope.row) : false"

 src/components/QRCodeGenerator/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,541 @@
<template>
  <div class="qr-code-generator">
    <!-- äºŒç»´ç ç”Ÿæˆè¡¨å• -->
    <el-form :model="form" :rules="rules" ref="formRef" label-width="120px" class="qr-form">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="标识类型" prop="type">
            <el-select v-model="form.type" placeholder="请选择标识类型" style="width: 100%">
              <el-option label="二维码" value="qrcode"></el-option>
              <el-option label="防伪码" value="security"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="内容" prop="content">
            <el-input 
              v-model="form.content" 
              placeholder="请输入要编码的内容"
              :type="form.type === 'security' ? 'textarea' : 'text'"
              :rows="form.type === 'security' ? 3 : 1"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="尺寸" prop="size">
            <el-input-number 
              v-model="form.size" 
              :min="100" 
              :max="500" 
              :step="50"
              style="width: 100%"
            ></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="边距" prop="margin">
            <el-input-number 
              v-model="form.margin" 
              :min="0" 
              :max="10" 
              :step="1"
              style="width: 100%"
            ></el-input-number>
          </el-form-item>
        </el-col>
      </el-row>
      
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="前景色" prop="foregroundColor">
            <el-color-picker v-model="form.foregroundColor" style="width: 100%"></el-color-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="背景色" prop="backgroundColor">
            <el-color-picker v-model="form.backgroundColor" style="width: 100%"></el-color-picker>
          </el-form-item>
        </el-col>
      </el-row>
      
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item>
            <el-button type="primary" @click="generateCode" :loading="generating">
              ç”Ÿæˆ{{ form.type === 'qrcode' ? '二维码' : '防伪码' }}
            </el-button>
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <!-- ç”Ÿæˆçš„码显示区域 -->
    <div v-if="generatedCodeUrl" class="code-display">
      <el-divider content-position="center">
        {{ form.type === 'qrcode' ? '生成的二维码' : '生成的防伪码' }}
      </el-divider>
      
      <div class="code-container">
        <div class="code-image">
          <img :src="generatedCodeUrl" :alt="form.type === 'qrcode' ? '二维码' : '防伪码'" />
        </div>
        
        <div class="code-info">
          <p><strong>内容：</strong>{{ form.content }}</p>
          <p><strong>类型：</strong>{{ form.type === 'qrcode' ? '二维码' : '防伪码' }}</p>
          <p><strong>尺寸：</strong>{{ form.size }}x{{ form.size }}px</p>
          <p><strong>生成时间：</strong>{{ generateTime }}</p>
        </div>
      </div>
      
      <div class="code-actions">
        <el-button type="success" @click="downloadCode" icon="Download">
          ä¸‹è½½å›¾ç‰‡
        </el-button>
        <el-button type="primary" @click="copyToClipboard" icon="CopyDocument">
          å¤åˆ¶å†…容
        </el-button>
        <el-button @click="printCode" icon="Printer">
          æ‰“印
        </el-button>
      </div>
    </div>

    <!-- æ‰¹é‡ç”Ÿæˆå¯¹è¯æ¡† -->
    <el-dialog v-model="batchDialogVisible" title="批量生成" width="600px">
      <el-form :model="batchForm" label-width="120px">
        <el-form-item label="生成数量">
          <el-input-number v-model="batchForm.quantity" :min="1" :max="100" style="width: 100%"></el-input-number>
        </el-form-item>
        <el-form-item label="前缀">
          <el-input v-model="batchForm.prefix" placeholder="请输入前缀，如：PROD_"></el-input>
        </el-form-item>
        <el-form-item label="起始编号">
          <el-input-number v-model="batchForm.startNumber" :min="1" style="width: 100%"></el-input-number>
        </el-form-item>
      </el-form>
      
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="batchDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="generateBatchCodes">开始生成</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- æ‰¹é‡ç”Ÿæˆç»“æžœ -->
    <div v-if="batchCodes.length > 0" class="batch-results">
      <el-divider content-position="center">批量生成结果</el-divider>
      
      <div class="batch-grid">
        <div 
          v-for="(code, index) in batchCodes" 
          :key="index" 
          class="batch-item"
        >
          <img :src="code.url" :alt="code.content" />
          <p class="batch-content">{{ code.content }}</p>
          <el-button size="small" @click="downloadSingleCode(code)">下载</el-button>
        </div>
      </div>
      
      <div class="batch-actions">
        <el-button type="success" @click="downloadAllCodes">下载全部</el-button>
        <el-button @click="clearBatchCodes">清空结果</el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import QRCode from 'qrcode'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Download, CopyDocument, Printer } from '@element-plus/icons-vue'

// å®šä¹‰ç»„件名称
defineOptions({
  name: 'QRCodeGenerator'
})

// è¡¨å•æ•°æ®
const form = reactive({
  type: 'qrcode',
  content: '',
  size: 200,
  margin: 2,
  foregroundColor: '#000000',
  backgroundColor: '#FFFFFF'
})

// è¡¨å•éªŒè¯è§„则
const rules = {
  type: [{ required: true, message: '请选择标识类型', trigger: 'change' }],
  content: [{ required: true, message: '请输入内容', trigger: 'blur' }]
}

// å“åº”式数据
const formRef = ref()
const generating = ref(false)
const generatedCodeUrl = ref('')
const generateTime = ref('')
const batchDialogVisible = ref(false)
const batchForm = reactive({
  quantity: 10,
  prefix: '',
  startNumber: 1
})
const batchCodes = ref([])

// ç”ŸæˆäºŒç»´ç æˆ–防伪码
const generateCode = async () => {
  try {
    await formRef.value.validate()
    
    if (!form.content.trim()) {
      ElMessage.warning('请输入要编码的内容')
      return
    }
    
    generating.value = true
    
    if (form.type === 'qrcode') {
      // ç”ŸæˆäºŒç»´ç 
      generatedCodeUrl.value = await QRCode.toDataURL(form.content, {
        width: form.size,
        margin: form.margin,
        color: {
          dark: form.foregroundColor,
          light: form.backgroundColor
        },
        errorCorrectionLevel: 'M'
      })
    } else {
      // ç”Ÿæˆé˜²ä¼ªç ï¼ˆä½¿ç”¨äºŒç»´ç æŠ€æœ¯ï¼Œä½†å†…容格式不同）
      const securityContent = generateSecurityCode(form.content)
      generatedCodeUrl.value = await QRCode.toDataURL(securityContent, {
        width: form.size,
        margin: form.margin,
        color: {
          dark: form.foregroundColor,
          light: form.backgroundColor
        },
        errorCorrectionLevel: 'H' // é˜²ä¼ªç ä½¿ç”¨æœ€é«˜çº é”™çº§åˆ«
      })
    }
    
    generateTime.value = new Date().toLocaleString()
    ElMessage.success('生成成功！')
    
  } catch (error) {
    console.error('生成失败:', error)
    ElMessage.error('生成失败：' + error.message)
  } finally {
    generating.value = false
  }
}

// ç”Ÿæˆé˜²ä¼ªç å†…容
const generateSecurityCode = (content) => {
  const timestamp = Date.now()
  const random = Math.random().toString(36).substr(2, 8)
  return `SEC_${content}_${timestamp}_${random}`
}

// ä¸‹è½½ç”Ÿæˆçš„码
const downloadCode = () => {
  if (!generatedCodeUrl.value) {
    ElMessage.warning('请先生成码')
    return
  }
  
  const a = document.createElement('a')
  a.href = generatedCodeUrl.value
  a.download = `${form.type === 'qrcode' ? '二维码' : '防伪码'}_${new Date().getTime()}.png`
  document.body.appendChild(a)
  a.click()
  document.body.removeChild(a)
  ElMessage.success('下载成功！')
}

// å¤åˆ¶å†…容到剪贴板
const copyToClipboard = async () => {
  try {
    await navigator.clipboard.writeText(form.content)
    ElMessage.success('内容已复制到剪贴板')
  } catch (error) {
    // é™çº§æ–¹æ¡ˆ
    const textArea = document.createElement('textarea')
    textArea.value = form.content
    document.body.appendChild(textArea)
    textArea.select()
    document.execCommand('copy')
    document.body.removeChild(textArea)
    ElMessage.success('内容已复制到剪贴板')
  }
}

// æ‰“印码
const printCode = () => {
  if (!generatedCodeUrl.value) {
    ElMessage.warning('请先生成码')
    return
  }
  
  const printWindow = window.open('', '_blank')
  printWindow.document.write(`
    <html>
      <head>
        <title>打印${form.type === 'qrcode' ? '二维码' : '防伪码'}</title>
        <style>
          body { text-align: center; padding: 20px; }
          img { max-width: 100%; height: auto; }
          .info { margin: 20px 0; }
        </style>
      </head>
      <body>
        <h2>${form.type === 'qrcode' ? '二维码' : '防伪码'}</h2>
        <img src="${generatedCodeUrl.value}" alt="${form.type === 'qrcode' ? '二维码' : '防伪码'}" />
        <div class="info">
          <p><strong>内容：</strong>${form.content}</p>
          <p><strong>生成时间：</strong>${generateTime.value}</p>
        </div>
      </body>
    </html>
  `)
  printWindow.document.close()
  printWindow.print()
}

// é‡ç½®è¡¨å•
const resetForm = () => {
  formRef.value.resetFields()
  generatedCodeUrl.value = ''
  generateTime.value = ''
  batchCodes.value = []
}

// æ‰¹é‡ç”Ÿæˆ
const generateBatchCodes = async () => {
  if (!batchForm.prefix.trim()) {
    ElMessage.warning('请输入前缀')
    return
  }
  
  batchCodes.value = []
  generating.value = true
  
  try {
    for (let i = 0; i < batchForm.quantity; i++) {
      const number = batchForm.startNumber + i
      const content = `${batchForm.prefix}${number.toString().padStart(6, '0')}`
      
      let codeUrl
      if (form.type === 'qrcode') {
        codeUrl = await QRCode.toDataURL(content, {
          width: form.size,
          margin: form.margin,
          color: {
            dark: form.foregroundColor,
            light: form.backgroundColor
          }
        })
      } else {
        const securityContent = generateSecurityCode(content)
        codeUrl = await QRCode.toDataURL(securityContent, {
          width: form.size,
          margin: form.margin,
          color: {
            dark: form.foregroundColor,
            light: form.backgroundColor
          }
        })
      }
      
      batchCodes.value.push({
        content,
        url: codeUrl
      })
    }
    
    ElMessage.success(`批量生成完成，共生成 ${batchForm.quantity} ä¸ªç `)
    batchDialogVisible.value = false
    
  } catch (error) {
    console.error('批量生成失败:', error)
    ElMessage.error('批量生成失败：' + error.message)
  } finally {
    generating.value = false
  }
}

// ä¸‹è½½å•ä¸ªæ‰¹é‡ç”Ÿæˆçš„码
const downloadSingleCode = (code) => {
  const a = document.createElement('a')
  a.href = code.url
  a.download = `${code.content}.png`
  document.body.appendChild(a)
  a.click()
  document.body.removeChild(a)
}

// ä¸‹è½½æ‰€æœ‰æ‰¹é‡ç”Ÿæˆçš„码
const downloadAllCodes = async () => {
  if (batchCodes.value.length === 0) {
    ElMessage.warning('没有可下载的码')
    return
  }
  
  try {
    // ä½¿ç”¨JSZip打包下载
    const JSZip = await import('jszip')
    const zip = new JSZip.default()
    
    batchCodes.value.forEach((code, index) => {
      // å°†base64转换为blob
      const base64Data = code.url.split(',')[1]
      const byteCharacters = atob(base64Data)
      const byteNumbers = new Array(byteCharacters.length)
      for (let i = 0; i < byteCharacters.length; i++) {
        byteNumbers[i] = byteCharacters.charCodeAt(i)
      }
      const byteArray = new Uint8Array(byteNumbers)
      
      zip.file(`${code.content}.png`, byteArray)
    })
    
    const content = await zip.generateAsync({ type: 'blob' })
    const a = document.createElement('a')
    a.href = URL.createObjectURL(content)
    a.download = `批量${form.type === 'qrcode' ? '二维码' : '防伪码'}_${new Date().getTime()}.zip`
    document.body.appendChild(a)
    a.click()
    document.body.removeChild(a)
    URL.revokeObjectURL(a.href)
    
    ElMessage.success('批量下载完成！')
  } catch (error) {
    console.error('批量下载失败:', error)
    ElMessage.error('批量下载失败，请逐个下载')
  }
}

// æ¸…空批量生成结果
const clearBatchCodes = () => {
  batchCodes.value = []
}

// æš´éœ²æ–¹æ³•ç»™çˆ¶ç»„件
defineExpose({
  generateCode,
  downloadCode,
  resetForm,
  form
})
</script>

<style scoped>
.qr-code-generator {
  padding: 20px;
}

.qr-form {
  background: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
}

.code-display {
  margin-top: 30px;
}

.code-container {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 40px;
  margin: 20px 0;
}

.code-image img {
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.code-info {
  text-align: left;
  min-width: 200px;
}

.code-info p {
  margin: 8px 0;
  color: #666;
}

.code-actions {
  text-align: center;
  margin: 20px 0;
}

.code-actions .el-button {
  margin: 0 10px;
}

.batch-results {
  margin-top: 30px;
}

.batch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 20px;
  margin: 20px 0;
}

.batch-item {
  text-align: center;
  padding: 15px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background: #fff;
}

.batch-item img {
  width: 100px;
  height: 100px;
  margin-bottom: 10px;
}

.batch-content {
  font-size: 12px;
  color: #666;
  margin: 10px 0;
  word-break: break-all;
}

.batch-actions {
  text-align: center;
  margin: 20px 0;
}

.batch-actions .el-button {
  margin: 0 10px;
}

@media (max-width: 768px) {
  .code-container {
    flex-direction: column;
    align-items: center;
  }
  
  .batch-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  }
}
</style>

 src/layout/components/Sidebar/Logo.vue

@@ -16,7 +16,7 @@
<script setup>

import { ref, computed, onMounted, watch } from 'vue'

import useUserStore from '@/store/modules/user'

import defaultLogo from '@/assets/logo/logo.png' // å¯¼å…¥é»˜è®¤logo

import defaultLogo from '@/assets/indexViews/ZQHXLogo.png' // å¯¼å…¥é»˜è®¤logo



defineProps({

  collapse: {


 src/layout/components/Sidebar/index.vue

@@ -30,7 +30,6 @@
const sideTheme = computed(() => settingsStore.sideTheme)

const theme = computed(() => settingsStore.theme)

const isCollapse = computed(() => !appStore.sidebar.opened)

console.log(44444, settingsStore.isDark, sideTheme.value)



// èŽ·å–菜单背景色

const getMenuBackground = computed(() => {


 src/main.js

@@ -76,7 +76,7 @@
app.config.globalProperties.addDateRange = addDateRange;

app.config.globalProperties.selectDictLabel = selectDictLabel;

app.config.globalProperties.selectDictLabels = selectDictLabels;

app.config.globalProperties.javaApi = "http://114.132.189.42:7004";

app.config.globalProperties.javaApi = "http://114.132.189.42:8099";

app.config.globalProperties.HaveJson = (val) => {

  return JSON.parse(JSON.stringify(val));

};


 src/permission.js

@@ -1,76 +1,69 @@
import router from "./router";

import { ElMessage } from "element-plus";

import NProgress from "nprogress";

import "nprogress/nprogress.css";

import { getToken } from "@/utils/auth";

import { isHttp, isPathMatch } from "@/utils/validate";

import { isRelogin } from "@/utils/request";

import useUserStore from "@/store/modules/user";

import useSettingsStore from "@/store/modules/settings";

import usePermissionStore from "@/store/modules/permission";

import router from './router'

import { ElMessage } from 'element-plus'

import NProgress from 'nprogress'

import 'nprogress/nprogress.css'

import { getToken } from '@/utils/auth'

import { isHttp, isPathMatch } from '@/utils/validate'

import { isRelogin } from '@/utils/request'

import useUserStore from '@/store/modules/user'

import useSettingsStore from '@/store/modules/settings'

import usePermissionStore from '@/store/modules/permission'



NProgress.configure({ showSpinner: false });

NProgress.configure({ showSpinner: false })



const whiteList = ["/login", "/register", "/device-info"];

const whiteList = ['/login', '/register', '/callbacklccpn']



const isWhiteList = (path) => {

  return whiteList.some((pattern) => isPathMatch(pattern, path));

};

  return whiteList.some(pattern => isPathMatch(pattern, path))

}



router.beforeEach((to, from, next) => {

  NProgress.start();

  NProgress.start()

  if (getToken()) {

    to.meta.title && useSettingsStore().setTitle(to.meta.title);

    to.meta.title && useSettingsStore().setTitle(to.meta.title)

    /* has token*/

    if (to.path === "/login") {

      next({ path: "/" });

      NProgress.done();

    if (to.path === '/login') {

      next({ path: '/' })

      NProgress.done()

    } else if (isWhiteList(to.path)) {

      next();

      next()

    } else {

      if (useUserStore().roles.length === 0) {

        isRelogin.show = true;

        isRelogin.show = true

        // åˆ¤æ–­å½“前用户是否已拉取完user_info信息

        useUserStore()

          .getInfo()

          .then(() => {

            isRelogin.show = false;

            usePermissionStore()

              .generateRoutes()

              .then((accessRoutes) => {

                // æ ¹æ®roles权限生成可访问的路由表

                accessRoutes.forEach((route) => {

                  if (!isHttp(route.path)) {

                    router.addRoute(route); // åŠ¨æ€æ·»åŠ å¯è®¿é—®è·¯ç”±è¡¨

                  }

                });

                next({ ...to, replace: true }); // hack方法 ç¡®ä¿addRoutes已完成

              });

        useUserStore().getInfo().then(() => {

          isRelogin.show = false

          usePermissionStore().generateRoutes().then(accessRoutes => {

            // æ ¹æ®roles权限生成可访问的路由表

            accessRoutes.forEach(route => {

              if (!isHttp(route.path)) {

                router.addRoute(route) // åŠ¨æ€æ·»åŠ å¯è®¿é—®è·¯ç”±è¡¨

              }

            })

            next({ ...to, replace: true }) // hack方法 ç¡®ä¿addRoutes已完成

          })

          .catch((err) => {

            useUserStore()

              .logOut()

              .then(() => {

                ElMessage.error(err);

                next({ path: "/" });

              });

          });

        }).catch(err => {

          useUserStore().logOut().then(() => {

            ElMessage.error(err)

            next({ path: '/' })

          })

        })

      } else {

        next();

        next()

      }

    }

  } else {

    // æ²¡æœ‰token

    if (isWhiteList(to.path)) {

      // åœ¨å…ç™»å½•ç™½åå•ï¼Œç›´æŽ¥è¿›å…¥

      next();

      next()

    } else {

      next(`/login?redirect=${to.fullPath}`); // å¦åˆ™å…¨éƒ¨é‡å®šå‘到登录页

      NProgress.done();

      next(`/login?redirect=${to.fullPath}`) // å¦åˆ™å…¨éƒ¨é‡å®šå‘到登录页

      NProgress.done()

    }

  }

});

})



router.afterEach(() => {

  NProgress.done();

});

  NProgress.done()

})


 src/router/index.js

@@ -43,6 +43,11 @@
    hidden: true
  },
  {
    path: "/callbacklccpn",
    component: () => import("@/views/tideLogin.vue"),
    hidden: true,
  },
  {
    path: '/register',
    component: () => import('@/views/register'),
    hidden: true
@@ -68,6 +73,20 @@
        component: () => import('@/views/index'),
        name: 'Index',
        meta: { title: '首页', icon: 'dashboard', affix: true }
      }
    ]
  },
  {
    path: '/main/MobileChat',
    component: Layout,
    redirect: '',
    hidden: true,
    children: [
      {
        path: '',
        component: () => import('@/views/chatHome/chatHomeIndex/MobileChat'),
        name: 'MobileChat',
        meta: { title: 'AI对话', icon: 'dashboard', affix: true}
      }
    ]
  },
@@ -100,21 +119,6 @@
        component: () => import('@/views/system/user/authRole'),
        name: 'AuthRole',
        meta: { title: '分配角色', activeMenu: '/system/user' }
      }
    ]
  },
  {
    path: '/main/MobileChat',
    component: Layout,
    redirect: '',
    hidden: true,
    permissions: ['MobileChat:edit'],
    children: [
      {
        path: '',
        component: () => import('@/views/chatHome/chatHomeIndex/MobileChat'),
        name: 'MobileChat',
        meta: { title: 'AI对话', activeMenu: '/chatHome/chatHomeIndex'}
      }
    ]
  },

 src/store/modules/user.js

@@ -1,4 +1,4 @@
import {login, logout, getInfo, loginCheck, loginCheckFactory} from '@/api/login'

import {login, logout, getInfo, loginCheck, loginCheckFactory,tideLogin} from '@/api/login'

import { getToken, setToken, removeToken } from '@/utils/auth'

import { isHttp, isEmpty } from "@/utils/validate"

import defAva from '@/assets/images/profile.jpg'

@@ -109,6 +109,22 @@
          })

        })

      },

      TideLogin(code) {

        return new Promise((resolve, reject) => {

          tideLogin(code)

              .then((res) => {

                setToken(res.token);

                this.token = res.token

                Vue.prototype.uploadHeader = {

                  Authorization: "Bearer " + res.token,

                };

                resolve();

              })

              .catch((error) => {

                reject(error);

              });

        });

      },

    }

  })




 src/views/basicData/customerFile/index.vue

@@ -92,25 +92,6 @@
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30" v-for="(contact, index) in formYYs.contactList" :key="index">
          <el-col :span="12">
            <el-form-item label="联系人：" prop="contactPerson">
              <el-input v-model="contact.contactPerson" placeholder="请输入" clearable  />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系电话：" prop="contactPhone">
              <div style="display: flex; align-items: center;width: 100%;">
                <el-input v-model="contact.contactPhone" placeholder="请输入" clearable />
                <el-button   @click="removeContact(index)" type="danger" circle style="margin-left: 5px;">
                  <el-icon><Close /></el-icon>
                </el-button>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-button @click="addNewContact" style="margin-bottom: 10px;">+ æ–°å¢žè”系人</el-button>

        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="银行基本户：" prop="basicBankAccount">
@@ -142,6 +123,24 @@
            </el-form-item>
          </el-col>
        </el-row>
                <el-row :gutter="30" v-for="(contact, index) in formYYs.contactList" :key="index">
                    <el-col :span="12">
                        <el-form-item label="联系人：" prop="contactPerson">
                            <el-input v-model="contact.contactPerson" placeholder="请输入" clearable  />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="联系电话：" prop="contactPhone">
                            <div style="display: flex; align-items: center;width: 100%;">
                                <el-input v-model="contact.contactPhone" placeholder="请输入" clearable />
                                <el-button   @click="removeContact(index)" type="danger" circle style="margin-left: 5px;">
                                    <el-icon><Close /></el-icon>
                                </el-button>
                            </div>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-button @click="addNewContact" style="margin-bottom: 10px;">+ æ–°å¢žè”系人</el-button>
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="维护人：" prop="maintainer">

 src/views/collaborativeApproval/attendanceManagement/index.vue

@@ -25,8 +25,8 @@
            </el-table-column>
            <el-table-column label="操作" fixed="right">
              <template #default="scope">
                <el-button type="primary" size="small" @click="openDialog('holiday', 'edit', scope.row)">编辑</el-button>
                <el-button type="danger" size="small" @click="deleteItem('holiday', scope.row)">删除</el-button>
                <el-button type="primary" link @click="openDialog('holiday', 'edit', scope.row)">编辑</el-button>
                <el-button type="danger" link @click="deleteItem('holiday', scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
@@ -52,8 +52,8 @@
            </el-table-column>
            <el-table-column label="操作" fixed="right">
              <template #default="scope">
                <el-button type="primary" size="small" @click="openDialog('annual', 'edit', scope.row)">编辑</el-button>
                <el-button type="danger" size="small" @click="deleteItem('annual', scope.row)">删除</el-button>
                <el-button type="primary" link @click="openDialog('annual', 'edit', scope.row)">编辑</el-button>
                <el-button type="danger" link @click="deleteItem('annual', scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
@@ -84,8 +84,8 @@
            </el-table-column>
            <el-table-column label="操作" fixed="right">
              <template #default="scope">
                <el-button type="primary" size="small" @click="openDialog('overtime', 'edit', scope.row)">编辑</el-button>
                <el-button type="danger" size="small" @click="deleteItem('overtime', scope.row)">删除</el-button>
                <el-button type="primary" link @click="openDialog('overtime', 'edit', scope.row)">编辑</el-button>
                <el-button type="danger" link @click="deleteItem('overtime', scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
@@ -118,8 +118,8 @@
            </el-table-column>
            <el-table-column label="操作" fixed="right">
              <template #default="scope">
                <el-button type="primary" size="small" @click="openDialog('worktime', 'edit', scope.row)">编辑</el-button>
                <el-button type="danger" size="small" @click="deleteItem('worktime', scope.row)">删除</el-button>
                <el-button type="primary" link @click="openDialog('worktime', 'edit', scope.row)">编辑</el-button>
                <el-button type="danger" link @click="deleteItem('worktime', scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
@@ -353,9 +353,9 @@

// æ¨¡æ‹Ÿæ•°æ®
const holidayData = ref([
  { id: '1', name: '春节', type: 'legal', startDate: '2024-02-10', endDate: '2024-02-17', days: 8, status: 'active' },
  { id: '2', name: '清明节', type: 'legal', startDate: '2024-04-05', endDate: '2024-04-05', days: 1, status: 'active' },
  { id: '3', name: '劳动节', type: 'legal', startDate: '2024-05-01', endDate: '2024-05-05', days: 5, status: 'active' }
  { id: '1', name: '春节', type: 'legal', startDate: '2025-02-10', endDate: '2025-02-17', days: 8, status: 'active' },
  { id: '2', name: '清明节', type: 'legal', startDate: '2025-04-05', endDate: '2025-04-05', days: 1, status: 'active' },
  { id: '3', name: '劳动节', type: 'legal', startDate: '2025-05-01', endDate: '2025-05-05', days: 5, status: 'active' }
])

const annualData = ref([

 src/views/collaborativeApproval/knowledgeBase/index.vue

@@ -410,9 +410,9 @@
    problem: "大额合同审批流程复杂，审批时间长，影响业务进展",
    solution: "建立绿色通道，对符合条件的合同采用简化审批流程，由部门负责人直接审批，平均审批时间从3天缩短至1天",
    keyPoints: "绿色通道条件,简化流程,审批权限,时间控制",
    creator: "张经理",
    creator: "陈志强",
    usageCount: 15,
    createTime: "2024-01-15 10:30:00"
    createTime: "2025-01-15 10:30:00"
  },
  {
    id: "2",
@@ -425,7 +425,7 @@
    keyPoints: "项目协调,定期会议,统一意见,负责人制度",
    creator: "李主管",
    usageCount: 8,
    createTime: "2024-01-14 15:20:00"
    createTime: "2025-01-14 15:20:00"
  },
  {
    id: "3",
@@ -438,7 +438,7 @@
    keyPoints: "紧急分级,标准制定,流程简化,及时处理",
    creator: "王专员",
    usageCount: 12,
    createTime: "2024-01-13 09:15:00"
    createTime: "2025-01-13 09:15:00"
  }
];

@@ -488,7 +488,7 @@
    problem: `在${randomScenario}过程中遇到的问题描述...`,
    solution: `针对${randomScenario}的解决方案和操作步骤...`,
    keyPoints: "关键要点1,关键要点2,关键要点3,关键要点4",
    creator: ["张经理", "李主管", "王专员", "刘总监"][Math.floor(Math.random() * 4)],
          creator: ["陈志强", "刘雅婷", "王建国", "赵丽华"][Math.floor(Math.random() * 4)],
    usageCount: Math.floor(Math.random() * 20) + 1,
    createTime: now.toLocaleString()
  };

 src/views/collaborativeApproval/meetingBoard/index.vue

@@ -161,11 +161,11 @@
    id: 1,
    title: '产品开发周会',
    status: 'ongoing',
    startTime: '2024-01-15 09:00:00',
    endTime: '2024-01-15 10:30:00',
    startTime: '2025-01-15 09:00:00',
    endTime: '2025-01-15 10:30:00',
    location: '会议室A',
    host: '张经理',
    participants: ['张经理', '李工程师', '王设计师', '赵测试员'],
    host: '陈志强',
    participants: ['陈志强', '刘雅婷', '王建国', '赵丽华'],
    agenda: [
      { time: '09:00-09:15', content: '上周工作总结', status: 'completed' },
      { time: '09:15-09:45', content: '本周开发计划', status: 'active' },
@@ -177,11 +177,11 @@
    id: 2,
    title: '客户需求评审会',
    status: 'upcoming',
    startTime: '2024-01-15 14:00:00',
    endTime: '2024-01-15 15:00:00',
    startTime: '2025-01-15 14:00:00',
    endTime: '2025-01-15 15:00:00',
    location: '线上会议',
    host: '陈总监',
    participants: ['陈总监', '刘产品经理', '孙客户经理', '客户代表'],
    host: '陈志强',
    participants: ['陈志强', '刘雅婷', '孙明华', '客户代表'],
    agenda: [
      { time: '14:00-14:20', content: '需求背景介绍', status: 'pending' },
      { time: '14:20-14:40', content: '功能需求分析', status: 'pending' },
@@ -192,8 +192,8 @@
    id: 3,
    title: '团队建设活动',
    status: 'completed',
    startTime: '2024-01-14 16:00:00',
    endTime: '2024-01-14 18:00:00',
    startTime: '2025-01-14 16:00:00',
    endTime: '2025-01-14 18:00:00',
    location: '公司大厅',
    host: '人事部',
    participants: ['全体员工'],

 src/views/collaborativeApproval/noticeManagement/index.vue

@@ -2,30 +2,30 @@
  <div class="app-container">
    <!-- æœç´¢è¡¨å• -->
    <div class="search_form">
      <!--      <div>-->
      <!--        <span class="search_title">公告标题：</span>-->
      <!--        <el-input-->
      <!--            v-model="searchForm.title"-->
      <!--            style="width: 240px"-->
      <!--            placeholder="请输入公告标题搜索"-->
      <!--            @change="handleQuery"-->
      <!--            clearable-->
      <!--            :prefix-icon="Search"-->
      <!--        />-->
      <!--        <span class="search_title ml10">公告类型：</span>-->
      <!--        <el-select v-model="searchForm.type" clearable @change="handleQuery" style="width: 240px">-->
      <!--          <el-option label="放假通知" :value="1"/>-->
      <!--          <el-option label="设备维修通知" :value="2"/>-->
      <!--        </el-select>-->
      <!--        <span class="search_title ml10">状态：</span>-->
      <!--        <el-select v-model="searchForm.status" clearable @change="handleQuery" style="width: 240px">-->
      <!--          <el-option label="草稿" :value="0"/>-->
      <!--          <el-option label="已发布" :value="1"/>-->
      <!--          <el-option label="已下线" :value="2"/>-->
      <!--        </el-select>-->
      <!--        <el-button type="primary" @click="handleQuery" style="margin-left: 10px">搜索</el-button>-->
      <!--        <el-button @click="resetQuery" style="margin-left: 10px">重置</el-button>-->
      <!--      </div>-->
      <div>
        <span class="search_title">公告标题：</span>
        <el-input
          v-model="searchForm.noticeTitle"
          style="width: 240px"
          placeholder="请输入公告标题搜索"
          @change="handleQuery"
          clearable
          :prefix-icon="Search"
        />
        <span class="search_title ml10">公告类型：</span>
        <el-select v-model="searchForm.noticeType" clearable @change="handleQuery" style="width: 240px">
          <el-option label="放假通知" value="1" />
          <el-option label="设备维修通知" value="2" />
        </el-select>
        <span class="search_title ml10">状态：</span>
        <el-select v-model="searchForm.status" clearable @change="handleQuery" style="width: 240px">
          <el-option label="草稿" value="0" />
          <el-option label="已发布" value="1" />
          <el-option label="已下线" value="2" />
        </el-select>
        <el-button type="primary" @click="handleQuery" style="margin-left: 10px">搜索</el-button>
        <el-button @click="resetQuery" style="margin-left: 10px">重置</el-button>
      </div>
      <div>
        <el-button type="primary" @click="openForm('add')">新增公告</el-button>
        <el-button type="danger" plain @click="handleDelete" :disabled="!selectedIds.length">删除</el-button>
@@ -35,24 +35,22 @@
    <!-- é€šçŸ¥å…¬å‘Šæ¿ -->
    <div class="notice-board">
      <!-- æ”¾å‡é€šçŸ¥åŒºåŸŸ -->
      <div class="notice-section" v-if="holidayNoticeCount > 0">
      <div class="notice-section" v-if="holidayNotices.length > 0">
        <div class="section-header">
          <h3>📅 æ”¾å‡é€šçŸ¥</h3>
          <span class="section-count">{{ holidayNoticeCount }}条</span>
          <span class="section-count">{{ holidayNotices.length }}条</span>
        </div>
        <div class="notice-cards">
          <div
              v-for="notice in holidayNotices"
              :key="notice.id"
              class="notice-card holiday-card"
              :class="{ 'urgent': notice.priority === '3' }"
          <div 
            v-for="notice in holidayNotices" 
            :key="notice.id"
            class="notice-card holiday-card"
            :class="{ 'urgent': notice.priority === '3' }"
          >
            <div class="card-header">
              <div class="card-title">
                <el-icon class="holiday-icon">
                  <Calendar/>
                </el-icon>
                {{ notice.title }}
                <el-icon class="holiday-icon"><Calendar /></el-icon>
                {{ notice.noticeTitle }}
              </div>
              <div class="card-actions">
                <el-button link type="primary" @click="handleEdit(notice)">编辑</el-button>
@@ -60,7 +58,7 @@
              </div>
            </div>
            <div class="card-content">
              <p>{{ notice.content }}</p>
              <p>{{ notice.noticeContent }}</p>
            </div>
            <div class="card-footer">
              <div class="card-meta">
@@ -72,47 +70,35 @@
                </span>
              </div>
              <div class="card-info">
                <span class="creator">{{ notice.createUserName }}</span>
                <span class="creator">{{ notice.createBy }}</span>
                <span class="time">{{ notice.createTime }}</span>
              </div>
            </div>
            <div class="card-remark" v-if="notice.remark">
              <el-icon>
                <InfoFilled/>
              </el-icon>
              <el-icon><InfoFilled /></el-icon>
              <span>{{ notice.remark }}</span>
            </div>
          </div>
        </div>
      </div>

      <pagination
          v-if="holidayNoticePage.total > 0"
          :total="holidayNoticePage.total"
          :page="holidayNoticePage.current"
          :limit="holidayNoticePage.size"
          @pagination="handleHolidayNoticeCurrentChange"
      />

      <!-- è®¾å¤‡ç»´ä¿®é€šçŸ¥åŒºåŸŸ -->
      <div class="notice-section" v-if="maintenanceNoticeCount > 0">
      <div class="notice-section" v-if="maintenanceNotices.length > 0">
        <div class="section-header">
          <h3>🔧 è®¾å¤‡ç»´ä¿®é€šçŸ¥</h3>
          <span class="section-count">{{ maintenanceNoticeCount }}条</span>
          <span class="section-count">{{ maintenanceNotices.length }}条</span>
        </div>
        <div class="notice-cards">
          <div
              v-for="notice in maintenanceNotices"
              :key="notice.id"
              class="notice-card maintenance-card"
              :class="{ 'urgent': notice.priority === '3' }"
          <div 
            v-for="notice in maintenanceNotices" 
            :key="notice.id"
            class="notice-card maintenance-card"
            :class="{ 'urgent': notice.priority === '3' }"
          >
            <div class="card-header">
              <div class="card-title">
                <el-icon class="maintenance-icon">
                  <Tools/>
                </el-icon>
                {{ notice.title }}
                <el-icon class="maintenance-icon"><Tools /></el-icon>
                {{ notice.noticeTitle }}
              </div>
              <div class="card-actions">
                <el-button link type="primary" @click="handleEdit(notice)">编辑</el-button>
@@ -120,7 +106,7 @@
              </div>
            </div>
            <div class="card-content">
              <p>{{ notice.content }}</p>
              <p>{{ notice.noticeContent }}</p>
            </div>
            <div class="card-footer">
              <div class="card-meta">
@@ -132,54 +118,44 @@
                </span>
              </div>
              <div class="card-info">
                <span class="creator">{{ notice.createUserName }}</span>
                <span class="creator">{{ notice.createBy }}</span>
                <span class="time">{{ notice.createTime }}</span>
              </div>
            </div>
            <div class="card-remark" v-if="notice.remark">
              <el-icon>
                <InfoFilled/>
              </el-icon>
              <el-icon><InfoFilled /></el-icon>
              <span>{{ notice.remark }}</span>
            </div>
          </div>
        </div>
      </div>

      <pagination
          v-if="maintenanceNoticePage.total > 0"
          :total="maintenanceNoticePage.total"
          :page="maintenanceNoticePage.current"
          :limit="maintenanceNoticePage.size"
          @pagination="handleMaintenanceNoticeCurrentChange"
      />

      <!-- ç©ºçŠ¶æ€ -->
      <div class="empty-state" v-if="holidayNotices.length === 0 && maintenanceNotices.length === 0">
        <el-empty description="暂无通知公告"/>
      <div class="empty-state" v-if="filteredNotices.length === 0">
        <el-empty description="暂无通知公告" />
      </div>
    </div>

    <!-- æ–°å¢ž/编辑对话框 -->
    <el-dialog
        :title="dialogTitle"
        v-model="dialogVisible"
        width="800px"
        append-to-body
        @close="resetForm"
    <el-dialog 
      :title="dialogTitle" 
      v-model="dialogVisible" 
      width="800px" 
      append-to-body
      @close="resetForm"
    >
      <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="公告标题" prop="title">
              <el-input v-model="form.title" placeholder="请输入公告标题"/>
            <el-form-item label="公告标题" prop="noticeTitle">
              <el-input v-model="form.noticeTitle" placeholder="请输入公告标题" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="公告类型" prop="type">
              <el-select v-model="form.type" placeholder="请选择公告类型" style="width: 100%">
                <el-option label="放假通知" :value="1"/>
                <el-option label="设备维修通知" :value="2"/>
            <el-form-item label="公告类型" prop="noticeType">
              <el-select v-model="form.noticeType" placeholder="请选择公告类型" style="width: 100%">
                <el-option label="放假通知" value="1" />
                <el-option label="设备维修通知" value="2" />
              </el-select>
            </el-form-item>
          </el-col>
@@ -188,18 +164,18 @@
          <el-col :span="12">
            <el-form-item label="状态">
              <el-radio-group v-model="form.status">
                <el-radio :value="0">草稿</el-radio>
                <el-radio :value="1">已发布</el-radio>
                <el-radio :value="2">已下线</el-radio>
                <el-radio value="0">草稿</el-radio>
                <el-radio value="1">已发布</el-radio>
                <el-radio value="2">已下线</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="优先级">
              <el-select v-model="form.priority" placeholder="请选择优先级" style="width: 100%">
                <el-option label="普通" :value="1"/>
                <el-option label="重要" :value="2"/>
                <el-option label="紧急" :value="3"/>
                <el-option label="普通" value="1" />
                <el-option label="重要" value="2" />
                <el-option label="紧急" value="3" />
              </el-select>
            </el-form-item>
          </el-col>
@@ -208,12 +184,12 @@
          <el-col :span="24">
            <el-form-item label="公告内容" prop="noticeContent">
              <el-input
                  v-model="form.content"
                  type="textarea"
                  :rows="6"
                  placeholder="请输入公告内容"
                  maxlength="500"
                  show-word-limit
                v-model="form.noticeContent"
                type="textarea"
                :rows="6"
                placeholder="请输入公告内容"
                maxlength="500"
                show-word-limit
              />
            </el-form-item>
          </el-col>
@@ -222,12 +198,12 @@
          <el-col :span="24">
            <el-form-item label="备注">
              <el-input
                  v-model="form.remark"
                  type="textarea"
                  :rows="3"
                  placeholder="请输入备注信息"
                  maxlength="200"
                  show-word-limit
                v-model="form.remark"
                type="textarea"
                :rows="3"
                placeholder="请输入备注信息"
                maxlength="200"
                show-word-limit
              />
            </el-form-item>
          </el-col>
@@ -244,51 +220,45 @@
</template>

<script setup>
import {Search, Calendar, Tools, InfoFilled} from "@element-plus/icons-vue";
import {onMounted, ref, reactive, toRefs, computed} from "vue";
import {ElMessage, ElMessageBox} from "element-plus";
import { Search, Calendar, Tools, InfoFilled } from "@element-plus/icons-vue";
import { onMounted, ref, reactive, toRefs, computed } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import useUserStore from "@/store/modules/user";
import {
  addNotice,
  delNotice,
  getCount,
  listNotice,
  updateNotice
} from "../../../api/collaborativeApproval/noticeManagement.js";
import pagination from "../../../components/PIMTable/Pagination.vue";

const userStore = useUserStore();

// å“åº”式数据
const data = reactive({
  searchForm: {
    title: "",
    type: undefined,
    status: undefined,
    noticeTitle: "",
    noticeType: "",
    status: "",
  },
  form: {
    id: undefined,
    title: "",
    type: null,
    content: "",
    status: 0,
    priority: 1,
    noticeTitle: "",
    noticeType: "",
    noticeContent: "",
    status: "0",
    priority: "1",
    remark: "",
    createBy: "",
    createTime: "",
  },
  rules: {
    title: [
      {required: true, message: "公告标题不能为空", trigger: "blur"}
    noticeTitle: [
      { required: true, message: "公告标题不能为空", trigger: "blur" }
    ],
    type: [
      {required: true, message: "请选择公告类型", trigger: "change"}
    noticeType: [
      { required: true, message: "请选择公告类型", trigger: "change" }
    ],
    content: [
      {required: true, message: "公告内容不能为空", trigger: "blur"}
    noticeContent: [
      { required: true, message: "公告内容不能为空", trigger: "blur" }
    ]
  }
});

const {searchForm, form, rules} = toRefs(data);
const { searchForm, form, rules } = toRefs(data);

// é¡µé¢çŠ¶æ€
const dialogVisible = ref(false);
@@ -296,28 +266,127 @@
const selectedIds = ref([]);
const formRef = ref();

// æ¨¡æ‹Ÿæ•°æ® - æ ¹æ®æ³•å®šèŠ‚假日设计
const mockData = [
  {
    id: 1,
    noticeTitle: "2024年春节放假通知",
    noticeType: "1",
    priority: "2",
    status: "1",
    noticeContent: "根据国务院办公厅通知，2024年春节放假安排如下：2月10日（初一）至2月17日（初八）放假调休，共8天。2月4日（星期日）、2月18日（星期日）上班。请各部门提前做好工作安排。",
    remark: "放假期间请保持手机畅通，如有紧急事务及时联系",
    createBy: "人事部",
    createTime: "2025-01-15 10:30:00"
  },
  {
    id: 2,
    noticeTitle: "2024年清明节放假通知",
    noticeType: "1",
    priority: "1",
    status: "1",
    noticeContent: "根据国务院办公厅通知，2024年清明节放假安排如下：4月4日（星期四）至4月6日（星期六）放假调休，共3天。4月7日（星期日）上班。",
    remark: "请各部门做好值班安排，确保节日期间各项工作正常运转",
    createBy: "行政部",
    createTime: "2025-01-14 14:20:00"
  },
  {
    id: 3,
    noticeTitle: "2024年劳动节放假通知",
    noticeType: "1",
    priority: "1",
    status: "1",
    noticeContent: "根据国务院办公厅通知，2024年劳动节放假安排如下：5月1日（星期三）至5月5日（星期日）放假调休，共5天。4月28日（星期日）、5月11日（星期六）上班。",
    remark: "放假前请关闭电源，锁好门窗，注意安全",
    createBy: "行政部",
    createTime: "2025-01-13 09:15:00"
  },
  {
    id: 4,
    noticeTitle: "2024年端午节放假通知",
    noticeType: "1",
    priority: "1",
    status: "1",
    noticeContent: "根据国务院办公厅通知，2024年端午节放假安排如下：6月8日（星期六）至6月10日（星期一）放假调休，共3天。6月11日（星期二）上班。",
    remark: "祝大家端午节快乐，阖家幸福！",
    createBy: "行政部",
    createTime: "2025-01-12 16:30:00"
  },
  {
    id: 5,
    noticeTitle: "2024年中秋节放假通知",
    noticeType: "1",
    priority: "1",
    status: "1",
    noticeContent: "根据国务院办公厅通知，2024年中秋节放假安排如下：9月15日（星期日）至9月17日（星期二）放假调休，共3天。9月14日（星期六）上班。",
    remark: "中秋佳节，祝大家团圆美满，幸福安康！",
    createBy: "行政部",
    createTime: "2025-01-11 11:20:00"
  },
  {
    id: 6,
    noticeTitle: "2024年国庆节放假通知",
    noticeType: "1",
    priority: "2",
    status: "1",
    noticeContent: "根据国务院办公厅通知，2024年国庆节放假安排如下：10月1日（星期二）至10月7日（星期一）放假调休，共7天。9月29日（星期日）、10月12日（星期六）上班。",
    remark: "国庆期间请各部门做好值班安排，确保安全稳定",
    createBy: "行政部",
    createTime: "2025-01-10 15:45:00"
  },
  {
    id: 7,
    noticeTitle: "A车间生产线年度检修通知",
    noticeType: "2",
    priority: "2",
    status: "1",
    noticeContent: "A车间生产线将于2024å¹´1月20日（周六）进行年度检修维护，预计停工8小时。检修内容包括：设备清洁、润滑保养、安全装置检查等。请生产部门提前调整生产计划。",
    remark: "维修期间请相关人员配合，确保检修工作安全顺利进行",
    createBy: "设备部",
    createTime: "2025-01-14 14:20:00"
  },
  {
    id: 8,
    noticeTitle: "B车间设备预防性维护通知",
    noticeType: "2",
    priority: "1",
    status: "1",
    noticeContent: "B车间关键设备将于2024å¹´1月25日进行预防性维护，预计停工4小时。维护内容包括：设备检查、零件更换、性能测试等。请相关部门配合。",
    remark: "维护完成后将进行试运行，确保设备正常运行",
    createBy: "设备部",
    createTime: "2025-01-13 09:15:00"
  }
];

// è®¡ç®—属性
const filteredNotices = computed(() => {
  let filtered = [...mockData];

  
  if (searchForm.value.noticeTitle) {
    filtered = filtered.filter(item =>
        item.noticeTitle.includes(searchForm.value.noticeTitle)
    filtered = filtered.filter(item => 
      item.noticeTitle.includes(searchForm.value.noticeTitle)
    );
  }
  if (searchForm.value.noticeType) {
    filtered = filtered.filter(item =>
        item.noticeType === searchForm.value.noticeType
    filtered = filtered.filter(item => 
      item.noticeType === searchForm.value.noticeType
    );
  }
  if (searchForm.value.status !== "") {
    filtered = filtered.filter(item =>
        item.status === searchForm.value.status
    filtered = filtered.filter(item => 
      item.status === searchForm.value.status
    );
  }

  
  return filtered;
});

const holidayNotices = computed(() => {
  return filteredNotices.value.filter(notice => notice.noticeType === "1");
});

const maintenanceNotices = computed(() => {
  return filteredNotices.value.filter(notice => notice.noticeType === "2");
});

// æ–¹æ³•å®šä¹‰
@@ -327,19 +396,19 @@

const resetQuery = () => {
  searchForm.value = {
    title: "",
    type: "",
    noticeTitle: "",
    noticeType: "",
    status: ""
  };
};

const getPriorityText = (priority) => {
  const priorityMap = {"1": "普通", "2": "重要", "3": "紧急"};
  const priorityMap = { "1": "普通", "2": "重要", "3": "紧急" };
  return priorityMap[priority] || "普通";
};

const getStatusText = (status) => {
  const statusMap = {"0": "草稿", "1": "已发布", "2": "已下线"};
  const statusMap = { "0": "草稿", "1": "已发布", "2": "已下线" };
  return statusMap[status] || "未知";
};

@@ -348,12 +417,14 @@
    dialogTitle.value = "新增公告";
    form.value = {
      id: undefined,
      title: "",
      type: undefined,
      content: "",
      status: 0,
      priority: 1,
      noticeTitle: "",
      noticeType: "",
      noticeContent: "",
      status: "0",
      priority: "1",
      remark: "",
      createBy: userStore.name || "当前用户",
      createTime: new Date().toLocaleString()
    };
  }
  dialogVisible.value = true;
@@ -361,24 +432,29 @@

const handleEdit = (row) => {
  dialogTitle.value = "编辑公告";
  form.value = {...row};
  form.value = { ...row };
  dialogVisible.value = true;
};

const handleSelectionChange = (selection) => {
  selectedIds.value = selection.map(item => item.id);
};

const handleDelete = (id) => {
  ElMessageBox.confirm(
      "确认删除这条公告吗？",
      "提示",
      {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }
    "确认删除这条公告吗？",
    "提示",
    {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning"
    }
  ).then(() => {
    delNotice(id).then(res => {
    const index = mockData.findIndex(item => item.id === id);
    if (index > -1) {
      mockData.splice(index, 1);
      ElMessage.success("删除成功");
      resetTable()
    })
    }
  });
};

@@ -387,83 +463,25 @@
    if (valid) {
      if (form.value.id) {
        // ç¼–辑模式
        updateNotice(form.value).then(res => {
          ElMessage.success("修改成功");
          resetTable()
        })
        const index = mockData.findIndex(item => item.id === form.value.id);
        if (index > -1) {
          mockData[index] = { ...form.value };
        }
        ElMessage.success("修改成功");
      } else {
        // æ–°å¢žæ¨¡å¼
        addNotice(form.value).then(res => {
          ElMessage.success("新增成功");
          resetTable()
        })
        const newId = Math.max(...mockData.map(item => item.id)) + 1;
        const newNotice = {
          ...form.value,
          id: newId,
          createTime: new Date().toLocaleString()
        };
        mockData.unshift(newNotice);
        ElMessage.success("新增成功");
      }
      dialogVisible.value = false;
    }
  });
};

const holidayNoticeCount = ref()
const maintenanceNoticeCount = ref()
const fetchCount = () => {
  getCount().then(res => {
    holidayNoticeCount.value = res.data.filter(item => {
      return item.type === 1
    })[0].count;
    maintenanceNoticeCount.value = res.data.filter(item => {
      return item.type === 2
    })[0].count;
  });
}

const holidayNotices = ref([])
const maintenanceNotices = ref([])
const holidayNoticePage = ref({
  total: 0,
  current: 1,
  size: 6
})

const maintenanceNoticePage = ref({
  total: 0,
  current: 1,
  size: 6
})

const fetchHolidayNotices = () => {
  listNotice({...holidayNoticePage.value, type: 1}).then(res => {
    holidayNotices.value = res.data.records
    holidayNoticePage.value.total = res.data.total
  });
};

const fetchMaintenanceNotices = () => {
  listNotice({...holidayNoticePage.value, type: 2}).then(res => {
    maintenanceNotices.value = res.data.records
    maintenanceNoticePage.value.total = res.data.total
  });
};

const handleHolidayNoticeCurrentChange = (val) => {
  holidayNoticePage.value.size = val.limit
  holidayNoticePage.value.current = val.page
  fetchHolidayNotices()
};

const handleMaintenanceNoticeCurrentChange = (val) => {
  maintenanceNoticePage.value.size = val.limit
  maintenanceNoticePage.value.current = val.page
  fetchMaintenanceNotices()
};

const resetTable = () => {
  holidayNoticePage.value.current = 1
  holidayNoticePage.value.size = 6
  maintenanceNoticePage.value.current = 1
  maintenanceNoticePage.value.size = 6
  fetchHolidayNotices()
  fetchMaintenanceNotices()
  fetchCount()
};

const resetForm = () => {
@@ -472,9 +490,7 @@

// ç”Ÿå‘½å‘¨æœŸ
onMounted(() => {
  fetchCount()
  fetchHolidayNotices()
  fetchMaintenanceNotices()
  // é¡µé¢åŠ è½½å®Œæˆ
});
</script>

@@ -629,35 +645,13 @@
  font-weight: 500;
}

.priority-1 {
  background: #f0f9ff;
  color: #0369a1;
}
.priority-1 { background: #f0f9ff; color: #0369a1; }
.priority-2 { background: #fef3c7; color: #d97706; }
.priority-3 { background: #fef2f2; color: #dc2626; }

.priority-2 {
  background: #fef3c7;
  color: #d97706;
}

.priority-3 {
  background: #fef2f2;
  color: #dc2626;
}

.status-0 {
  background: #f3f4f6;
  color: #6b7280;
}

.status-1 {
  background: #d1fae5;
  color: #059669;
}

.status-2 {
  background: #fef3c7;
  color: #d97706;
}
.status-0 { background: #f3f4f6; color: #6b7280; }
.status-1 { background: #d1fae5; color: #059669; }
.status-2 { background: #fef3c7; color: #d97706; }

.card-info {
  display: flex;
@@ -698,12 +692,12 @@
  .notice-cards {
    grid-template-columns: 1fr;
  }

  
  .search_form {
    flex-direction: column;
    gap: 15px;
  }

  
  .search_form > div {
    width: 100%;
  }

 src/views/collaborativeApproval/notificationManagement/index.vue

@@ -567,9 +567,9 @@
    status: "published",
    content: "根据国家规定，结合公司实际情况，现将2024年春节放假安排通知如下...",
    departments: ["技术部", "销售部", "人事部", "财务部", "运营部", "市场部", "客服部"],
    expireDate: "2024-02-15",
    expireDate: "2025-02-15",
    syncMethods: ["wechat", "dingtalk", "email"],
    createTime: "2024-01-15 10:30:00"
    createTime: "2025-01-15 10:30:00"
  },
  {
    id: "2",
@@ -579,9 +579,9 @@
    status: "published",
    content: "技术部定于每周五下午2点召开周例会，请各位同事准时参加...",
    departments: ["技术部"],
    expireDate: "2024-01-20",
    expireDate: "2025-01-20",
    syncMethods: ["wechat", "dingtalk"],
    createTime: "2024-01-14 15:20:00"
    createTime: "2025-01-14 15:20:00"
  },
  {
    id: "3",
@@ -591,9 +591,9 @@
    status: "draft",
    content: "为维护公司正常秩序，规范员工行为，现对违反公司规定的行为进行处罚...",
    departments: ["人事部", "技术部", "销售部"],
    expireDate: "2024-02-13",
    expireDate: "2025-02-13",
    syncMethods: ["wechat", "email"],
    createTime: "2024-01-13 09:15:00"
    createTime: "2025-01-13 09:15:00"
  }
];

@@ -664,9 +664,9 @@
    console.error('获取员工列表失败:', error);
    // å¦‚果接口都失败，使用默认数据
    employees.value = [
      { label: "张三", value: "001", dept: "技术部", phone: "13800138001", email: "zhangsan@company.com", status: "0" },
      { label: "李四", value: "002", dept: "销售部", phone: "13800138002", email: "lisi@company.com", status: "0" },
      { label: "王五", value: "003", dept: "人事部", phone: "13800138003", email: "wangwu@company.com", status: "0" }
      { label: "陈志强", value: "001", dept: "技术部", phone: "13800138001", email: "chenzhiqiang@company.com", status: "0" },
      { label: "刘雅婷", value: "002", dept: "销售部", phone: "13800138002", email: "liuyating@company.com", status: "0" },
      { label: "王建国", value: "003", dept: "人事部", phone: "13800138003", email: "wangjianguo@company.com", status: "0" }
    ];
  } finally {
    employeesLoading.value = false;

 src/views/collaborativeApproval/officeSupplies/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,670 @@
<template>
  <div class="app-container">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>办公物资申请管理</span>
          <el-button type="primary" @click="showApplyDialog = true">
            <el-icon><Plus /></el-icon>
            æ–°å»ºç”³è¯·
          </el-button>
        </div>
      </template>

             <!-- æœç´¢åŒºåŸŸ -->
       <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
         <el-form-item label="申请编号" prop="applyNo">
           <el-input
             v-model="queryParams.applyNo"
             placeholder="请输入申请编号"
             clearable
             style="width: 200px"
             @keyup.enter="handleQuery"
           />
         </el-form-item>
         <el-form-item label="申请人" prop="applicant">
           <el-input
             v-model="queryParams.applicant"
             placeholder="请输入申请人"
             clearable
             style="width: 200px"
             @keyup.enter="handleQuery"
           />
         </el-form-item>
         <el-form-item label="申请状态" prop="status">
           <el-select v-model="queryParams.status" placeholder="请选择状态" clearable style="width: 200px">
             <el-option label="待审批" value="pending" />
             <el-option label="已通过" value="approved" />
             <el-option label="已拒绝" value="rejected" />
             <el-option label="已发放" value="issued" />
           </el-select>
         </el-form-item>
         <el-form-item>
           <el-button type="primary" @click="handleQuery">
             <el-icon><Search /></el-icon>
             æœç´¢
           </el-button>
           <el-button @click="resetQuery">
             <el-icon><Refresh /></el-icon>
             é‡ç½®
           </el-button>
         </el-form-item>
         <el-form-item>
            <el-button type="primary" @click="handleExport">
            <el-icon><Download /></el-icon>
            å¯¼å‡º
          </el-button>
          <el-button type="success" @click="handleBatchApprove" :disabled="multipleSelection.length === 0">
            <el-icon><Check /></el-icon>
            æ‰¹é‡å®¡æ‰¹
          </el-button>
         </el-form-item>
       </el-form>

      <!-- è¡¨æ ¼åŒºåŸŸ -->
      <el-table
        v-loading="loading"
        :data="suppliesList"
        @selection-change="handleSelectionChange"
        style="width: 100%"
      >
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="申请编号" align="center" prop="applyNo" width="180" />
        <el-table-column label="申请人" align="center" prop="applicant" width="120" />
        <el-table-column label="部门" align="center" prop="department" width="120" />
        <el-table-column label="物资类型" align="center" prop="supplyType" width="120" />
        <el-table-column label="申请数量" align="center" prop="quantity" width="100" />
        <el-table-column label="申请原因" align="center" prop="reason" min-width="200" show-overflow-tooltip />
        <el-table-column label="申请状态" align="center" prop="status" width="100">
          <template #default="scope">
            <el-tag :type="getStatusType(scope.row.status)">
              {{ getStatusText(scope.row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="申请时间" align="center" prop="applyTime" width="180" />
        <el-table-column label="审批人" align="center" prop="approver" width="120" />
        <el-table-column label="审批时间" align="center" prop="approveTime" width="180" />
        <el-table-column label="发放时间" align="center" prop="issueTime" width="180" />
        <el-table-column label="操作" align="center" fixed="right" class-name="small-padding fixed-width" width="200">
          <template #default="scope">
            <el-button
              v-if="scope.row.status === 'pending'"
              type="primary"
              link
              @click="handleApprove(scope.row)"
            >
              å®¡æ‰¹
            </el-button>
            <el-button
              v-if="scope.row.status === 'approved'"
              type="success"
                            link
              @click="handleIssue(scope.row)"
            >
              å‘放
            </el-button>
            <el-button
              type="info"
                            link
              @click="handleDetail(scope.row)"
            >
              è¯¦æƒ…
            </el-button>
            <el-button
              v-if="scope.row.status === 'pending'"
              type="danger"
                            link
              @click="handleDelete(scope.row)"
            >
              åˆ é™¤
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- åˆ†é¡µ -->
      <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />
    </el-card>

    <!-- ç”³è¯·å¯¹è¯æ¡† -->
    <el-dialog
      v-model="showApplyDialog"
      title="办公物资申请"
      width="600px"
      append-to-body
    >
      <el-form ref="applyFormRef" :model="applyForm" :rules="applyRules" label-width="100px">
        <el-form-item label="物资类型" prop="supplyType">
          <el-select v-model="applyForm.supplyType" placeholder="请选择物资类型" style="width: 100%">
            <el-option label="办公用品" value="office" />
            <el-option label="电子设备" value="electronic" />
            <el-option label="清洁用品" value="cleaning" />
            <el-option label="其他" value="other" />
          </el-select>
        </el-form-item>
        <el-form-item label="具体物品" prop="itemName">
          <el-input v-model="applyForm.itemName" placeholder="请输入具体物品名称" />
        </el-form-item>
        <el-form-item label="申请数量" prop="quantity">
          <el-input-number v-model="applyForm.quantity" :min="1" :max="999" style="width: 100%" />
        </el-form-item>
        <el-form-item label="申请原因" prop="reason">
          <el-input
            v-model="applyForm.reason"
            type="textarea"
            :rows="3"
            placeholder="请输入申请原因"
          />
        </el-form-item>
        <el-form-item label="紧急程度" prop="urgency">
          <el-radio-group v-model="applyForm.urgency">
            <el-radio label="normal">普通</el-radio>
            <el-radio label="urgent">紧急</el-radio>
            <el-radio label="very_urgent">非常紧急</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="showApplyDialog = false">取 æ¶ˆ</el-button>
          <el-button type="primary" @click="submitApply">ç¡® å®š</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- å®¡æ‰¹å¯¹è¯æ¡† -->
    <el-dialog
      v-model="showApproveDialog"
      title="审批申请"
      width="500px"
      append-to-body
    >
      <el-form ref="approveFormRef" :model="approveForm" :rules="approveRules" label-width="100px">
        <el-form-item label="审批结果" prop="approveResult">
          <el-radio-group v-model="approveForm.approveResult">
            <el-radio label="approved">通过</el-radio>
            <el-radio label="rejected">拒绝</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="审批意见" prop="approveComment">
          <el-input
            v-model="approveForm.approveComment"
            type="textarea"
            :rows="3"
            placeholder="请输入审批意见"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="showApproveDialog = false">取 æ¶ˆ</el-button>
          <el-button type="primary" @click="submitApprove">ç¡® å®š</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- è¯¦æƒ…对话框 -->
    <el-dialog
      v-model="showDetailDialog"
      title="申请详情"
      width="700px"
      append-to-body
    >
      <el-descriptions :column="2" border>
        <el-descriptions-item label="申请编号">{{ currentDetail.applyNo }}</el-descriptions-item>
        <el-descriptions-item label="申请人">{{ currentDetail.applicant }}</el-descriptions-item>
        <el-descriptions-item label="部门">{{ currentDetail.department }}</el-descriptions-item>
        <el-descriptions-item label="物资类型">{{ currentDetail.supplyType }}</el-descriptions-item>
        <el-descriptions-item label="具体物品">{{ currentDetail.itemName }}</el-descriptions-item>
        <el-descriptions-item label="申请数量">{{ currentDetail.quantity }}</el-descriptions-item>
        <el-descriptions-item label="申请原因" :span="2">{{ currentDetail.reason }}</el-descriptions-item>
        <el-descriptions-item label="申请状态">
          <el-tag :type="getStatusType(currentDetail.status)">
            {{ getStatusText(currentDetail.status) }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="申请时间">{{ currentDetail.applyTime }}</el-descriptions-item>
        <el-descriptions-item label="审批人">{{ currentDetail.approver || '-' }}</el-descriptions-item>
        <el-descriptions-item label="审批时间">{{ currentDetail.approveTime || '-' }}</el-descriptions-item>
        <el-descriptions-item label="审批意见" :span="2">{{ currentDetail.approveComment || '-' }}</el-descriptions-item>
        <el-descriptions-item label="发放时间">{{ currentDetail.issueTime || '-' }}</el-descriptions-item>
        <el-descriptions-item label="发放人">{{ currentDetail.issuer || '-' }}</el-descriptions-item>
      </el-descriptions>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus, Search, Refresh, Download, Check } from '@element-plus/icons-vue'

// å“åº”式数据
const loading = ref(false)
const showSearch = ref(true)
const showApplyDialog = ref(false)
const showApproveDialog = ref(false)
const showDetailDialog = ref(false)
const multipleSelection = ref([])
const total = ref(0)
const suppliesList = ref([])
const currentDetail = ref({})

// æŸ¥è¯¢å‚æ•°
const queryParams = reactive({
  pageNum: 1,
  pageSize: 10,
  applyNo: '',
  applicant: '',
  status: ''
})

// ç”³è¯·è¡¨å•
const applyForm = reactive({
  supplyType: '',
  itemName: '',
  quantity: 1,
  reason: '',
  urgency: 'normal'
})

// å®¡æ‰¹è¡¨å•
const approveForm = reactive({
  approveResult: 'approved',
  approveComment: ''
})

// è¡¨å•æ ¡éªŒè§„则
const applyRules = {
  supplyType: [{ required: true, message: '请选择物资类型', trigger: 'change' }],
  itemName: [{ required: true, message: '请输入具体物品名称', trigger: 'blur' }],
  quantity: [{ required: true, message: '请输入申请数量', trigger: 'blur' }],
  reason: [{ required: true, message: '请输入申请原因', trigger: 'blur' }]
}

const approveRules = {
  approveResult: [{ required: true, message: '请选择审批结果', trigger: 'change' }],
  approveComment: [{ required: true, message: '请输入审批意见', trigger: 'blur' }]
}

// å‡æ•°æ®
const mockData = [
  {
    id: 1,
    applyNo: 'WS20241201001',
    applicant: '陈志强',
    department: '技术部',
    supplyType: '办公用品',
    itemName: 'A4打印纸',
    quantity: 10,
    reason: '日常办公打印需要',
    status: 'pending',
    applyTime: '2025-12-01 09:30:00',
    approver: '',
    approveTime: '',
    approveComment: '',
    issueTime: '',
    issuer: ''
  },
  {
    id: 2,
    applyNo: 'WS20241201002',
    applicant: '刘雅婷',
    department: '人事部',
    supplyType: '电子设备',
    itemName: '无线鼠标',
    quantity: 2,
    reason: '新员工入职配备',
    status: 'approved',
    applyTime: '2025-12-01 10:15:00',
    approver: '王建国',
    approveTime: '2025-12-01 14:20:00',
    approveComment: '同意申请，请及时发放',
    issueTime: '',
    issuer: ''
  },
  {
    id: 3,
    applyNo: 'WS20241201003',
    applicant: '王建国',
    department: '财务部',
    supplyType: '清洁用品',
    itemName: '洗手液',
    quantity: 5,
    reason: '办公室清洁用品补充',
    status: 'issued',
    applyTime: '2025-12-01 11:00:00',
    approver: '刘雅婷',
    approveTime: '2025-12-01 15:30:00',
    approveComment: '同意申请',
    issueTime: '2025-12-01 16:00:00',
    issuer: '钱伟明'
  },
  {
    id: 4,
    applyNo: 'WS20241201004',
    applicant: '赵丽华',
    department: '市场部',
    supplyType: '其他',
    itemName: '文件夹',
    quantity: 20,
    reason: '项目资料整理需要',
    status: 'rejected',
    applyTime: '2025-12-01 13:45:00',
    approver: '陈志强',
    approveTime: '2025-12-01 17:00:00',
    approveComment: '数量过多，建议减少到10个',
    issueTime: '',
    issuer: ''
  },
  {
    id: 5,
    applyNo: 'WS20241202001',
    applicant: '钱伟明',
    department: '运营部',
    supplyType: '办公用品',
    itemName: '签字笔',
    quantity: 50,
    reason: '部门日常办公用品补充',
    status: 'pending',
    applyTime: '2025-12-02 08:30:00',
    approver: '',
    approveTime: '',
    approveComment: '',
    issueTime: '',
    issuer: ''
  },
  {
    id: 6,
    applyNo: 'WS20241202002',
    applicant: '孙明华',
    department: '技术部',
    supplyType: '电子设备',
    itemName: '键盘',
    quantity: 3,
    reason: '新员工设备配备',
    status: 'approved',
    applyTime: '2025-12-02 14:20:00',
    approver: '陈志强',
    approveTime: '2025-12-02 16:00:00',
    approveComment: '同意申请',
    issueTime: '',
    issuer: ''
  },
  {
    id: 7,
    applyNo: 'WS20241203001',
    applicant: '周美玲',
    department: '人事部',
    supplyType: '清洁用品',
    itemName: '纸巾',
    quantity: 30,
    reason: '办公区域清洁用品补充',
    status: 'issued',
    applyTime: '2025-12-03 09:15:00',
    approver: '赵丽华',
    approveTime: '2025-12-03 10:30:00',
    approveComment: '同意申请',
    issueTime: '2025-12-03 11:00:00',
    issuer: '孙明华'
  },
  {
    id: 8,
    applyNo: 'WS20241203002',
    applicant: '吴志强',
    department: '财务部',
    supplyType: '其他',
    itemName: '计算器',
    quantity: 2,
    reason: '财务核算工作需要',
    status: 'rejected',
    applyTime: '2025-12-03 15:45:00',
    approver: '王建国',
    approveTime: '2025-12-03 17:20:00',
    approveComment: '已有计算器，暂不需要',
    issueTime: '',
    issuer: ''
  }
]

// èŽ·å–列表数据
const getList = () => {
  loading.value = true
  // æ¨¡æ‹Ÿå¼‚步请求
  setTimeout(() => {
    let filteredData = [...mockData]
    
    // æ ¹æ®æŸ¥è¯¢æ¡ä»¶è¿‡æ»¤
    if (queryParams.applyNo) {
      filteredData = filteredData.filter(item => 
        item.applyNo.toLowerCase().includes(queryParams.applyNo.toLowerCase())
      )
    }
    if (queryParams.applicant) {
      filteredData = filteredData.filter(item => 
        item.applicant.toLowerCase().includes(queryParams.applicant.toLowerCase())
      )
    }
    if (queryParams.status) {
      filteredData = filteredData.filter(item => 
        item.status === queryParams.status
      )
    }
    
    // æŒ‰ç”³è¯·æ—¶é—´å€’序排列
    filteredData.sort((a, b) => new Date(b.applyTime) - new Date(a.applyTime))
    
    total.value = filteredData.length
    suppliesList.value = filteredData.slice(
      (queryParams.pageNum - 1) * queryParams.pageSize,
      queryParams.pageNum * queryParams.pageSize
    )
    loading.value = false
  }, 500)
}

// æŸ¥è¯¢
const handleQuery = () => {
  queryParams.pageNum = 1
  getList()
}

// é‡ç½®æŸ¥è¯¢
const resetQuery = () => {
  queryParams.applyNo = ''
  queryParams.applicant = ''
  queryParams.status = ''
  handleQuery()
}

// å¤šé€‰
const handleSelectionChange = (selection) => {
  multipleSelection.value = selection
}

// èŽ·å–状态类型
const getStatusType = (status) => {
  const statusMap = {
    pending: 'warning',
    approved: 'success',
    rejected: 'danger',
    issued: 'info'
  }
  return statusMap[status] || 'info'
}

// èŽ·å–状态文本
const getStatusText = (status) => {
  const statusMap = {
    pending: '待审批',
    approved: '已通过',
    rejected: '已拒绝',
    issued: '已发放'
  }
  return statusMap[status] || status
}

// æäº¤ç”³è¯·
const submitApply = () => {
  const newApply = {
    id: mockData.length + 1,
    applyNo: `WS${new Date().getTime()}`,
    applicant: '当前用户',
    department: '技术部',
    supplyType: applyForm.supplyType,
    itemName: applyForm.itemName,
    quantity: applyForm.quantity,
    reason: applyForm.reason,
    status: 'pending',
    applyTime: new Date().toLocaleString(),
    approver: '',
    approveTime: '',
    approveComment: '',
    issueTime: '',
    issuer: ''
  }
  
  mockData.unshift(newApply)
  showApplyDialog.value = false
  ElMessage.success('申请提交成功')
  getList()
  
  // é‡ç½®è¡¨å•
  Object.assign(applyForm, {
    supplyType: '',
    itemName: '',
    quantity: 1,
    reason: '',
    urgency: 'normal'
  })
}

// å®¡æ‰¹
const handleApprove = (row) => {
  currentDetail.value = row
  showApproveDialog.value = true
}

// æäº¤å®¡æ‰¹
const submitApprove = () => {
  const index = mockData.findIndex(item => item.id === currentDetail.value.id)
  if (index !== -1) {
    mockData[index].status = approveForm.approveResult
    mockData[index].approver = '当前审批人'
    mockData[index].approveTime = new Date().toLocaleString()
    mockData[index].approveComment = approveForm.approveComment
  }
  
  showApproveDialog.value = false
  ElMessage.success('审批完成')
  getList()
  
  // é‡ç½®è¡¨å•
  Object.assign(approveForm, {
    approveResult: 'approved',
    approveComment: ''
  })
}

// å‘放
const handleIssue = (row) => {
  const index = mockData.findIndex(item => item.id === row.id)
  if (index !== -1) {
    mockData[index].status = 'issued'
    mockData[index].issueTime = new Date().toLocaleString()
    mockData[index].issuer = '当前发放人'
  }
  
  ElMessage.success('发放完成')
  getList()
}

// æŸ¥çœ‹è¯¦æƒ…
const handleDetail = (row) => {
  currentDetail.value = row
  showDetailDialog.value = true
}

// åˆ é™¤
const handleDelete = (row) => {
  ElMessageBox.confirm('确认删除该申请吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    const index = mockData.findIndex(item => item.id === row.id)
    if (index !== -1) {
      mockData.splice(index, 1)
    }
    ElMessage.success('删除成功')
    getList()
  })
}

// æ‰¹é‡å®¡æ‰¹
const handleBatchApprove = () => {
  if (multipleSelection.value.length === 0) {
    ElMessage.warning('请选择要审批的记录')
    return
  }
  
  ElMessageBox.confirm(`确认批量审批选中的 ${multipleSelection.value.length} æ¡è®°å½•å—？`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    multipleSelection.value.forEach(row => {
      const index = mockData.findIndex(item => item.id === row.id)
      if (index !== -1) {
        mockData[index].status = 'approved'
        mockData[index].approver = '当前审批人'
        mockData[index].approveTime = new Date().toLocaleString()
        mockData[index].approveComment = '批量审批通过'
      }
    })
    ElMessage.success('批量审批完成')
    getList()
  })
}

// å¯¼å‡º
const handleExport = () => {
  ElMessage.success('导出功能开发中...')
}

// é¡µé¢åŠ è½½æ—¶èŽ·å–数据
onMounted(() => {
  getList()
})
</script>

<style scoped>
.app-container {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.mb8 {
  margin-bottom: 8px;
}

.dialog-footer {
  text-align: right;
}

:deep(.el-descriptions__label) {
  width: 120px;
}
</style>

 src/views/collaborativeApproval/planTemplate/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,750 @@
<template>
  <div class="app-container">
    <!-- é¡¶éƒ¨æ“ä½œæ  -->
    <div class="header-actions">
      <div class="left-actions">
        <el-select v-model="currentLevel" placeholder="选择计划级别" style="width: 150px" @change="handleLevelChange">
          <el-option label="个人计划" value="personal" />
          <el-option label="小组计划" value="group" />
          <el-option label="部门计划" value="department" />
          <el-option label="公司计划" value="company" />
        </el-select>
        <el-select v-model="currentPeriod" placeholder="选择时间周期" style="width: 120px; margin-left: 10px" @change="handlePeriodChange">
          <el-option label="周计划" value="week" />
          <el-option label="月计划" value="month" />
          <el-option label="年计划" value="year" />
        </el-select>
        <el-date-picker
          v-model="currentDate"
          :type="datePickerType"
          placeholder="选择日期"
          style="width: 180px; margin-left: 10px"
          @change="handleDateChange"
        />
      </div>
      <div class="right-actions">
        <el-button type="primary" @click="handleAddPlan">新增计划</el-button>
        <el-button @click="handleExport">导出计划</el-button>
        <el-button @click="handleShare">共享计划</el-button>
      </div>
    </div>

    <!-- è®¡åˆ’概览卡片 -->
    <div class="overview-cards">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-card class="overview-card">
            <div class="card-content">
              <div class="card-icon personal">
                <el-icon><User /></el-icon>
              </div>
              <div class="card-info">
                <div class="card-title">个人计划</div>
                <div class="card-number">{{ overviewData.personal.total }}</div>
                <div class="card-progress">
                  <el-progress :percentage="overviewData.personal.completion" :stroke-width="6" />
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="overview-card">
            <div class="card-content">
              <div class="card-icon group">
                <el-icon><UserFilled /></el-icon>
              </div>
              <div class="card-info">
                <div class="card-title">小组计划</div>
                <div class="card-number">{{ overviewData.group.total }}</div>
                <div class="card-progress">
                  <el-progress :percentage="overviewData.group.completion" :stroke-width="6" />
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="overview-card">
            <div class="card-content">
              <div class="card-icon department">
                <el-icon><OfficeBuilding /></el-icon>
              </div>
              <div class="card-info">
                <div class="card-title">部门计划</div>
                <div class="card-number">{{ overviewData.department.total }}</div>
                <div class="card-progress">
                  <el-progress :percentage="overviewData.department.completion" :stroke-width="6" />
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="overview-card">
            <div class="card-content">
              <div class="card-icon company">
                <el-icon><House /></el-icon>
              </div>
              <div class="card-info">
                <div class="card-title">公司计划</div>
                <div class="card-number">{{ overviewData.company.total }}</div>
                <div class="card-progress">
                  <el-progress :percentage="overviewData.company.completion" :stroke-width="6" />
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- è®¡åˆ’列表 -->
    <div class="plan-content">
      <el-card>
        <template #header>
          <div class="card-header">
            <span>{{ getCurrentLevelText() }} - {{ getCurrentPeriodText() }}</span>
            <div>
              <el-button size="small" @click="handleRefresh">刷新</el-button>
              <el-button size="small" @click="handleFilter">筛选</el-button>
            </div>
          </div>
        </template>
        
        <div class="plan-list">
          <div v-for="plan in planList" :key="plan.id" class="plan-item">
            <div class="plan-header">
              <div class="plan-title">
                <el-tag :type="getPriorityType(plan.priority)" size="small">{{ getPriorityText(plan.priority) }}</el-tag>
                <span class="title-text">{{ plan.title }}</span>
              </div>
              <div class="plan-actions">
                <el-button size="small" @click="handleEditPlan(plan)">编辑</el-button>
                <el-button size="small" @click="handleViewDetail(plan)">详情</el-button>
                <el-dropdown @command="handleMoreAction">
                  <el-button size="small">
                    æ›´å¤š<el-icon class="el-icon--right"><ArrowDown /></el-icon>
                  </el-button>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item command="share">共享</el-dropdown-item>
                      <el-dropdown-item command="copy">复制</el-dropdown-item>
                      <el-dropdown-item command="delete" divided>删除</el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </div>
            </div>
            
            <div class="plan-content">
              <div class="plan-description">{{ plan.description }}</div>
              <div class="plan-meta">
                <div class="meta-item">
                  <el-icon><Calendar /></el-icon>
                  <span>{{ plan.startDate }} - {{ plan.endDate }}</span>
                </div>
                <div class="meta-item">
                  <el-icon><User /></el-icon>
                  <span>{{ plan.assignee }}</span>
                </div>
                <div class="meta-item">
                  <el-icon><Clock /></el-icon>
                  <span>进度: {{ plan.progress }}%</span>
                </div>
                <div class="meta-item">
                  <el-icon><Flag /></el-icon>
                  <span>{{ getStatusText(plan.status) }}</span>
                </div>
              </div>
              
              <div class="plan-progress">
                <el-progress 
                  :percentage="plan.progress" 
                  :color="getProgressColor(plan.progress)"
                  :stroke-width="8"
                />
              </div>
              
              <div class="plan-tags">
                <el-tag v-for="tag in plan.tags" :key="tag" size="small" style="margin-right: 5px">
                  {{ tag }}
                </el-tag>
              </div>
            </div>
          </div>
        </div>
      </el-card>
    </div>

    <!-- æ–°å¢ž/编辑计划对话框 -->
    <el-dialog
      v-model="planDialogVisible"
      :title="dialogTitle"
      width="600px"
      @close="handleDialogClose"
    >
      <el-form :model="planForm" :rules="planRules" ref="planFormRef" label-width="100px">
        <el-form-item label="计划标题" prop="title">
          <el-input v-model="planForm.title" placeholder="请输入计划标题" />
        </el-form-item>
        <el-form-item label="计划描述" prop="description">
          <el-input
            v-model="planForm.description"
            type="textarea"
            :rows="3"
            placeholder="请输入计划描述"
          />
        </el-form-item>
        <el-form-item label="计划级别" prop="level">
          <el-select v-model="planForm.level" placeholder="选择计划级别" style="width: 100%">
            <el-option label="个人计划" value="personal" />
            <el-option label="小组计划" value="group" />
            <el-option label="部门计划" value="department" />
            <el-option label="公司计划" value="company" />
          </el-select>
        </el-form-item>
        <el-form-item label="时间周期" prop="period">
          <el-select v-model="planForm.period" placeholder="选择时间周期" style="width: 100%">
            <el-option label="周计划" value="week" />
            <el-option label="月计划" value="month" />
            <el-option label="年计划" value="year" />
          </el-select>
        </el-form-item>
        <el-form-item label="开始时间" prop="startDate">
          <el-date-picker
            v-model="planForm.startDate"
            type="date"
            placeholder="选择开始时间"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="结束时间" prop="endDate">
          <el-date-picker
            v-model="planForm.endDate"
            type="date"
            placeholder="选择结束时间"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="负责人" prop="assignee">
          <el-input v-model="planForm.assignee" placeholder="请输入负责人" />
        </el-form-item>
        <el-form-item label="优先级" prop="priority">
          <el-select v-model="planForm.priority" placeholder="选择优先级" style="width: 100%">
            <el-option label="高" value="high" />
            <el-option label="中" value="medium" />
            <el-option label="低" value="low" />
          </el-select>
        </el-form-item>
        <el-form-item label="标签">
          <el-input v-model="planForm.tags" placeholder="请输入标签，用逗号分隔" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="planDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSavePlan">保存</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  User,
  UserFilled,
  OfficeBuilding,
  House,
  Calendar,
  Clock,
  Flag,
  ArrowDown
} from '@element-plus/icons-vue'

// å“åº”式数据
const currentLevel = ref('personal')
const currentPeriod = ref('week')
const currentDate = ref(new Date())
const planDialogVisible = ref(false)
const dialogTitle = ref('新增计划')
const planFormRef = ref()

// è¡¨å•æ•°æ®
const planForm = reactive({
  title: '',
  description: '',
  level: 'personal',
  period: 'week',
  startDate: '',
  endDate: '',
  assignee: '',
  priority: 'medium',
  tags: ''
})

// è¡¨å•éªŒè¯è§„则
const planRules = {
  title: [{ required: true, message: '请输入计划标题', trigger: 'blur' }],
  description: [{ required: true, message: '请输入计划描述', trigger: 'blur' }],
  level: [{ required: true, message: '请选择计划级别', trigger: 'change' }],
  period: [{ required: true, message: '请选择时间周期', trigger: 'change' }],
  startDate: [{ required: true, message: '请选择开始时间', trigger: 'change' }],
  endDate: [{ required: true, message: '请选择结束时间', trigger: 'change' }],
  assignee: [{ required: true, message: '请输入负责人', trigger: 'blur' }],
  priority: [{ required: true, message: '请选择优先级', trigger: 'change' }]
}

// æ¦‚览数据
const overviewData = reactive({
  personal: { total: 12, completion: 75 },
  group: { total: 8, completion: 60 },
  department: { total: 15, completion: 45 },
  company: { total: 6, completion: 30 }
})

// è®¡åˆ’列表数据
const planList = ref([
  {
    id: 1,
    title: '产品需求分析',
    description: '对新产品进行详细的需求分析和市场调研，制定产品规划方案',
    level: 'personal',
    period: 'week',
    startDate: '2025-01-15',
    endDate: '2025-01-21',
    assignee: '陈志强',
    priority: 'high',
    status: 'in_progress',
    progress: 80,
    tags: ['产品', '分析', '调研']
  },
  {
    id: 2,
    title: '技术架构设计',
    description: '设计系统技术架构，包括数据库设计、接口设计等',
    level: 'group',
    period: 'month',
    startDate: '2025-01-01',
    endDate: '2025-01-31',
    assignee: '刘雅婷',
    priority: 'high',
    status: 'completed',
    progress: 100,
    tags: ['技术', '架构', '设计']
  },
  {
    id: 3,
    title: '市场推广计划',
    description: '制定年度市场推广策略和营销计划',
    level: 'department',
    period: 'year',
    startDate: '2025-01-01',
    endDate: '2025-12-31',
    assignee: '王建国',
    priority: 'medium',
    status: 'not_started',
    progress: 0,
    tags: ['市场', '推广', '营销']
  },
  {
    id: 4,
    title: '团队建设活动',
    description: '组织团队建设活动，提升团队凝聚力和协作效率',
    level: 'company',
    period: 'month',
    startDate: '2025-01-15',
    endDate: '2025-02-15',
    assignee: '赵丽华',
    priority: 'low',
    status: 'in_progress',
    progress: 30,
    tags: ['团队', '建设', '活动']
  }
])

// è®¡ç®—属性
const datePickerType = computed(() => {
  switch (currentPeriod.value) {
    case 'week':
      return 'week'
    case 'month':
      return 'month'
    case 'year':
      return 'year'
    default:
      return 'date'
  }
})

// æ–¹æ³•
const handleLevelChange = (value) => {
  console.log('计划级别变更:', value)
  // è¿™é‡Œå¯ä»¥æ ¹æ®çº§åˆ«ç­›é€‰æ•°æ®
}

const handlePeriodChange = (value) => {
  console.log('时间周期变更:', value)
  // è¿™é‡Œå¯ä»¥æ ¹æ®å‘¨æœŸç­›é€‰æ•°æ®
}

const handleDateChange = (value) => {
  console.log('日期变更:', value)
  // è¿™é‡Œå¯ä»¥æ ¹æ®æ—¥æœŸç­›é€‰æ•°æ®
}

const handleAddPlan = () => {
  dialogTitle.value = '新增计划'
  planDialogVisible.value = true
  // é‡ç½®è¡¨å•
  Object.keys(planForm).forEach(key => {
    planForm[key] = ''
  })
  planForm.level = 'personal'
  planForm.period = 'week'
  planForm.priority = 'medium'
}

const handleEditPlan = (plan) => {
  dialogTitle.value = '编辑计划'
  planDialogVisible.value = true
  // å¡«å……表单数据
  Object.keys(planForm).forEach(key => {
    if (key === 'tags') {
      planForm[key] = plan[key].join(', ')
    } else {
      planForm[key] = plan[key]
    }
  })
}

const handleViewDetail = (plan) => {
  ElMessage.info(`查看计划详情: ${plan.title}`)
}

const handleMoreAction = (command) => {
  switch (command) {
    case 'share':
      ElMessage.success('计划已共享')
      break
    case 'copy':
      ElMessage.success('计划已复制')
      break
    case 'delete':
      ElMessageBox.confirm('确定要删除这个计划吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        ElMessage.success('计划已删除')
      })
      break
  }
}

const handleSavePlan = async () => {
  try {
    await planFormRef.value.validate()
    ElMessage.success('计划保存成功')
    planDialogVisible.value = false
  } catch (error) {
    console.log('表单验证失败:', error)
  }
}

const handleDialogClose = () => {
  planFormRef.value?.resetFields()
}

const handleRefresh = () => {
  ElMessage.success('数据已刷新')
}

const handleFilter = () => {
  ElMessage.info('打开筛选面板')
}

const handleExport = () => {
  ElMessage.success('计划已导出')
}

const handleShare = () => {
  ElMessage.success('计划已共享')
}

const getCurrentLevelText = () => {
  const levelMap = {
    personal: '个人计划',
    group: '小组计划',
    department: '部门计划',
    company: '公司计划'
  }
  return levelMap[currentLevel.value] || '个人计划'
}

const getCurrentPeriodText = () => {
  const periodMap = {
    week: '周计划',
    month: '月计划',
    year: '年计划'
  }
  return periodMap[currentPeriod.value] || '周计划'
}

const getPriorityType = (priority) => {
  const typeMap = {
    high: 'danger',
    medium: 'warning',
    low: 'info'
  }
  return typeMap[priority] || 'info'
}

const getPriorityText = (priority) => {
  const textMap = {
    high: '高',
    medium: '中',
    low: '低'
  }
  return textMap[priority] || '中'
}

const getStatusText = (status) => {
  const statusMap = {
    not_started: '未开始',
    in_progress: '进行中',
    completed: '已完成',
    paused: '已暂停'
  }
  return statusMap[status] || '未知'
}

const getProgressColor = (progress) => {
  if (progress >= 80) return '#67C23A'
  if (progress >= 50) return '#E6A23C'
  return '#F56C6C'
}

onMounted(() => {
  console.log('多级计划模板页面已加载')
})
</script>

<style scoped>
.app-container {
  padding: 20px;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.header-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  background: white;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.left-actions {
  display: flex;
  align-items: center;
}

.right-actions {
  display: flex;
  gap: 10px;
}

.overview-cards {
  margin-bottom: 20px;
}

.overview-card {
  height: 120px;
}

.card-content {
  display: flex;
  align-items: center;
  height: 100%;
}

.card-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  font-size: 24px;
  color: white;
}

.card-icon.personal {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.card-icon.group {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.card-icon.department {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.card-icon.company {
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.card-info {
  flex: 1;
}

.card-title {
  font-size: 14px;
  color: #666;
  margin-bottom: 5px;
}

.card-number {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
}

.card-progress {
  width: 100%;
}

.plan-content {
  background: white;
  border-radius: 8px;
  overflow: hidden;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
  color: #333;
}

.header-actions {
  display: flex;
  gap: 10px;
}

.plan-list {
  padding: 20px 0;
}

.plan-item {
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  margin-bottom: 15px;
  padding: 20px;
  transition: all 0.3s ease;
}

.plan-item:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.plan-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.plan-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.title-text {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.plan-actions {
  display: flex;
  gap: 10px;
}

.plan-content {
  margin-bottom: 15px;
}

.plan-description {
  color: #666;
  margin-bottom: 15px;
  line-height: 1.6;
}

.plan-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 15px;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #666;
  font-size: 14px;
}

.plan-progress {
  margin-bottom: 15px;
}

.plan-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* å“åº”式设计 */
@media (max-width: 768px) {
  .header-actions {
    flex-direction: column;
    gap: 15px;
  }
  
  .left-actions {
    flex-wrap: wrap;
    gap: 10px;
  }
  
  .plan-meta {
    flex-direction: column;
    gap: 10px;
  }
  
  .plan-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}
</style>

 src/views/collaborativeApproval/rpaManagement/index.vue

@@ -215,21 +215,21 @@
    programName: "订单处理RPA",
    status: "running",
    description: "自动处理客户订单，包括验证、分配和确认",
    createTime: "2024-01-15 10:30:00"
    createTime: "2025-01-15 10:30:00"
  },
  {
    id: "2",
    programName: "库存同步RPA",
    status: "stopped",
    description: "同步多个仓库的库存数据，确保数据一致性",
    createTime: "2024-01-14 15:20:00"
    createTime: "2025-01-14 15:20:00"
  },
  {
    id: "3",
    programName: "报表生成RPA",
    status: "error",
    description: "自动生成每日销售报表和库存报表",
    createTime: "2024-01-13 09:15:00"
    createTime: "2025-01-13 09:15:00"
  }
];


 src/views/collaborativeApproval/sealManagement/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,588 @@
<template>
  <div class="app-container">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>用印管理与规章制度发布</span>
          <el-button type="primary" @click="showSealApplyDialog = true">
            <el-icon><Plus /></el-icon>
            ç”³è¯·ç”¨å°
          </el-button>
        </div>
      </template>

      <el-tabs v-model="activeTab" type="border-card">
        <!-- ç”¨å°ç”³è¯·ç®¡ç† -->
        <el-tab-pane label="用印申请管理" name="seal">
          <div class="tab-content">
            <el-row :gutter="20" class="mb-20">
              <el-col :span="6">
                <el-input v-model="sealSearchForm.keyword" placeholder="请输入申请标题或申请人" clearable />
              </el-col>
              <el-col :span="4">
                <el-select v-model="sealSearchForm.status" placeholder="审批状态" clearable>
                  <el-option label="待审批" value="pending" />
                  <el-option label="已通过" value="approved" />
                  <el-option label="已拒绝" value="rejected" />
                </el-select>
              </el-col>
              <el-col :span="4">
                <el-button type="primary" @click="searchSealApplications">搜索</el-button>
                <el-button @click="resetSealSearch">重置</el-button>
              </el-col>
            </el-row>

            <el-table :data="sealApplications" style="width: 100%">
              <el-table-column prop="id" label="申请编号" width="120" />
              <el-table-column prop="title" label="申请标题" min-width="200" />
              <el-table-column prop="applicant" label="申请人" width="120" />
              <el-table-column prop="department" label="所属部门" width="150" />
              <el-table-column prop="sealType" label="用印类型" width="120" />
              <el-table-column prop="applyTime" label="申请时间" width="180" />
              <el-table-column prop="status" label="状态" width="100">
                <template #default="scope">
                  <el-tag :type="getStatusType(scope.row.status)">
                    {{ getStatusText(scope.row.status) }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="200" fixed="right">
                <template #default="scope">
                  <el-button link @click="viewSealDetail(scope.row)">查看</el-button>
                  <el-button 
                    v-if="scope.row.status === 'pending'"
                                        link
                    type="primary" 
                    @click="approveSeal(scope.row)"
                  >
                    å®¡æ‰¹
                  </el-button>
                  <el-button 
                    v-if="scope.row.status === 'pending'"
                                        link
                    type="danger" 
                    @click="rejectSeal(scope.row)"
                  >
                    æ‹’绝
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>

        <!-- è§„章制度管理 -->
        <el-tab-pane label="规章制度管理" name="regulations">
          <div class="tab-content">
            <el-row :gutter="20" class="mb-20">
              <el-col :span="6">
                <el-input v-model="regulationSearchForm.keyword" placeholder="请输入制度标题或发布人" clearable />
              </el-col>
              <el-col :span="4">
                <el-select v-model="regulationSearchForm.category" placeholder="制度分类" clearable>
                  <el-option label="人事制度" value="hr" />
                  <el-option label="财务制度" value="finance" />
                  <el-option label="安全制度" value="safety" />
                  <el-option label="技术制度" value="tech" />
                </el-select>
              </el-col>
              <el-col :span="8">
                <el-button type="primary" @click="searchRegulations">搜索</el-button>
                <el-button @click="resetRegulationSearch">重置</el-button>
                <el-button type="success" @click="showRegulationDialog = true">
                  å‘布制度
                </el-button>
              </el-col>
            </el-row>

            <el-table :data="regulations" style="width: 100%">
              <el-table-column prop="id" label="制度编号" width="120" />
              <el-table-column prop="title" label="制度标题" min-width="200" />
              <el-table-column prop="category" label="分类" width="120">
                <template #default="scope">
                  <el-tag>{{ getCategoryText(scope.row.category) }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="version" label="版本" width="80" />
              <el-table-column prop="publisher" label="发布人" width="120" />
              <el-table-column prop="publishTime" label="发布时间" width="180" />
              <el-table-column prop="status" label="状态" width="100">
                <template #default="scope">
                  <el-tag :type="scope.row.status === 'active' ? 'success' : 'info'">
                    {{ scope.row.status === 'active' ? '生效中' : '已废止' }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="readCount" label="已读人数" width="100" />
              <el-table-column label="操作" width="250" fixed="right">
                <template #default="scope">
                  <el-button link @click="viewRegulation(scope.row)">查看</el-button>
                  <el-button link type="primary" @click="editRegulation(scope.row)">编辑</el-button>
                  <el-button link type="success" @click="viewVersionHistory(scope.row)">版本历史</el-button>
                  <el-button link type="warning" @click="viewReadStatus(scope.row)">阅读状态</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>

    <!-- ç”¨å°ç”³è¯·å¯¹è¯æ¡† -->
    <el-dialog v-model="showSealApplyDialog" title="申请用印" width="600px">
      <el-form :model="sealForm" :rules="sealRules" ref="sealFormRef" label-width="100px">
        <el-form-item label="申请标题" prop="title">
          <el-input v-model="sealForm.title" placeholder="请输入申请标题" />
        </el-form-item>
        <el-form-item label="用印类型" prop="sealType">
          <el-select v-model="sealForm.sealType" placeholder="请选择用印类型" style="width: 100%">
            <el-option label="公章" value="official" />
            <el-option label="合同专用章" value="contract" />
            <el-option label="财务专用章" value="finance" />
            <el-option label="法人章" value="legal" />
          </el-select>
        </el-form-item>
        <el-form-item label="申请原因" prop="reason">
          <el-input v-model="sealForm.reason" type="textarea" :rows="4" placeholder="请详细说明用印原因" />
        </el-form-item>
        <el-form-item label="紧急程度" prop="urgency">
          <el-radio-group v-model="sealForm.urgency">
            <el-radio label="normal">普通</el-radio>
            <el-radio label="urgent">紧急</el-radio>
            <el-radio label="very-urgent">特急</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showSealApplyDialog = false">取消</el-button>
          <el-button type="primary" @click="submitSealApplication">提交申请</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- è§„章制度发布对话框 -->
    <el-dialog v-model="showRegulationDialog" title="发布规章制度" width="800px">
      <el-form :model="regulationForm" :rules="regulationRules" ref="regulationFormRef" label-width="100px">
        <el-form-item label="制度标题" prop="title">
          <el-input v-model="regulationForm.title" placeholder="请输入制度标题" />
        </el-form-item>
        <el-form-item label="制度分类" prop="category">
          <el-select v-model="regulationForm.category" placeholder="请选择制度分类" style="width: 100%">
            <el-option label="人事制度" value="hr" />
            <el-option label="财务制度" value="finance" />
            <el-option label="安全制度" value="safety" />
            <el-option label="技术制度" value="tech" />
          </el-select>
        </el-form-item>
        <el-form-item label="制度内容" prop="content">
          <el-input v-model="regulationForm.content" type="textarea" :rows="10" placeholder="请输入制度详细内容" />
        </el-form-item>
        <el-form-item label="生效时间" prop="effectiveTime">
          <el-date-picker v-model="regulationForm.effectiveTime" type="datetime" placeholder="选择生效时间" style="width: 100%" />
        </el-form-item>
        <el-form-item label="适用范围" prop="scope">
          <el-checkbox-group v-model="regulationForm.scope">
            <el-checkbox label="all">全体员工</el-checkbox>
            <el-checkbox label="manager">管理层</el-checkbox>
            <el-checkbox label="hr">人事部门</el-checkbox>
            <el-checkbox label="finance">财务部门</el-checkbox>
            <el-checkbox label="tech">技术部门</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="是否需要确认" prop="requireConfirm">
          <el-switch v-model="regulationForm.requireConfirm" />
          <span class="ml-10">开启后员工需要阅读确认</span>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showRegulationDialog = false">取消</el-button>
          <el-button type="primary" @click="submitRegulation">发布制度</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- ç”¨å°è¯¦æƒ…对话框 -->
    <el-dialog v-model="showSealDetailDialog" title="用印申请详情" width="700px">
      <div v-if="currentSealDetail" class="mb10">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="申请编号">{{ currentSealDetail.id }}</el-descriptions-item>
          <el-descriptions-item label="申请标题">{{ currentSealDetail.title }}</el-descriptions-item>
          <el-descriptions-item label="申请人">{{ currentSealDetail.applicant }}</el-descriptions-item>
          <el-descriptions-item label="所属部门">{{ currentSealDetail.department }}</el-descriptions-item>
          <el-descriptions-item label="用印类型">{{ currentSealDetail.sealType }}</el-descriptions-item>
          <el-descriptions-item label="申请时间">{{ currentSealDetail.applyTime }}</el-descriptions-item>
          <el-descriptions-item label="状态">
            <el-tag :type="getStatusType(currentSealDetail.status)">
              {{ getStatusText(currentSealDetail.status) }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="申请原因" :span="2">{{ currentSealDetail.reason }}</el-descriptions-item>
        </el-descriptions>
      </div>
    </el-dialog>

    <!-- è§„章制度详情对话框 -->
    <el-dialog v-model="showRegulationDetailDialog" title="规章制度详情" width="800px">
      <div v-if="currentRegulationDetail">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="制度编号">{{ currentRegulationDetail.id }}</el-descriptions-item>
          <el-descriptions-item label="制度标题">{{ currentRegulationDetail.title }}</el-descriptions-item>
          <el-descriptions-item label="分类">{{ getCategoryText(currentRegulationDetail.category) }}</el-descriptions-item>
          <el-descriptions-item label="版本">{{ currentRegulationDetail.version }}</el-descriptions-item>
          <el-descriptions-item label="发布人">{{ currentRegulationDetail.publisher }}</el-descriptions-item>
          <el-descriptions-item label="发布时间">{{ currentRegulationDetail.publishTime }}</el-descriptions-item>
        </el-descriptions>
        <div class="mt-20">
          <h4>制度内容</h4>
          <div class="regulation-content">{{ currentRegulationDetail.content }}</div>
        </div>
      </div>
    </el-dialog>

    <!-- ç‰ˆæœ¬åŽ†å²å¯¹è¯æ¡† -->
    <el-dialog v-model="showVersionHistoryDialog" title="版本历史" width="800px">
      <el-table :data="versionHistory" style="width: 100%;margin-bottom: 10px">
        <el-table-column prop="version" label="版本号" width="100" />
        <el-table-column prop="updateTime" label="更新时间" width="180" />
        <el-table-column prop="updater" label="更新人" width="120" />
        <el-table-column prop="changeLog" label="变更说明" />
      </el-table>
    </el-dialog>

    <!-- é˜…读状态对话框 -->
    <el-dialog v-model="showReadStatusDialog" title="阅读状态" width="800px">
      <el-table :data="readStatusList" style="width: 100%;margin-bottom: 10px">
        <el-table-column prop="employee" label="员工姓名" width="120" />
        <el-table-column prop="department" label="所属部门" width="150" />
        <el-table-column prop="readTime" label="阅读时间" width="180" />
        <el-table-column prop="confirmTime" label="确认时间" width="180" />
        <el-table-column prop="status" label="状态" width="100">
          <template #default="scope">
            <el-tag :type="scope.row.status === 'confirmed' ? 'success' : 'warning'">
              {{ scope.row.status === 'confirmed' ? '已确认' : '未确认' }}
            </el-tag>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'

// å“åº”式数据
const activeTab = ref('seal')

// ç”¨å°ç”³è¯·ç›¸å…³
const showSealApplyDialog = ref(false)
const showSealDetailDialog = ref(false)
const currentSealDetail = ref(null)
const sealFormRef = ref()
const sealForm = reactive({
  title: '',
  sealType: '',
  reason: '',
  urgency: 'normal'
})

const sealRules = {
  title: [{ required: true, message: '请输入申请标题', trigger: 'blur' }],
  sealType: [{ required: true, message: '请选择用印类型', trigger: 'change' }],
  reason: [{ required: true, message: '请输入申请原因', trigger: 'blur' }]
}

const sealSearchForm = reactive({
  keyword: '',
  status: ''
})

// è§„章制度相关
const showRegulationDialog = ref(false)
const showRegulationDetailDialog = ref(false)
const showVersionHistoryDialog = ref(false)
const showReadStatusDialog = ref(false)
const currentRegulationDetail = ref(null)
const regulationFormRef = ref()
const regulationForm = reactive({
  title: '',
  category: '',
  content: '',
  effectiveTime: '',
  scope: [],
  requireConfirm: true
})

const regulationRules = {
  title: [{ required: true, message: '请输入制度标题', trigger: 'blur' }],
  category: [{ required: true, message: '请选择制度分类', trigger: 'change' }],
  content: [{ required: true, message: '请输入制度内容', trigger: 'blur' }],
  effectiveTime: [{ required: true, message: '请选择生效时间', trigger: 'change' }],
  scope: [{ required: true, message: '请选择适用范围', trigger: 'change' }]
}

const regulationSearchForm = reactive({
  keyword: '',
  category: ''
})

// å‡æ•°æ®
const sealApplications = ref([
  {
    id: 'SEAL001',
    title: '合同用印申请',
    applicant: '陈志强',
    department: '销售部',
    sealType: '合同专用章',
    applyTime: '2025-01-15 10:30:00',
    status: 'pending',
    reason: '客户合同需要盖章'
  },
  {
    id: 'SEAL002',
    title: '财务报告用印',
    applicant: '王建国',
    department: '财务部',
    sealType: '财务专用章',
    applyTime: '2025-01-14 14:20:00',
    status: 'approved',
    reason: '季度财务报告需要盖章'
  },
  {
    id: 'SEAL003',
    title: '公司章程用印',
    applicant: '孙明华',
    department: '法务部',
    sealType: '公章',
    applyTime: '2025-01-13 09:15:00',
    status: 'rejected',
    reason: '公司章程修改需要盖章'
  }
])

const regulations = ref([
  {
    id: 'REG001',
    title: '员工考勤管理制度',
    category: 'hr',
    version: 'v2.1',
    publisher: '人事部',
    publishTime: '2025-01-10 09:00:00',
    status: 'active',
    readCount: 45,
    content: '为规范员工考勤管理，提高工作效率，特制定本制度...'
  },
  {
    id: 'REG002',
    title: '财务报销制度',
    category: 'finance',
    version: 'v1.5',
    publisher: '财务部',
    publishTime: '2025-01-08 14:30:00',
    status: 'active',
    readCount: 38,
    content: '为规范财务报销流程，加强财务管理，特制定本制度...'
  },
  {
    id: 'REG003',
    title: '安全生产管理制度',
    category: 'safety',
    version: 'v3.0',
    publisher: '安全部',
    publishTime: '2025-01-05 16:00:00',
    status: 'active',
    readCount: 52,
    content: '为确保员工人身安全，预防安全事故发生，特制定本制度...'
  }
])

const versionHistory = ref([
  { version: 'v2.1', updateTime: '2025-01-10 09:00:00', updater: '人事部', changeLog: '更新考勤时间规定' },
  { version: 'v2.0', updateTime: '2023-12-15 10:30:00', updater: '人事部', changeLog: '新增加班管理规定' },
  { version: 'v1.0', updateTime: '2023-11-01 14:00:00', updater: '人事部', changeLog: '首次发布' }
])

const readStatusList = ref([
  { employee: '陈志强', department: '销售部', readTime: '2025-01-11 10:30:00', confirmTime: '2025-01-11 10:35:00', status: 'confirmed' },
  { employee: '刘雅婷', department: '技术部', readTime: '2025-01-11 14:20:00', confirmTime: '', status: 'unconfirmed' },
  { employee: '王建国', department: '财务部', readTime: '2025-01-12 09:15:00', confirmTime: '2025-01-12 09:20:00', status: 'confirmed' }
])

// æ–¹æ³•
const getStatusType = (status) => {
  const statusMap = {
    pending: 'warning',
    approved: 'success',
    rejected: 'danger'
  }
  return statusMap[status] || 'info'
}

const getStatusText = (status) => {
  const statusMap = {
    pending: '待审批',
    approved: '已通过',
    rejected: '已拒绝'
  }
  return statusMap[status] || '未知'
}

const getCategoryText = (category) => {
  const categoryMap = {
    hr: '人事制度',
    finance: '财务制度',
    safety: '安全制度',
    tech: '技术制度'
  }
  return categoryMap[category] || '未知'
}

const searchSealApplications = () => {
  ElMessage.success('搜索完成')
}

const resetSealSearch = () => {
  sealSearchForm.keyword = ''
  sealSearchForm.status = ''
  searchSealApplications()
}

const searchRegulations = () => {
  ElMessage.success('搜索完成')
}

const resetRegulationSearch = () => {
  regulationSearchForm.keyword = ''
  regulationSearchForm.category = ''
  searchRegulations()
}

const submitSealApplication = async () => {
  try {
    await sealFormRef.value.validate()
    ElMessage.success('申请提交成功')
    showSealApplyDialog.value = false
    Object.assign(sealForm, {
      title: '',
      sealType: '',
      reason: '',
      urgency: 'normal'
    })
  } catch (error) {
    ElMessage.error('请完善申请信息')
  }
}

const submitRegulation = async () => {
  try {
    await regulationFormRef.value.validate()
    ElMessage.success('制度发布成功')
    showRegulationDialog.value = false
    Object.assign(regulationForm, {
      title: '',
      category: '',
      content: '',
      effectiveTime: '',
      scope: [],
      requireConfirm: true
    })
  } catch (error) {
    ElMessage.error('请完善制度信息')
  }
}

const viewSealDetail = (row) => {
  currentSealDetail.value = row
  showSealDetailDialog.value = true
}

const approveSeal = (row) => {
  ElMessageBox.confirm('确认通过该用印申请？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    row.status = 'approved'
    ElMessage.success('审批通过')
  })
}

const rejectSeal = (row) => {
  ElMessageBox.prompt('请输入拒绝原因', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    inputPattern: /\S+/,
    inputErrorMessage: '拒绝原因不能为空'
  }).then(({ value }) => {
    row.status = 'rejected'
    ElMessage.success('已拒绝申请')
  })
}

const viewRegulation = (row) => {
  currentRegulationDetail.value = row
  showRegulationDetailDialog.value = true
}

const editRegulation = (row) => {
  ElMessage.info('编辑功能开发中...')
}

const viewVersionHistory = (row) => {
  showVersionHistoryDialog.value = true
}

const viewReadStatus = (row) => {
  showReadStatusDialog.value = true
}

onMounted(() => {
  // åˆå§‹åŒ–
})
</script>

<style scoped>
.app-container {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tab-content {
  padding: 20px 0;
}

.mb-20 {
  margin-bottom: 20px;
}

.mt-20 {
  margin-top: 20px;
}

.ml-10 {
  margin-left: 10px;
}

.regulation-content {
  background-color: #f5f5f5;
  padding: 15px;
  border-radius: 4px;
  line-height: 1.6;
  white-space: pre-wrap;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
</style>

 src/views/collaborativeApproval/warningSystem/index.vue

@@ -96,7 +96,7 @@
          levelText: '红色预警',
          status: 'pending',
          statusText: '待处理',
          responsible: '张经理',
          responsible: '陈志强',
          description: 'A项目预算执行率已达95%，预计将超出预算范围。',
          impact: '影响项目整体财务指标，可能导致项目亏损',
          suggestions: '暂停非必要支出，优化资源配置，申请预算调整'
@@ -148,7 +148,7 @@
          levelText: '红色预警',
          status: 'pending',
          statusText: '待处理',
          responsible: '陈总监',
          responsible: '陈志强',
          description: '产品D在客户现场出现质量问题。',
          impact: '影响客户满意度，可能造成经济损失',
          suggestions: '立即召回问题产品，分析原因，制定改进措施'

 src/views/energyManagement/dynamicEnergySaving/index.vue

@@ -237,21 +237,21 @@
    version: 'v2.1.0',
    status: 'active',
    accuracy: '94.2%',
    lastUpdate: '2024-01-15 14:30:00'
    lastUpdate: '2025-01-15 14:30:00'
  },
  {
    modelName: '地层压力预测模型',
    version: 'v1.8.5',
    status: 'active',
    accuracy: '91.7%',
    lastUpdate: '2024-01-14 09:15:00'
    lastUpdate: '2025-01-14 09:15:00'
  },
  {
    modelName: '能耗分析模型',
    version: 'v2.0.3',
    status: 'standby',
    accuracy: '89.3%',
    lastUpdate: '2024-01-13 16:45:00'
    lastUpdate: '2025-01-13 16:45:00'
  }
])


 src/views/energyManagement/meterCollection/index.vue

@@ -227,7 +227,7 @@
        power: '75.5',
        powerFactor: '0.85',
        status: '正常',
        lastUpdateTime: '2024-01-15 10:30:00'
        lastUpdateTime: '2025-01-15 10:30:00'
      },
      {
        id: 2,
@@ -241,7 +241,7 @@
        power: '45.2',
        powerFactor: '0.92',
        status: '正常',
        lastUpdateTime: '2024-01-15 10:25:00'
        lastUpdateTime: '2025-01-15 10:25:00'
      }
    ]
    this.pagination.total = this.meterList.length
@@ -408,7 +408,7 @@
        power: '50.0',
        powerFactor: '0.85',
        status: '正常',
        lastUpdateTime: '2024-01-15 12:00:00'
        lastUpdateTime: '2025-01-15 12:00:00'
      }
      this.detailDialogVisible = true
    },

 src/views/equipmentManagement/brand/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,217 @@
<template>
  <div class="app-container">
    <el-form :model="filters" :inline="true">
      <el-form-item label="品牌名称/国家">
        <el-input
          v-model="filters.name"
          style="width: 240px"
          placeholder="请输入关键词"
          clearable
          prefix-icon="Search"
          @change="getTableData"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getTableData">搜索</el-button>
        <el-button @click="resetFilters">重置</el-button>
      </el-form-item>
    </el-form>

    <div class="table_list">
      <div class="actions">
        <div></div>
        <div>
          <el-button type="primary" @click="openAdd" icon="Plus"> æ–°å¢ž </el-button>
          <el-button
            type="danger"
            icon="Delete"
            :disabled="multipleSelection.length <= 0"
            @click="handleBatchDelete"
          >批量删除</el-button>
        </div>
      </div>

      <PIMTable
        rowKey="id"
        isSelection
        :column="columns"
        :tableData="dataList"
        :page="{
          current: pagination.currentPage,
          size: pagination.pageSize,
          total: pagination.total,
        }"
        @selection-change="handleSelectionChange"
        @pagination="changePage"
      >
      </PIMTable>
    </div>

    <el-dialog v-model="visible" :title="dialogTitle" width="520px" destroy-on-close>
      <el-form :model="form" ref="formRef" :rules="rules" label-width="90px">
        <el-form-item label="品牌名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入品牌名称" />
        </el-form-item>
        <el-form-item label="所属国家" prop="country">
          <el-input v-model="form.country" placeholder="请输入国家/地区" />
        </el-form-item>
        <el-form-item label="描述" prop="description">
          <el-input v-model="form.description" type="textarea" :rows="3" placeholder="可填写品牌简介" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="visible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </template>
    </el-dialog>
  </div>
  
</template>

<script setup>
import { ref, getCurrentInstance, onMounted } from 'vue'
import { ElMessageBox, ElMessage } from 'element-plus'
import { usePaginationApi } from '@/hooks/usePaginationApi'
import { getBrandPage, addBrand, editBrand, delBrand } from '@/api/equipmentManagement/brand'

defineOptions({ name: '设备品牌管理' })

const { proxy } = getCurrentInstance()

const multipleSelection = ref([])
const formRef = ref()
const visible = ref(false)
const dialogTitle = ref('新增品牌')
const form = ref({ id: undefined, name: '', country: '', description: '' })

const rules = {
  name: [{ required: true, message: '请输入品牌名称', trigger: 'blur' }],
  country: [{ required: true, message: '请输入所属国家', trigger: 'blur' }]
}

const {
  filters,
  columns,
  dataList,
  pagination,
  getTableData,
  resetFilters,
  onCurrentChange,
} = usePaginationApi(
  getBrandPage,
  { name: undefined },
  [
    { label: '品牌名称', align: 'center', prop: 'name' },
    { label: '所属国家', align: 'center', prop: 'country' },
    { label: '描述', align: 'center', prop: 'description' },
    { label: '创建时间', align: 'center', prop: 'createdAt' },
    {
      dataType: 'action',
      label: '操作',
      align: 'center',
      fixed: 'right',
      width: 140,
      operation: [
        {
          name: '编辑',
          type: 'text',
          clickFun: (row) => openEdit(row),
        },
        {
          name: '删除',
          type: 'text',
          clickFun: (row) => handleDelete(row.id),
        }
      ]
    }
  ]
)

const handleSelectionChange = (list) => {
  multipleSelection.value = list
}

const changePage = ({ page, limit }) => {
  pagination.currentPage = page
  pagination.pageSize = limit
  onCurrentChange(page)
}

function resetForm() {
  form.value = { id: undefined, name: '', country: '', description: '' }
}

function openAdd() {
  resetForm()
  dialogTitle.value = '新增品牌'
  visible.value = true
}

function openEdit(row) {
  form.value = { id: row.id, name: row.name, country: row.country, description: row.description }
  dialogTitle.value = '编辑品牌'
  visible.value = true
}

function handleSubmit() {
  formRef.value.validate(async (valid) => {
    if (!valid) return
    const isEdit = Boolean(form.value.id)
    const api = isEdit ? editBrand : addBrand
    const { code, msg } = await api({ ...form.value })
    if (code === 200) {
      ElMessage.success(isEdit ? '修改成功' : '新增成功')
      visible.value = false
      getTableData()
    } else {
      ElMessage.error(msg || '操作失败')
    }
  })
}

function handleDelete(id) {
  ElMessageBox.confirm('此操作将永久删除该品牌, æ˜¯å¦ç»§ç»­?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(async () => {
    const { code } = await delBrand(id)
    if (code === 200) {
      ElMessage.success('删除成功')
      getTableData()
    }
  })
}

function handleBatchDelete() {
  if (multipleSelection.value.length === 0) return
  ElMessageBox.confirm('将删除选中的品牌，是否继续？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(async () => {
    const ids = multipleSelection.value.map((i) => i.id)
    const { code } = await delBrand(ids)
    if (code === 200) {
      ElMessage.success('删除成功')
      getTableData()
    }
  })
}

onMounted(() => {
  getTableData()
})

</script>

<style scoped lang="scss">
.table_list { margin-top: unset; }
.actions {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
</style>



 src/views/equipmentManagement/gasTank/simple.vue

@@ -233,7 +233,7 @@
const maintenanceRecords = ref([
  {
    id: 1,
    date: '2024-01-15',
    date: '2025-01-15',
    type: 'inspection',
    title: '年度检验',
    description: '按照TSG 21-2016标准进行年度检验，设备状态良好',
@@ -241,7 +241,7 @@
  },
  {
    id: 2,
    date: '2024-02-20',
    date: '2025-02-20',
    type: 'maintenance',
    title: '安全阀维护',
    description: '更换安全阀密封圈，校准压力设定值',
@@ -249,7 +249,7 @@
  },
  {
    id: 3,
    date: '2024-03-10',
    date: '2025-03-10',
    type: 'inspection',
    title: '压力测试',
    description: '进行压力容器水压试验，符合设计要求',

 src/views/equipmentManagement/ledger/Form.vue

@@ -12,13 +12,28 @@
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="设备品牌" prop="deviceBrand">
          <el-input v-model="form.deviceBrand" placeholder="请输入设备品牌" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="供应商" prop="supplierName">
          <el-input v-model="form.supplierName" placeholder="请输入供应商" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="存放位置" prop="storageLocation">
          <el-input v-model="form.storageLocation" placeholder="请输入存放位置" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="单位" prop="unit">
          <el-input v-model="form.unit" placeholder="请输入单位" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="启用折旧" prop="enableDepreciation">
          <el-switch v-model="form.enableDepreciation" :active-value="true" :inactive-value="false" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
@@ -133,7 +148,10 @@
const { form, resetForm } = useFormData({
  deviceName: undefined, // è®¾å¤‡åç§°
  deviceModel: undefined, // è§„格型号
  deviceBrand: undefined, // è®¾å¤‡å“ç‰Œ
  supplierName: undefined, // ä¾›åº”商
  storageLocation: undefined, // å­˜æ”¾ä½ç½®
  enableDepreciation: false, // æ˜¯å¦å¯ç”¨æŠ˜æ—§
  unit: undefined, // å•ä½
  number: undefined, // æ•°é‡
  taxIncludingPriceUnit: undefined, // å«ç¨Žå•ä»·
@@ -152,7 +170,10 @@
  if (code == 200) {
    form.deviceName = data.deviceName;
    form.deviceModel = data.deviceModel;
    form.deviceBrand = data.deviceBrand;
    form.supplierName = data.supplierName;
    form.storageLocation = data.storageLocation;
    form.enableDepreciation = data.enableDepreciation;
    form.unit = data.unit;
    form.number = data.number;
    form.taxIncludingPriceUnit = data.taxIncludingPriceUnit;

 src/views/equipmentManagement/ledger/index.vue

@@ -146,6 +146,11 @@
      prop: "deviceModel",
    },
    {
      label: "设备品牌",
      align: "center",
      prop: "deviceBrand",
    },
    {
      label: "供应商",
      align: "center",
      prop: "supplierName",
@@ -154,6 +159,11 @@
      label: "单位",
      align: "center",
      prop: "unit",
    },
    {
      label: "存放位置",
      align: "center",
      prop: "storageLocation",
    },
    {
      label: "数量",
@@ -181,6 +191,12 @@
      prop: "unTaxIncludingPriceTotal",
    },
    {
      label: "启用折旧",
      align: "center",
      prop: "enableDepreciation",
      formatData: (v) => (v ? "是" : "否"),
    },
    {
      label: "录入人",
      align: "center",
      prop: "createUser",

 src/views/equipmentManagement/upkeep/Modal/MaintenanceModal.vue

@@ -30,7 +30,7 @@
  modalOptions,
  handleConfirm,
  closeModal,
} = useModal({ title: "设备维修" });
} = useModal({ title: "设备保养" });

/**
 * @desc ä¿å­˜ä¿å…»

 src/views/inventoryManagement/dispatchLog/index.vue

@@ -19,6 +19,7 @@
        <!-- <el-button type="primary" @click="openForm('add')">新增</el-button> -->
        <el-button @click="handleOut">导出</el-button>
        <el-button type="danger" plain @click="handleDelete">删除</el-button>
        <el-button type="primary" plain @click="handlePrint">打印</el-button>
      </div>
    </div>
    <div class="table_list">
@@ -37,9 +38,15 @@
        <el-table-column align="center" type="selection" width="55" />
        <el-table-column align="center" label="序号" type="index" width="60" />
        <el-table-column
            label="出库编号"
            prop="code"
            min-width="250"
            show-overflow-tooltip
        />
        <el-table-column
          label="出库日期"
          prop="createTime"
          min-width="250"
          min-width="130"
          show-overflow-tooltip
        />
        <el-table-column
@@ -75,13 +82,13 @@
        <el-table-column
          label="含税单价(元)"
          prop="taxInclusiveUnitPrice"
          width="100"
          width="200"
          show-overflow-tooltip
        />
        <el-table-column
          label="含税总价(元)"
          prop="taxInclusiveTotalPrice"
          width="100"
          width="200"
          show-overflow-tooltip
        />
        <el-table-column
@@ -128,6 +135,120 @@
        @pagination="paginationChange"
      />
    </div>

    <!-- æ‰“印预览弹窗 -->
    <el-dialog
      v-model="printPreviewVisible"
      title="打印预览"
      width="90%"
      :close-on-click-modal="false"
      class="print-preview-dialog"
    >
      <div class="print-preview-container">
                 <div class="print-preview-header">
           <el-button type="primary" @click="executePrint">执行打印</el-button>
           <el-button @click="printPreviewVisible = false">关闭预览</el-button>
         </div>
                   <div class="print-preview-content">
          <div v-if="printData.length === 0" style="text-align: center; padding: 50px; color: #999;">
            æš‚无打印数据
          </div>
          <div v-else style="text-align: center; padding: 10px; color: #666; font-size: 14px; background: #e8f4fd; margin-bottom: 10px;">
            å…± {{ printData.length }} æ¡æ•°æ®å¾…打印
          </div>
          <div v-for="(item, index) in printData" :key="index" class="print-page">
            <div class="delivery-note">
              <div class="header">
                <div class="company-name">鼎诚瑞实业有限责任公司</div>
                <div class="document-title">零售发货单</div>
              </div>
              
              <div class="info-section">
                <div class="info-row">
                  <div>
                    <span class="label">发货日期：</span>
                  <span class="value">{{ formatDate(item.createTime) }}</span>
                  </div>
                                     <div>
                     
                   <span class="label">客户名称：</span>
                   <span class="value">{{ item.supplierName || '张爱有' }}</span>
                   </div>
                </div>
                <div class="info-row">
                  <span class="label">单号：</span>
                  <span class="value">{{ item.code }}</span>
                </div>
              </div>

              <div class="table-section">
                <table class="product-table">
                  <thead>
                    <tr>
                      <th>产品名称</th>
                      <th>规格型号</th>
                      <th>单位</th>
                      <th>单价</th>
                      <th>零售数量</th>
                      <th>零售金额</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td>{{ item.productCategory || '砂灰砖' }}</td>
                      <td>{{ item.specificationModel || '标准' }}</td>
                      <td>{{ item.unit || '块' }}</td>
                      <td>{{ item.taxInclusiveUnitPrice || '0' }}</td>
                      <td>{{ item.inboundNum || '2000' }}</td>
                      <td>{{ item.taxInclusiveTotalPrice || '0' }}</td>
                    </tr>
                  </tbody>
                    <tfoot>
                     <tr>
                       <td class="label">合计</td>
                       <td class="total-value"></td>
                       <td class="total-value"></td>
                       <td class="total-value"></td>
                       <td class="total-value">{{ item.inboundNum || '2000' }}</td>
                       <td class="total-value">{{ item.taxInclusiveTotalPrice || '0' }}</td>
                     </tr>
                   </tfoot>
                </table>
              </div>

              <div class="footer-section">
                <div class="footer-row">
                  <div class="footer-item">
                    <span class="label">收货电话：</span>
                    <span class="value"></span>
                  </div>
                  <div class="footer-item">
                    <span class="label">收货人：</span>
                    <span class="value"></span>
                  </div>
                                     <div class="footer-item address-item">
                     <span class="label">收货地址：</span>
                     <span class="value address-value"></span>
                   </div>
                </div>
                <div class="footer-row">
                                     <div class="footer-item">
                     <span class="label">操作员：</span>
                     <span class="value">{{ userStore.nickname || '撕开前' }}</span>
                   </div>
                  <div class="footer-item">
                    <span class="label">打印日期：</span>
                    <span class="value">{{ formatDateTime(new Date()) }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>


  </div>
</template>

@@ -136,7 +257,6 @@
import { ref } from "vue";
import { ElMessageBox } from "element-plus";
import useUserStore from "@/store/modules/user";
import { userListNoPage } from "@/api/system/user.js";
import {
  getStockOutPage,
  delStockOut,
@@ -146,19 +266,18 @@
const { proxy } = getCurrentInstance();
const tableData = ref([]);
const selectedRows = ref([]);
const userList = ref([]);
const tableLoading = ref(false);
const productList = ref([])
const page = reactive({
  current: 1,
  size: 100,
});
const total = ref(0);
const fileList = ref([]);

// æ‰“印相关
const printPreviewVisible = ref(false);
const printData = ref([]);

// ç”¨æˆ·ä¿¡æ¯è¡¨å•å¼¹æ¡†æ•°æ®
const operationType = ref("");
const dialogFormVisible = ref(false);
const data = reactive({
  searchForm: {
    supplierName: "",
@@ -268,6 +387,296 @@
      proxy.$modal.msg("已取消");
    });
};

// æ‰“印功能
const handlePrint = () => {
  if (selectedRows.value.length === 0) {
    proxy.$modal.msgWarning("请选择要打印的数据");
    return;
  }
  printData.value = [...selectedRows.value];
  console.log('打印数据:', printData.value);
  printPreviewVisible.value = true;
};

// æ‰§è¡Œæ‰“印
const executePrint = () => {
  console.log('开始执行打印，数据条数:', printData.value.length);
  console.log('打印数据:', printData.value);
  
  // åˆ›å»ºä¸€ä¸ªæ–°çš„打印窗口
  const printWindow = window.open('', '_blank', 'width=800,height=600');
  
  // æž„建打印内容
  let printContent = `
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8">
      <title>打印预览</title>
      <style>
        body {
          margin: 0;
          padding: 0;
          font-family: "SimSun", serif;
          background: white;
        }
                                                     .print-page {
            width: 200mm;
            height: 75mm;
            padding: 10mm;
            padding-left: 20mm;
            background: white;
            box-sizing: border-box;
            page-break-after: always;
            page-break-inside: avoid;
          }
         .print-page:last-child {
           page-break-after: avoid;
         }
        .delivery-note {
          width: 100%;
          height: 100%;
          font-size: 12px;
          line-height: 1.2;
          display: flex;
          flex-direction: column;
          color: #000;
        }
        .header {
          text-align: center;
          margin-bottom: 8px;
        }
        .company-name {
          font-size: 18px;
          font-weight: bold;
          margin-bottom: 4px;
        }
        .document-title {
          font-size: 16px;
          font-weight: bold;
        }
        .info-section {
          margin-bottom: 8px;
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
        .info-row {
          line-height: 20px;
        }
        .label {
          font-weight: bold;
          width: 60px;
          font-size: 12px;
        }
        .value {
          margin-right: 20px;
          min-width: 80px;
          font-size: 12px;
        }
                 .table-section {
                 margin-bottom: 40px;
          //  flex: 0.6;
         }
        .product-table {
          width: 100%;
          border-collapse: collapse;
          border: 1px solid #000;
        }
                 .product-table th, .product-table td {
           border: 1px solid #000;
           padding: 6px;
           text-align: center;
           font-size: 12px;
           line-height: 1.4;
         }
        .product-table th {
          font-weight: bold;
        }
        .total-value {
          font-weight: bold;
        }
        .footer-section {
          margin-top: auto;
        }
        .footer-row {
          display: flex;
          margin-bottom: 3px;
          line-height: 22px;
          justify-content: space-between;
        }
        .footer-item {
          display: flex;
          margin-right: 20px;
        }
        .footer-item .label {
          font-weight: bold;
          width: 80px;
          font-size: 12px;
        }
        .footer-item .value {
          min-width: 80px;
          font-size: 12px;
        }
        .address-item .address-value {
          min-width: 200px;
        }
        @media print {
          body {
            margin: 0;
            padding: 0;
          }
                     .print-page {
             margin: 0;
             padding: 10mm;
             /* padding-left: 20mm; */
             page-break-inside: avoid;
             page-break-after: always;
           }
           .print-page:last-child {
             page-break-after: avoid;
           }
        }
      </style>
    </head>
    <body>
  `;
  
  // ä¸ºæ¯æ¡æ•°æ®ç”Ÿæˆæ‰“印页面
  printData.value.forEach((item, index) => {
    printContent += `
      <div class="print-page">
        <div class="delivery-note">
          <div class="header">
            <div class="company-name">鼎诚瑞实业有限责任公司</div>
            <div class="document-title">零售发货单</div>
          </div>
          
          <div class="info-section">
            <div class="info-row">
              <div>
                <span class="label">发货日期：</span>
                <span class="value">${formatDate(item.createTime)}</span>
              </div>
              <div>
                <span class="label">客户名称：</span>
                <span class="value">${item.supplierName || '张爱有'}</span>
              </div>
            </div>
            <div class="info-row">
              <span class="label">单号：</span>
              <span class="value">${item.code || ''}</span>
            </div>
          </div>

          <div class="table-section">
            <table class="product-table">
              <thead>
                <tr>
                  <th>产品名称</th>
                  <th>规格型号</th>
                  <th>单位</th>
                  <th>单价</th>
                  <th>零售数量</th>
                  <th>零售金额</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>${item.productCategory || '砂灰砖'}</td>
                  <td>${item.specificationModel || '标准'}</td>
                  <td>${item.unit || '块'}</td>
                  <td>${item.taxInclusiveUnitPrice || '0'}</td>
                  <td>${item.inboundNum || '2000'}</td>
                  <td>${item.taxInclusiveTotalPrice || '0'}</td>
                </tr>
              </tbody>
              <tfoot>
                <tr>
                  <td class="label">合计</td>
                  <td class="total-value"></td>
                  <td class="total-value"></td>
                  <td class="total-value"></td>
                  <td class="total-value">${item.inboundNum || '2000'}</td>
                  <td class="total-value">${item.taxInclusiveTotalPrice || '0'}</td>
                </tr>
              </tfoot>
            </table>
          </div>

          <div class="footer-section">
            <div class="footer-row">
              <div class="footer-item">
                <span class="label">收货电话：</span>
                <span class="value"></span>
              </div>
              <div class="footer-item">
                <span class="label">收货人：</span>
                <span class="value"></span>
              </div>
              <div class="footer-item address-item">
                <span class="label">收货地址：</span>
                <span class="value address-value"></span>
              </div>
            </div>
            <div class="footer-row">
              <div class="footer-item">
                <span class="label">操作员：</span>
                <span class="value">${userStore.nickname || '撕开前'}</span>
              </div>
              <div class="footer-item">
                <span class="label">打印日期：</span>
                <span class="value">${formatDateTime(new Date())}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    `;
  });
  
  printContent += `
    </body>
    </html>
  `;
  
  // å†™å…¥å†…容到新窗口
  printWindow.document.write(printContent);
  printWindow.document.close();
  
  // ç­‰å¾…内容加载完成后打印
  printWindow.onload = () => {
    setTimeout(() => {
      printWindow.print();
      printWindow.close();
      printPreviewVisible.value = false;
    }, 500);
  };
};



// æ ¼å¼åŒ–日期
const formatDate = (dateString) => {
  if (!dateString) return getCurrentDate();
  const date = new Date(dateString);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, "0");
  const day = String(date.getDate()).padStart(2, "0");
  return `${year}/${month}/${day}`;
};

// æ ¼å¼åŒ–日期时间
const formatDateTime = (date) => {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, "0");
  const day = String(date.getDate()).padStart(2, "0");
  const hours = String(date.getHours()).padStart(2, "0");
  const minutes = String(date.getMinutes()).padStart(2, "0");
  const seconds = String(date.getSeconds()).padStart(2, "0");
  return `${year}/${month}/${day} ${hours}:${minutes}:${seconds}`;
};
// èŽ·å–当前日期并格式化为 YYYY-MM-DD
function getCurrentDate() {
  const today = new Date();
@@ -281,4 +690,171 @@
});
</script>

<style scoped lang="scss"></style>
<style scoped lang="scss">
.print-preview-dialog {
  .el-dialog__body {
    padding: 0;
    max-height: 80vh;
    overflow-y: auto;
  }
}

.print-preview-container {
  .print-preview-header {
    padding: 15px;
    border-bottom: 1px solid #e4e7ed;
    text-align: center;
    
    .el-button {
      margin: 0 10px;
    }
  }
  
  .print-preview-content {
  padding: 20px;
  background-color: #f5f5f5;
  min-height: 400px;
}
}

.print-page {
  width: 220mm;
  height: 90mm;
  padding: 10mm;
  margin: 0 auto;
  background: white;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  margin-bottom: 10px;
  box-sizing: border-box;
}

.delivery-note {
  width: 100%;
  height: 100%;
  font-family: "SimSun", serif;
  font-size: 10px;
  line-height: 1.2;
  display: flex;
  flex-direction: column;
}

.header {
  text-align: center;
  margin-bottom: 8px;
  
  .company-name {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 4px;
  }
  
  .document-title {
    font-size: 16px;
    font-weight: bold;
  }
}

.info-section {
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  
  .info-row {
    line-height: 20px;
    
    .label {
      font-weight: bold;
      width: 60px;
      font-size: 14px;
    }
    
    .value {
      margin-right: 20px;
      min-width: 80px;
      font-size: 14px;
    }
  }
}

.table-section {
  margin-bottom: 4px;
  flex: 1;
  
  .product-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #000;
    
         th, td {
       border: 1px solid #000;
       padding: 6px;
       text-align: center;
       font-size: 14px;
       line-height: 1.4;
     }
    
    th {
      font-weight: bold;
    }
    
    .total-label {
      text-align: right;
      font-weight: bold;
    }
    
    .total-value {
      font-weight: bold;
    }
  }
}

.footer-section {
  .footer-row {
    display: flex;
    margin-bottom: 3px;
    line-height: 20px;
    justify-content: space-between;
    
         .footer-item {
       display: flex;
       margin-right: 20px;
       
       .label {
         font-weight: bold;
         width: 80px;
         font-size: 14px;
       }
       
       .value {
         min-width: 80px;
         font-size: 14px;
       }
       
       &.address-item {
         .address-value {
           min-width: 200px;
         }
       }
     }
  }
}

@media print {
  .app-container {
    display: none;
  }
  
           .print-page {
      box-shadow: none;
      margin: 0;
      padding: 10mm;
      padding-left: 20mm;
      page-break-inside: avoid;
      page-break-after: always;
    }
   .print-page:last-child {
     page-break-after: avoid;
   }
}
</style>

 src/views/inventoryManagement/index.vue

@@ -127,18 +127,18 @@
            <pagination :total="total" layout="total, sizes, prev, pager, next, jumper"
                                    :page="page.current" :limit="page.size" @pagination="paginationChange" />
        </div>
        <Modal ref="modalRef" @success="handleQuery"></Modal>
        <files-dia ref="filesDia"></files-dia>
        <!-- <Modal ref="modalRef" @success="handleQuery"></Modal> -->
        <!-- <files-dia ref="filesDia"></files-dia> -->
    </div>
</template>

<script setup>
import { ref, onMounted, reactive, toRefs, nextTick, getCurrentInstance } from 'vue'
import dayjs from "dayjs";
import Modal from "./Modal.vue";
import FilesDia from "./filesDia.vue";
// import Modal from "./Modal.vue";
// import FilesDia from "./filesDia.vue";
import Pagination from "@/components/Pagination/index.vue";
import {lavorIssueListPage, deleteLedger, update} from "@/api/lavorissce/ledger.js";
import {listPage, deleteLedger, update} from "@/api/lavorissce/ledger.js";
import {ElMessageBox, ElMessage} from "element-plus";
const { proxy } = getCurrentInstance();
import { getCurrentMonth } from "@/utils/util"
@@ -162,7 +162,7 @@
const { searchForm } = toRefs(data);

const modalRef = ref();
const filesDia = ref();
// const filesDia = ref();
const multipleList = ref([]);
const jidu = ref([
    {
@@ -192,7 +192,7 @@
const getList = async () => {
    tableLoading.value = true;
    const params = { ...searchForm.value, ...page.value };
    lavorIssueListPage(params).then(res => {
    listPage(params).then(res => {
        tableLoading.value = false;
        tableData.value = res.data.records;
        total.value = res.data.total;
@@ -256,11 +256,11 @@
    })
}
// æ‰“开附件弹框
const openFilesFormDia = (row) => {
    nextTick(() => {
        filesDia.value?.openDialog( row,'收入')
    })
};
// const openFilesFormDia = (row) => {
//     nextTick(() => {
//         filesDia.value?.openDialog( row,'收入')
//     })
// };
// äº‹ä»¶å¤„理函数
const handleSelectionChange = (selection) => {
    multipleList.value = selection;

 src/views/inventoryManagement/issueManagement/index.vue

@@ -196,7 +196,7 @@
// æäº¤è¡¨å•
const submitForm = () => {
  let num = Number(form.value.inboundQuantity)
  if(num < 1 || num > currentRowNum.value){
  if(num <= 0 || num > currentRowNum.value){
    return proxy.$modal.msgWarning("请填入有效数字")
  }
  proxy.$refs["formRef"].validate(valid => {

 src/views/inventoryManagement/stockWarning/index.vue

@@ -558,11 +558,11 @@
      warningLevel: '紧急',
      warningThreshold: 20,
      isEnabled: true,
      warningTime: '2024-01-15 08:30:00',
      warningTime: '2025-01-15 08:30:00',
      warningDuration: 3,
      lastUpdateTime: '2024-01-15 10:00:00',
      expectedRefillTime: '2024-01-16 14:00:00',
      expectedShortageTime: '2024-01-15 18:30:00', // ä»Šå¤©ä¸‹åˆ6:30缺气
      lastUpdateTime: '2025-01-15 10:00:00',
      expectedRefillTime: '2025-01-16 14:00:00',
      expectedShortageTime: '2025-01-15 18:30:00', // ä»Šå¤©ä¸‹åˆ6:30缺气
      warningRule: '当气体量低于20%时触发预警'
    },
    {
@@ -581,11 +581,11 @@
      warningLevel: '重要',
      warningThreshold: 10,
      isEnabled: true,
      warningTime: '2024-01-14 16:20:00',
      warningTime: '2025-01-14 16:20:00',
      warningDuration: 2,
      lastUpdateTime: '2024-01-15 09:15:00',
      expectedRefillTime: '2024-01-17 09:00:00',
      expectedShortageTime: '2024-01-18 12:00:00', // 3天后缺气
      lastUpdateTime: '2025-01-15 09:15:00',
      expectedRefillTime: '2025-01-17 09:00:00',
      expectedShortageTime: '2025-01-18 12:00:00', // 3天后缺气
      warningRule: '当压力超过8MPa时触发预警'
    },
    {
@@ -604,11 +604,11 @@
      warningLevel: '一般',
      warningThreshold: 5,
      isEnabled: true,
      warningTime: '2024-01-13 11:45:00',
      warningTime: '2025-01-13 11:45:00',
      warningDuration: 1,
      lastUpdateTime: '2024-01-15 08:45:00',
      expectedRefillTime: '2024-01-20 10:00:00',
      expectedShortageTime: '2024-01-22 15:30:00', // 7天后缺气
      lastUpdateTime: '2025-01-15 08:45:00',
      expectedRefillTime: '2025-01-20 10:00:00',
      expectedShortageTime: '2025-01-22 15:30:00', // 7天后缺气
      warningRule: '当温度超过60°C时触发预警'
    },
    {
@@ -627,11 +627,11 @@
      warningLevel: '紧急',
      warningThreshold: 15,
      isEnabled: true,
      warningTime: '2024-01-15 07:15:00',
      warningTime: '2025-01-15 07:15:00',
      warningDuration: 4,
      lastUpdateTime: '2024-01-15 11:30:00',
      expectedRefillTime: '2024-01-15 16:00:00',
      expectedShortageTime: '2024-01-15 14:00:00', // ä»Šå¤©ä¸‹åˆ2点缺气
      lastUpdateTime: '2025-01-15 11:30:00',
      expectedRefillTime: '2025-01-15 16:00:00',
      expectedShortageTime: '2025-01-15 14:00:00', // ä»Šå¤©ä¸‹åˆ2点缺气
      warningRule: '当检测到气体泄漏时触发预警'
    },
    {
@@ -650,11 +650,11 @@
      warningLevel: '重要',
      warningThreshold: 20,
      isEnabled: false,
      warningTime: '2024-01-14 14:30:00',
      warningTime: '2025-01-14 14:30:00',
      warningDuration: 2,
      lastUpdateTime: '2024-01-15 09:00:00',
      expectedRefillTime: '2024-01-19 08:00:00',
      expectedShortageTime: '2024-01-21 10:00:00', // 6天后缺气
      lastUpdateTime: '2025-01-15 09:00:00',
      expectedRefillTime: '2025-01-19 08:00:00',
      expectedShortageTime: '2025-01-21 10:00:00', // 6天后缺气
      warningRule: '当气体量低于20%时触发预警'
    },
    {
@@ -673,11 +673,11 @@
      warningLevel: '一般',
      warningThreshold: 8,
      isEnabled: true,
      warningTime: '2024-01-12 09:20:00',
      warningTime: '2025-01-12 09:20:00',
      warningDuration: 1,
      lastUpdateTime: '2024-01-15 08:30:00',
      expectedRefillTime: '2024-01-25 14:00:00',
      expectedShortageTime: '2024-01-28 16:00:00', // 13天后缺气
      lastUpdateTime: '2025-01-15 08:30:00',
      expectedRefillTime: '2025-01-25 14:00:00',
      expectedShortageTime: '2025-01-28 16:00:00', // 13天后缺气
      warningRule: '当压力超过8MPa时触发预警'
    },
    {
@@ -696,11 +696,11 @@
      warningLevel: '重要',
      warningThreshold: 6,
      isEnabled: true,
      warningTime: '2024-01-11 16:45:00',
      warningTime: '2025-01-11 16:45:00',
      warningDuration: 1,
      lastUpdateTime: '2024-01-15 07:45:00',
      expectedRefillTime: '2024-01-30 09:00:00',
      expectedShortageTime: '2024-02-05 12:00:00', // 21天后缺气
      lastUpdateTime: '2025-01-15 07:45:00',
      expectedRefillTime: '2025-01-30 09:00:00',
      expectedShortageTime: '2025-02-05 12:00:00', // 21天后缺气
      warningRule: '当温度超过60°C时触发预警'
    },
    {
@@ -719,11 +719,11 @@
      warningLevel: '紧急',
      warningThreshold: 12,
      isEnabled: true,
      warningTime: '2024-01-15 06:30:00',
      warningTime: '2025-01-15 06:30:00',
      warningDuration: 5,
      lastUpdateTime: '2024-01-15 12:15:00',
      expectedRefillTime: '2024-01-15 20:00:00',
      expectedShortageTime: '2024-01-15 17:30:00', // ä»Šå¤©ä¸‹åˆ5:30缺气
      lastUpdateTime: '2025-01-15 12:15:00',
      expectedRefillTime: '2025-01-15 20:00:00',
      expectedShortageTime: '2025-01-15 17:30:00', // ä»Šå¤©ä¸‹åˆ5:30缺气
      warningRule: '当检测到气体泄漏时触发预警'
    }
  ]

 src/views/login.vue

@@ -181,7 +181,7 @@
<style lang='scss' scoped>

.login {

  height: 100%;

  background-image: url("../assets/images/login-background.png");

  background-image: url("../assets/indexViews/JZYJView.png");

  background-size: cover;

  position: relative;

}


 src/views/personnelManagement/analytics/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,698 @@
<template>
  <div class="app-container analytics-container">

    <!-- å…³é”®æŒ‡æ ‡å¡ç‰‡ -->
    <el-row :gutter="20" class="metrics-cards">
      <el-col :span="6" v-for="(item, index) in keyMetrics" :key="index">
        <el-card class="metric-card" :class="item.type">
          <div class="card-content">
            <div class="card-icon">
              <el-icon :size="32">
                <component :is="item.icon" />
              </el-icon>
            </div>
            <div class="card-info">
              <div class="card-number">
                <el-skeleton-item v-if="loading" variant="text" style="width: 60px; height: 32px;" />
                <span v-else>{{ item.value }}{{ item.unit }}</span>
              </div>
              <div class="card-label">{{ item.label }}</div>
              <div class="card-trend" :class="item.trend > 0 ? 'positive' : 'negative'">
                <el-icon>
                  <component :is="item.trend > 0 ? 'ArrowUp' : 'ArrowDown'" />
                </el-icon>
                {{ Math.abs(item.trend) }}%
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- å›¾è¡¨åŒºåŸŸ -->
    <el-row :gutter="20" class="charts-section">
      <!-- å‘˜å·¥æµåŠ¨çŽ‡è¶‹åŠ¿å›¾ -->
      <el-col :span="12">
        <el-card class="chart-card">
          <template #header>
            <div class="card-header">
              <span>员工流动率趋势</span>
              <el-tag type="info">近12个月</el-tag>
            </div>
          </template>
          <div class="chart-container">
            <div ref="turnoverChartRef" class="chart"></div>
          </div>
        </el-card>
      </el-col>

      <!-- éƒ¨é—¨äººå‘˜åˆ†å¸ƒ -->
      <el-col :span="12">
        <el-card class="chart-card">
          <template #header>
            <div class="card-header">
              <span>部门人员分布</span>
              <el-tag type="success">当前状态</el-tag>
            </div>
          </template>
          <div class="chart-container">
            <div ref="departmentChartRef" class="chart"></div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- ç¬¬äºŒè¡Œå›¾è¡¨ -->
    <el-row :gutter="20" class="charts-section">
      <!-- ç¼–制达成率 -->
      <el-col :span="12">
        <el-card class="chart-card">
          <template #header>
            <div class="card-header">
              <span>编制达成率</span>
              <el-tag type="warning">各部门对比</el-tag>
            </div>
          </template>
          <div class="chart-container">
            <div ref="staffingChartRef" class="chart"></div>
          </div>
        </el-card>
      </el-col>

      <!-- å‘˜å·¥æµå¤±åŽŸå› åˆ†æž -->
      <el-col :span="12">
        <el-card class="chart-card">
          <template #header>
            <div class="card-header">
              <span>员工流失原因分析</span>
              <el-tag type="danger">年度统计</el-tag>
            </div>
          </template>
          <div class="chart-container">
            <div ref="attritionChartRef" class="chart"></div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, onUnmounted } from 'vue'
import { ElMessage } from 'element-plus'
import { 
  Refresh, 
  User, 
  TrendCharts, 
  DataAnalysis, 
  PieChart,
  ArrowUp,
  ArrowDown
} from '@element-plus/icons-vue'
import * as echarts from 'echarts'

// å“åº”式数据
const loading = ref(false)
const autoRefreshEnabled = ref(true)
const autoRefreshInterval = ref(null)

// å›¾è¡¨å¼•ç”¨
const turnoverChartRef = ref(null)
const departmentChartRef = ref(null)
const staffingChartRef = ref(null)
const attritionChartRef = ref(null)

// å›¾è¡¨å®žä¾‹
let turnoverChart = null
let departmentChart = null
let staffingChart = null
let attritionChart = null

// è‡ªåŠ¨æ›´æ–°é—´éš”（10分钟）
const AUTO_REFRESH_INTERVAL = 10 * 60 * 1000

// å…³é”®æŒ‡æ ‡æ•°æ®
const keyMetrics = ref([
  {
    label: '员工流动率',
    value: 0,
    unit: '%',
    icon: 'TrendCharts',
    type: 'primary',
    trend: 0
  },
  {
    label: '员工流失率',
    value: 0,
    unit: '%',
    icon: 'User',
    type: 'danger',
    trend: 0
  },
  {
    label: '编制达成率',
    value: 0,
    unit: '%',
    icon: 'DataAnalysis',
    type: 'success',
    trend: 0
  },
  {
    label: '在职员工数',
    value: 0,
    unit: '人',
    icon: 'PieChart',
    type: 'warning',
    trend: 0
  }
])

// éƒ¨é—¨æ•°æ®
const departmentData = ref([])

// å¯åŠ¨è‡ªåŠ¨åˆ·æ–°
const startAutoRefresh = () => {
  if (autoRefreshInterval.value) {
    clearInterval(autoRefreshInterval.value)
  }
  if (autoRefreshEnabled.value) {
    autoRefreshInterval.value = setInterval(() => {
      refreshData()
    }, AUTO_REFRESH_INTERVAL)
  }
}

// åœæ­¢è‡ªåŠ¨åˆ·æ–°
const stopAutoRefresh = () => {
  if (autoRefreshInterval.value) {
    clearInterval(autoRefreshInterval.value)
    autoRefreshInterval.value = null
  }
}

// åˆ‡æ¢è‡ªåŠ¨åˆ·æ–°çŠ¶æ€
const toggleAutoRefresh = (value) => {
  if (value) {
    startAutoRefresh()
  } else {
    stopAutoRefresh()
  }
}

// ç”Ÿæˆæ¨¡æ‹Ÿæ•°æ®
const generateMockData = () => {
  // ç”Ÿæˆå…³é”®æŒ‡æ ‡æ•°æ®
  keyMetrics.value[0].value = (Math.random() * 5 + 2).toFixed(1)
  keyMetrics.value[0].trend = (Math.random() * 3 - 1.5).toFixed(1)
  
  keyMetrics.value[1].value = (Math.random() * 3 + 1).toFixed(1)
  keyMetrics.value[1].trend = (Math.random() * 2 - 1).toFixed(1)
  
  keyMetrics.value[2].value = (Math.random() * 15 + 85).toFixed(1)
  keyMetrics.value[2].trend = (Math.random() * 3 - 1.5).toFixed(1)
  
  keyMetrics.value[3].value = Math.floor(Math.random() * 50 + 200)
  keyMetrics.value[3].trend = (Math.random() * 2 - 1).toFixed(1)

  // ç”Ÿæˆéƒ¨é—¨æ•°æ®
  const departments = ['技术部', '销售部', '人事部', '财务部', '生产部', '市场部']
  departmentData.value = departments.map(dept => ({
    department: dept,
    currentStaff: Math.floor(Math.random() * 30 + 20),
    plannedStaff: Math.floor(Math.random() * 10 + 35),
    staffingRate: Math.floor(Math.random() * 20 + 80),
    turnoverRate: (Math.random() * 4 + 1).toFixed(1),
    attritionRate: (Math.random() * 2 + 0.5).toFixed(1),
    newHires: Math.floor(Math.random() * 5 + 1),
    resignations: Math.floor(Math.random() * 3 + 1),
    status: Math.random() > 0.7 ? '异常' : '正常'
  }))
}

// åˆ·æ–°æ•°æ®
const refreshData = async () => {
  loading.value = true
  try {
    // æ¨¡æ‹ŸAPI调用延迟
    await new Promise(resolve => setTimeout(resolve, 500))
    
    generateMockData()
    renderAllCharts()
    
    if (!autoRefreshEnabled.value) {
      ElMessage.success('数据刷新成功')
    }
  } catch (error) {
    console.error('刷新数据失败:', error)
    ElMessage.error('刷新数据失败')
  } finally {
    loading.value = false
  }
}

// åˆå§‹åŒ–图表
const initCharts = () => {
  setTimeout(() => {
    if (turnoverChartRef.value) {
      turnoverChart = echarts.init(turnoverChartRef.value)
    }
    if (departmentChartRef.value) {
      departmentChart = echarts.init(departmentChartRef.value)
    }
    if (staffingChartRef.value) {
      staffingChart = echarts.init(staffingChartRef.value)
    }
    if (attritionChartRef.value) {
      attritionChart = echarts.init(attritionChartRef.value)
    }
    
    renderAllCharts()
  }, 300)
}

// æ¸²æŸ“所有图表
const renderAllCharts = () => {
  renderTurnoverChart()
  renderDepartmentChart()
  renderStaffingChart()
  renderAttritionChart()
}

// æ¸²æŸ“员工流动率趋势图
const renderTurnoverChart = () => {
  if (!turnoverChart) return
  
  const months = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
  const turnoverData = months.map(() => (Math.random() * 5 + 2).toFixed(1))
  const attritionData = months.map(() => (Math.random() * 3 + 1).toFixed(1))
  
  const option = {
    title: {
      text: '员工流动率趋势',
      left: 'center',
      textStyle: { fontSize: 16, fontWeight: 'normal' }
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: { type: 'cross' }
    },
    legend: {
      data: ['流动率', '流失率'],
      bottom: 10
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '15%',
      top: '15%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: months,
      boundaryGap: false
    },
    yAxis: {
      type: 'value',
      axisLabel: { formatter: '{value}%' }
    },
    series: [
      {
        name: '流动率',
        type: 'line',
        data: turnoverData,
        smooth: true,
        lineStyle: { color: '#409EFF' },
        itemStyle: { color: '#409EFF' }
      },
      {
        name: '流失率',
        type: 'line',
        data: attritionData,
        smooth: true,
        lineStyle: { color: '#F56C6C' },
        itemStyle: { color: '#F56C6C' }
      }
    ]
  }
  
  turnoverChart.setOption(option)
}

// æ¸²æŸ“部门人员分布图
const renderDepartmentChart = () => {
  if (!departmentChart) return
  
  const data = departmentData.value.map(item => ({
    name: item.department,
    value: item.currentStaff
  }))
  
  const option = {
    title: {
      text: '部门人员分布',
      left: 'center',
      textStyle: { fontSize: 16, fontWeight: 'normal' }
    },
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c}人 ({d}%)'
    },
    legend: {
      orient: 'vertical',
      left: 'left',
      top: 'middle'
    },
    series: [
      {
        name: '人员数量',
        type: 'pie',
        radius: ['40%', '70%'],
        center: ['60%', '50%'],
        data: data,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  }
  
  departmentChart.setOption(option)
}

// æ¸²æŸ“编制达成率图
const renderStaffingChart = () => {
  if (!staffingChart) return
  
  const departments = departmentData.value.map(item => item.department)
  const rates = departmentData.value.map(item => item.staffingRate)
  
  const option = {
    title: {
      text: '编制达成率',
      left: 'center',
      textStyle: { fontSize: 16, fontWeight: 'normal' }
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: { type: 'shadow' }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '15%',
      top: '15%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: departments,
      axisLabel: { rotate: 45 }
    },
    yAxis: {
      type: 'value',
      axisLabel: { formatter: '{value}%' },
      max: 100
    },
    series: [
      {
        name: '达成率',
        type: 'bar',
        data: rates,
        itemStyle: {
          color: function(params) {
            const value = params.value
            if (value >= 90) return '#67C23A'
            if (value >= 80) return '#E6A23C'
            return '#F56C6C'
          }
        }
      }
    ]
  }
  
  staffingChart.setOption(option)
}

// æ¸²æŸ“员工流失原因分析图
const renderAttritionChart = () => {
  if (!attritionChart) return
  
  const reasons = ['薪资待遇', '职业发展', '工作环境', '个人原因', '其他']
  const data = reasons.map(() => Math.floor(Math.random() * 20 + 5))
  
  const option = {
    title: {
      text: '员工流失原因分析',
      left: 'center',
      textStyle: { fontSize: 16, fontWeight: 'normal' }
    },
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c}人 ({d}%)'
    },
    legend: {
      orient: 'vertical',
      left: 'left',
      top: 'middle'
    },
    series: [
      {
        name: '流失人数',
        type: 'pie',
        radius: '50%',
        center: ['60%', '50%'],
        data: reasons.map((reason, index) => ({
          name: reason,
          value: data[index]
        })),
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  }
  
  attritionChart.setOption(option)
}
 
// ç”Ÿå‘½å‘¨æœŸ
onMounted(() => {
  generateMockData()
  initCharts()
  startAutoRefresh()
})

onUnmounted(() => {
  stopAutoRefresh()
})
</script>

<style scoped>
.analytics-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.page-header {
  text-align: center;
  margin-bottom: 30px;
  padding: 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  color: white;
}

.page-header h2 {
  color: white;
  margin-bottom: 10px;
  font-size: 28px;
  font-weight: 600;
}

.page-header p {
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  margin: 0 0 15px 0;
}

.header-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

.refresh-btn {
  margin-left: 20px;
}

.metrics-cards {
  margin-bottom: 30px;
}

.metric-card {
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  border: none;
  overflow: hidden;
}

.metric-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.metric-card.primary {
  border-left: 4px solid #409EFF;
  background: linear-gradient(135deg, #409EFF 0%, #36a3f7 100%);
}

.metric-card.danger {
  border-left: 4px solid #F56C6C;
  background: linear-gradient(135deg, #F56C6C 0%, #f78989 100%);
}

.metric-card.success {
  border-left: 4px solid #67C23A;
  background: linear-gradient(135deg, #67C23A 0%, #85ce61 100%);
}

.metric-card.warning {
  border-left: 4px solid #E6A23C;
  background: linear-gradient(135deg, #E6A23C 0%, #ebb563 100%);
}

.card-content {
  display: flex;
  align-items: center;
  padding: 20px;
}

.card-icon {
  margin-right: 20px;
  color: white;
}

.card-info {
  flex: 1;
}

.card-number {
  font-size: 32px;
  font-weight: 600;
  color: white;
  margin-bottom: 5px;
}

.card-label {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 5px;
}

.card-trend {
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.card-trend.positive {
  color: #67C23A;
}

.card-trend.negative {
  color: #F56C6C;
}

.charts-section {
  margin-bottom: 30px;
}

.chart-card {
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border: none;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  color: #303133;
  padding: 15px 20px;
  border-bottom: 1px solid #ebeef5;
}

.chart-container {
  height: 350px;
  padding: 20px;
}

.chart {
  width: 100%;
  height: 100%;
}

/* å“åº”式设计 */
@media (max-width: 768px) {
  .analytics-container {
    padding: 10px;
  }
  
  .page-header {
    padding: 15px;
  }
  
  .page-header h2 {
    font-size: 24px;
  }
  
  .header-controls {
    flex-direction: column;
    gap: 15px;
  }
  
  .refresh-btn {
    margin-left: 0;
  }
  
  .metrics-cards .el-col {
    margin-bottom: 15px;
  }
  
  .charts-section .el-col {
    margin-bottom: 20px;
  }
  
  .chart-container {
    height: 300px;
  }
}

@media (max-width: 480px) {
  .page-header h2 {
    font-size: 20px;
  }
  
  .card-number {
    font-size: 24px;
  }
  
  .chart-container {
    height: 250px;
  }
}
</style>

 src/views/personnelManagement/scheduling/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,634 @@
<template>
  <div class="app-container scheduling-container">
    <!-- ç­›é€‰åŒºåŸŸ -->
    <div class="filter-section">
      <el-form :inline="true" :model="filterForm" class="filter-form">
        <el-form-item label="员工姓名：">
          <el-input
            v-model="filterForm.employeeName"
            placeholder="请输入员工姓名"
            clearable
            style="width: 150px"
          />
        </el-form-item>
        <el-form-item label="班次类型：">
          <el-select v-model="filterForm.shiftType" placeholder="请选择班次" clearable style="width: 120px">
            <el-option label="早班" value="早班" />
            <el-option label="中班" value="中班" />
            <el-option label="晚班" value="晚班" />
            <el-option label="夜班" value="夜班" />
          </el-select>
        </el-form-item>
        <el-form-item label="日期范围：">
          <el-date-picker
            v-model="filterForm.dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            style="width: 250px"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleFilter">
            <el-icon><Search /></el-icon>
            ç­›é€‰
          </el-button>
          <el-button @click="resetFilter">
            <el-icon><Refresh /></el-icon>
            é‡ç½®
          </el-button>
          <el-button type="primary" @click="openScheduleDialog('add')">
          <el-icon><Plus /></el-icon>
          æ–°å¢žæŽ’班
        </el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- æŽ’班表格 -->
    <div class="table-section">
      <el-table
        :data="filteredScheduleList"
        border
        stripe
        style="width: 100%"
        height="calc(100vh - 18.5em)"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="employeeName" label="员工姓名" width="120" />
        <el-table-column prop="employeeId" label="员工工号" width="100" />
        <el-table-column prop="department" label="部门" width="120" />
        <el-table-column prop="shiftType" label="班次类型" width="100">
          <template #default="scope">
            <el-tag :type="getShiftTagType(scope.row.shiftType)">
              {{ scope.row.shiftType }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="workDate" label="工作日期" width="120" />
        <el-table-column prop="startTime" label="开始时间" width="100" />
        <el-table-column prop="endTime" label="结束时间" width="100" />
        <el-table-column prop="workHours" label="工作时长" width="100">
          <template #default="scope">
            {{ scope.row.workHours }}小时
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="100">
          <template #default="scope">
            <el-tag :type="getStatusTagType(scope.row.status)">
              {{ scope.row.status }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注" min-width="150" />
        <el-table-column label="操作" width="200" fixed="right">
          <template #default="scope">
            <el-button
              type="primary"
              size="small"
              @click="openScheduleDialog('edit', scope.row)"
            >
              ç¼–辑
            </el-button>
            <el-button
              type="danger"
              size="small"
              @click="handleDelete(scope.row)"
            >
              åˆ é™¤
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- æ‰¹é‡æ“ä½œ -->
    <div class="batch-actions" v-if="selectedRows.length > 0">
      <el-button
        type="danger"
        @click="handleBatchDelete"
        :disabled="selectedRows.length === 0"
      >
        æ‰¹é‡åˆ é™¤ ({{ selectedRows.length }})
      </el-button>
    </div>

    <!-- æŽ’班新增/编辑对话框 -->
    <el-dialog
      v-model="scheduleDialog"
      :title="dialogType === 'add' ? '新增排班' : '编辑排班'"
      width="700px"
      @close="closeScheduleDialog"
    >
      <el-form
        :model="scheduleForm"
        :rules="scheduleRules"
        ref="scheduleFormRef"
        label-width="120px"
      >
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="员工姓名：" prop="employeeName">
              <el-input v-model="scheduleForm.employeeName" placeholder="请输入员工姓名" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="员工工号：" prop="employeeId">
              <el-input v-model="scheduleForm.employeeId" placeholder="请输入员工工号" />
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="部门：" prop="department">
              <el-select v-model="scheduleForm.department" placeholder="请选择部门" style="width: 100%">
                <el-option label="技术部" value="技术部" />
                <el-option label="销售部" value="销售部" />
                <el-option label="人事部" value="人事部" />
                <el-option label="财务部" value="财务部" />
                <el-option label="生产部" value="生产部" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="班次类型：" prop="shiftType">
              <el-select v-model="scheduleForm.shiftType" placeholder="请选择班次" style="width: 100%">
                <el-option label="早班" value="早班" />
                <el-option label="中班" value="中班" />
                <el-option label="晚班" value="晚班" />
                <el-option label="夜班" value="夜班" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="工作日期：" prop="workDate">
              <el-date-picker
                v-model="scheduleForm.workDate"
                type="date"
                placeholder="选择工作日期"
                style="width: 100%"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="状态：" prop="status">
              <el-select v-model="scheduleForm.status" placeholder="请选择状态" style="width: 100%">
                <el-option label="已安排" value="已安排" />
                <el-option label="已确认" value="已确认" />
                <el-option label="已完成" value="已完成" />
                <el-option label="已取消" value="已取消" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="开始时间：" prop="startTime">
              <el-time-picker
                v-model="scheduleForm.startTime"
                placeholder="选择开始时间"
                style="width: 100%"
                format="HH:mm"
                value-format="HH:mm"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="结束时间：" prop="endTime">
              <el-time-picker
                v-model="scheduleForm.endTime"
                placeholder="选择结束时间"
                style="width: 100%"
                format="HH:mm"
                value-format="HH:mm"
              />
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="备注：" prop="remark">
              <el-input
                v-model="scheduleForm.remark"
                type="textarea"
                :rows="3"
                placeholder="请输入备注信息"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitScheduleForm">确认</el-button>
          <el-button @click="closeScheduleDialog">取消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus, Download, Search, Refresh } from '@element-plus/icons-vue'

// å“åº”式数据
const scheduleDialog = ref(false)
const dialogType = ref('add')
const selectedRows = ref([])
const scheduleFormRef = ref()

// ç­›é€‰è¡¨å•
const filterForm = reactive({
  employeeName: '',
  shiftType: '',
  dateRange: []
})

// æŽ’班表单
const scheduleForm = reactive({
  id: '',
  employeeName: '',
  employeeId: '',
  department: '',
  shiftType: '',
  workDate: '',
  startTime: '',
  endTime: '',
  workHours: 0,
  status: '已安排',
  remark: ''
})

// è¡¨å•éªŒè¯è§„则
const scheduleRules = reactive({
  employeeName: [{ required: true, message: '请输入员工姓名', trigger: 'blur' }],
  employeeId: [{ required: true, message: '请输入员工工号', trigger: 'blur' }],
  department: [{ required: true, message: '请选择部门', trigger: 'change' }],
  shiftType: [{ required: true, message: '请选择班次类型', trigger: 'change' }],
  workDate: [{ required: true, message: '请选择工作日期', trigger: 'change' }],
  startTime: [{ required: true, message: '请选择开始时间', trigger: 'change' }],
  endTime: [{ required: true, message: '请选择结束时间', trigger: 'change' }],
  status: [{ required: true, message: '请选择状态', trigger: 'change' }]
})

// æ¨¡æ‹ŸæŽ’班数据
const scheduleList = ref([
  {
    id: 1,
    employeeName: '张海洋',
    employeeId: 'EMP001',
    department: '技术部',
    shiftType: '早班',
    workDate: '2024-01-15',
    startTime: '08:00',
    endTime: '17:00',
    workHours: 9,
    status: '已安排',
    remark: '正常排班'
  },
  {
    id: 2,
    employeeName: '李超',
    employeeId: 'EMP002',
    department: '销售部',
    shiftType: '中班',
    workDate: '2024-01-15',
    startTime: '14:00',
    endTime: '22:00',
    workHours: 8,
    status: '已确认',
    remark: '客户会议'
  },
  {
    id: 3,
    employeeName: '王杰',
    employeeId: 'EMP003',
    department: '生产部',
    shiftType: '晚班',
    workDate: '2024-01-15',
    startTime: '22:00',
    endTime: '06:00',
    workHours: 8,
    status: '已安排',
    remark: '夜班生产'
  }
])

// è®¡ç®—属性：筛选后的排班列表
const filteredScheduleList = computed(() => {
  let result = scheduleList.value

  if (filterForm.employeeName) {
    result = result.filter(item => 
      item.employeeName.includes(filterForm.employeeName)
    )
  }

  if (filterForm.shiftType) {
    result = result.filter(item => item.shiftType === filterForm.shiftType)
  }

  if (filterForm.dateRange && filterForm.dateRange.length === 2) {
    result = result.filter(item => {
      const workDate = new Date(item.workDate)
      const startDate = new Date(filterForm.dateRange[0])
      const endDate = new Date(filterForm.dateRange[1])
      return workDate >= startDate && workDate <= endDate
    })
  }

  return result
})

// èŽ·å–班次标签类型
const getShiftTagType = (shiftType) => {
  const typeMap = {
    '早班': 'success',
    '中班': 'warning',
    '晚班': 'info',
    '夜班': 'danger'
  }
  return typeMap[shiftType] || 'info'
}

// èŽ·å–状态标签类型
const getStatusTagType = (status) => {
  const typeMap = {
    '已安排': 'info',
    '已确认': 'warning',
    '已完成': 'success',
    '已取消': 'danger'
  }
  return typeMap[status] || 'info'
}

// ç­›é€‰
const handleFilter = () => {
  // ç­›é€‰é€»è¾‘已在计算属性中实现
}

// é‡ç½®ç­›é€‰
const resetFilter = () => {
  filterForm.employeeName = ''
  filterForm.shiftType = ''
  filterForm.dateRange = []
}

// æ‰“开排班对话框
const openScheduleDialog = (type, data) => {
  dialogType.value = type
  scheduleDialog.value = true
  
  if (type === 'edit' && data) {
    // ç¼–辑模式，复制数据
    Object.assign(scheduleForm, { ...data })
  } else {
    // æ–°å¢žæ¨¡å¼ï¼Œé‡ç½®è¡¨å•
    Object.keys(scheduleForm).forEach(key => {
      scheduleForm[key] = ''
    })
    scheduleForm.status = '已安排'
    scheduleForm.workDate = new Date().toISOString().split('T')[0]
  }
}

// å…³é—­æŽ’班对话框
const closeScheduleDialog = () => {
  scheduleFormRef.value?.resetFields()
  scheduleDialog.value = false
}

// è®¡ç®—工作时长
const calculateWorkHours = () => {
  if (scheduleForm.startTime && scheduleForm.endTime) {
    const start = new Date(`2000-01-01 ${scheduleForm.startTime}`)
    const end = new Date(`2000-01-01 ${scheduleForm.endTime}`)
    
    if (end < start) {
      // è·¨å¤©çš„情况
      end.setDate(end.getDate() + 1)
    }
    
    const diffMs = end - start
    const diffHours = diffMs / (1000 * 60 * 60)
    scheduleForm.workHours = Math.round(diffHours * 100) / 100
  }
}

// æäº¤æŽ’班表单
const submitScheduleForm = () => {
  scheduleFormRef.value.validate((valid) => {
    if (valid) {
      // è®¡ç®—工作时长
      calculateWorkHours()
      
      if (dialogType.value === 'add') {
        // æ–°å¢ž
        const newSchedule = {
          ...scheduleForm,
          id: Date.now() // ä½¿ç”¨æ—¶é—´æˆ³ä½œä¸ºä¸´æ—¶ID
        }
        scheduleList.value.push(newSchedule)
        ElMessage.success('新增排班成功')
      } else {
        // ç¼–辑
        const index = scheduleList.value.findIndex(item => item.id === scheduleForm.id)
        if (index !== -1) {
          scheduleList.value[index] = { ...scheduleForm }
          ElMessage.success('编辑排班成功')
        }
      }
      
      closeScheduleDialog()
    }
  })
}

// åˆ é™¤æŽ’班
const handleDelete = (row) => {
  ElMessageBox.confirm(
    `确定要删除 ${row.employeeName} çš„排班记录吗？`,
    '删除提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    const index = scheduleList.value.findIndex(item => item.id === row.id)
    if (index !== -1) {
      scheduleList.value.splice(index, 1)
      ElMessage.success('删除成功')
    }
  }).catch(() => {
    ElMessage.info('已取消删除')
  })
}

// æ‰¹é‡åˆ é™¤
const handleBatchDelete = () => {
  if (selectedRows.value.length === 0) {
    ElMessage.warning('请选择要删除的记录')
    return
  }
  
  ElMessageBox.confirm(
    `确定要删除选中的 ${selectedRows.value.length} æ¡æŽ’班记录吗？`,
    '批量删除提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    const selectedIds = selectedRows.value.map(row => row.id)
    scheduleList.value = scheduleList.value.filter(item => !selectedIds.includes(item.id))
    selectedRows.value = []
    ElMessage.success('批量删除成功')
  }).catch(() => {
    ElMessage.info('已取消删除')
  })
}

// é€‰æ‹©å˜åŒ–事件
const handleSelectionChange = (selection) => {
  selectedRows.value = selection
}

// ç›‘听时间变化，自动计算工作时长
const watchTimeChange = () => {
  if (scheduleForm.startTime && scheduleForm.endTime) {
    calculateWorkHours()
  }
}

// ç”Ÿå‘½å‘¨æœŸ
onMounted(() => {
  // é¡µé¢åˆå§‹åŒ–
})
</script>

<style scoped>
.scheduling-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.page-header {
  text-align: center;
  margin-bottom: 30px;
  padding: 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  color: white;
}

.page-header h2 {
  color: white;
  margin-bottom: 10px;
  font-size: 28px;
  font-weight: 600;
}

.page-header p {
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  margin: 0 0 15px 0;
}

.header-controls {
  display: flex;
  justify-content: center;
  gap: 15px;
}

.filter-section {
  background: white;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.filter-form {
  margin: 0;
}

.table-section {
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.batch-actions {
  background: white;
  padding: 15px 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.dialog-footer {
  text-align: right;
}

:deep(.el-form-item__label) {
  font-weight: 500;
  color: #303133;
}

:deep(.el-input__wrapper) {
  box-shadow: 0 0 0 1px #dcdfe6 inset;
}

:deep(.el-input__wrapper:hover) {
  box-shadow: 0 0 0 1px #c0c4cc inset;
}

:deep(.el-input__wrapper.is-focus) {
  box-shadow: 0 0 0 1px #409eff inset;
}

/* å“åº”式设计 */
@media (max-width: 768px) {
  .scheduling-container {
    padding: 10px;
  }
  
  .page-header {
    padding: 15px;
  }
  
  .page-header h2 {
    font-size: 24px;
  }
  
  .header-controls {
    flex-direction: column;
    gap: 10px;
  }
}

@media (max-width: 768px) {
  .filter-form .el-form-item {
    margin-bottom: 10px;
  }
}
</style>

 src/views/personnelManagement/selfService/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,525 @@
<template>
  <div class="app-container self-service-container">

    <!-- åŠŸèƒ½å¯¼èˆªå¡ç‰‡ -->
    <el-row :gutter="20" class="nav-cards">
      <el-col :span="6" v-for="(item, index) in navItems" :key="index">
        <el-card class="nav-card" @click="handleNavClick(item.type)">
          <div class="nav-content">
            <el-icon :size="40" class="nav-icon">
              <component :is="item.icon" />
            </el-icon>
            <h3>{{ item.title }}</h3>
            <p>{{ item.desc }}</p>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- ä¸»è¦å†…容区域 -->
    <div class="main-content">
      <!-- è€ƒå‹¤è®°å½• -->
      <el-card v-if="currentView === 'attendance'" class="content-card">
        <template #header>
          <div class="card-header">
            <span>个人考勤记录</span>
            <el-button type="primary" @click="addAttendanceRecord">新增记录</el-button>
          </div>
        </template>
        <el-table :data="attendanceData" style="width: 100%">
          <el-table-column prop="date" label="日期"  />
          <el-table-column prop="checkIn" label="签到时间"  />
          <el-table-column prop="checkOut" label="签退时间"  />
          <el-table-column prop="workHours" label="工作时长" width="100" />
          <el-table-column prop="status" label="状态" width="100">
            <template #default="scope">
              <el-tag :type="scope.row.status === '正常' ? 'success' : 'danger'">
                {{ scope.row.status }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="150">
            <template #default="scope">
              <el-button size="small" @click="editAttendanceRecord(scope.row)">编辑</el-button>
              <el-button size="small" type="danger" @click="deleteAttendanceRecord(scope.$index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>

      <!-- è–ªèµ„单 -->
      <el-card v-if="currentView === 'salary'" class="content-card">
        <template #header>
          <div class="card-header">
            <span>薪资单查询</span>
            <el-date-picker v-model="salaryMonth" type="month" placeholder="选择月份" />
          </div>
        </template>
        <el-table :data="salaryData" style="width: 100%">
          <el-table-column prop="month" label="月份"  />
          <el-table-column prop="basicSalary" label="基本工资"  />
          <el-table-column prop="bonus" label="奖金"  />
          <el-table-column prop="deduction" label="扣款"  />
          <el-table-column prop="total" label="实发工资"  />
          <el-table-column prop="status" label="状态" >
            <template #default="scope">
              <el-tag :type="scope.row.status === '已发放' ? 'success' : 'warning'">
                {{ scope.row.status }}
              </el-tag>
            </template>
          </el-table-column>
        </el-table>
      </el-card>

      <!-- å‡æœŸç”³è¯· -->
      <el-card v-if="currentView === 'leave'" class="content-card">
        <template #header>
          <div class="card-header">
            <span>假期申请管理</span>
            <el-button type="primary" @click="showLeaveDialog = true">申请假期</el-button>
          </div>
        </template>
        <el-table :data="leaveData" style="width: 100%">
          <el-table-column prop="type" label="假期类型"  />
          <el-table-column prop="startDate" label="开始日期"  />
          <el-table-column prop="endDate" label="结束日期"  />
          <el-table-column prop="days" label="天数" width="80" />
          <el-table-column prop="reason" label="申请原因" />
          <el-table-column prop="status" label="审批状态" width="100">
            <template #default="scope">
              <el-tag :type="getStatusType(scope.row.status)">
                {{ scope.row.status }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="150">
            <template #default="scope">
              <el-button size="small" @click="editLeaveRecord(scope.row)">编辑</el-button>
              <el-button size="small" type="danger" @click="deleteLeaveRecord(scope.$index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>

      <!-- ä¸ªäººä¿¡æ¯ -->
      <el-card v-if="currentView === 'profile'" class="content-card">
        <template #header>
          <div class="card-header">
            <span>个人信息维护</span>
            <el-button type="primary" @click="editProfile = true">编辑信息</el-button>
          </div>
        </template>
        <el-descriptions :column="2" border>
          <el-descriptions-item label="姓名">{{ profile.name }}</el-descriptions-item>
          <el-descriptions-item label="工号">{{ profile.employeeId }}</el-descriptions-item>
          <el-descriptions-item label="部门">{{ profile.department }}</el-descriptions-item>
          <el-descriptions-item label="职位">{{ profile.position }}</el-descriptions-item>
          <el-descriptions-item label="入职日期">{{ profile.hireDate }}</el-descriptions-item>
          <el-descriptions-item label="联系电话">{{ profile.phone }}</el-descriptions-item>
          <el-descriptions-item label="邮箱">{{ profile.email }}</el-descriptions-item>
          <el-descriptions-item label="地址">{{ profile.address }}</el-descriptions-item>
        </el-descriptions>
      </el-card>
    </div>

    <!-- å‡æœŸç”³è¯·å¼¹çª— -->
    <el-dialog v-model="showLeaveDialog" title="申请假期" width="500px">
      <el-form :model="leaveForm" label-width="100px">
        <el-form-item label="假期类型">
          <el-select v-model="leaveForm.type" placeholder="请选择假期类型">
            <el-option label="年假" value="年假" />
            <el-option label="病假" value="病假" />
            <el-option label="调休" value="调休" />
            <el-option label="事假" value="事假" />
          </el-select>
        </el-form-item>
        <el-form-item label="开始日期">
          <el-date-picker v-model="leaveForm.startDate" type="date" placeholder="选择开始日期" />
        </el-form-item>
        <el-form-item label="结束日期">
          <el-date-picker v-model="leaveForm.endDate" type="date" placeholder="选择结束日期" />
        </el-form-item>
        <el-form-item label="申请原因">
          <el-input v-model="leaveForm.reason" type="textarea" rows="3" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showLeaveDialog = false">取消</el-button>
        <el-button type="primary" @click="submitLeaveApplication">提交申请</el-button>
      </template>
    </el-dialog>

    <!-- æ–°å¢žè€ƒå‹¤è®°å½•å¼¹çª— -->
    <el-dialog v-model="showAttendanceDialog" title="新增考勤记录" width="500px">
      <el-form :model="attendanceForm" :rules="attendanceRules" ref="attendanceFormRef" label-width="100px">
        <el-form-item label="日期" prop="date">
          <el-date-picker v-model="attendanceForm.date" type="date" placeholder="选择日期" />
        </el-form-item>
        <el-form-item label="签到时间" prop="checkIn">
          <el-time-picker v-model="attendanceForm.checkIn" placeholder="选择签到时间" format="HH:mm" value-format="HH:mm" />
        </el-form-item>
        <el-form-item label="签退时间" prop="checkOut">
          <el-time-picker v-model="attendanceForm.checkOut" placeholder="选择签退时间" format="HH:mm" value-format="HH:mm" />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="attendanceForm.status" placeholder="请选择状态">
            <el-option label="正常" value="正常" />
            <el-option label="迟到" value="迟到" />
            <el-option label="早退" value="早退" />
            <el-option label="缺勤" value="缺勤" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showAttendanceDialog = false">取消</el-button>
        <el-button type="primary" @click="submitAttendance">提交</el-button>
      </template>
    </el-dialog>

    <!-- ä¸ªäººä¿¡æ¯ç¼–辑弹窗 -->
    <el-dialog v-model="editProfile" title="编辑个人信息" width="500px">
      <el-form :model="profileForm" label-width="100px">
        <el-form-item label="姓名">
          <el-input v-model="profileForm.name" />
        </el-form-item>
        <el-form-item label="联系电话">
          <el-input v-model="profileForm.phone" />
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="profileForm.email" />
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="profileForm.address" type="textarea" rows="2" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="editProfile = false">取消</el-button>
        <el-button type="primary" @click="saveProfile">保存</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { 
  Calendar, 
  Money, 
  Clock, 
  User
} from '@element-plus/icons-vue'

// å½“前视图
const currentView = ref('attendance')

// å¯¼èˆªé¡¹
const navItems = [
  { type: 'attendance', title: '考勤记录', desc: '查询个人考勤信息', icon: 'Calendar' },
  { type: 'salary', title: '薪资单', desc: '查看薪资发放记录', icon: 'Money' },
  { type: 'leave', title: '假期申请', desc: '在线申请各类假期', icon: 'Clock' },
  { type: 'profile', title: '个人信息', desc: '维护个人基本信息', icon: 'User' }
]

// è€ƒå‹¤æ•°æ®
const attendanceData = ref([
  { date: '2024-01-15', checkIn: '09:00', checkOut: '18:00', workHours: '9小时', status: '正常' },
  { date: '2024-01-16', checkIn: '08:55', checkOut: '18:05', workHours: '9小时10分', status: '正常' },
  { date: '2024-01-17', checkIn: '09:15', checkOut: '18:00', workHours: '8小时45分', status: '迟到' }
])

// è–ªèµ„数据
const salaryData = ref([
  { month: '2024-01', basicSalary: 8000, bonus: 1000, deduction: 200, total: 8800, status: '已发放' },
  { month: '2023-12', basicSalary: 8000, bonus: 800, deduction: 150, total: 8650, status: '已发放' }
])

// å‡æœŸæ•°æ®
const leaveData = ref([
  { type: '年假', startDate: '2024-02-01', endDate: '2024-02-03', days: 3, reason: '春节回家', status: '已通过' },
  { type: '病假', startDate: '2024-01-20', endDate: '2024-01-21', days: 2, reason: '感冒发烧', status: '审批中' }
])

// ä¸ªäººä¿¡æ¯
const profile = ref({
  name: '张海洋',
  employeeId: 'EMP001',
  department: '技术部',
  position: '软件工程师',
  hireDate: '2023-03-01',
  phone: '13800138000',
  email: 'zhangsan@company.com',
  address: '北京市朝阳区xxx街道xxx号'
})

// å¼¹çª—控制
const showLeaveDialog = ref(false)
const editProfile = ref(false)
const salaryMonth = ref('')

// è¡¨å•æ•°æ®
const leaveForm = reactive({
  type: '',
  startDate: '',
  endDate: '',
  reason: ''
})

const profileForm = reactive({
  name: '',
  phone: '',
  email: '',
  address: ''
})

// æ–°å¢žè€ƒå‹¤è®°å½•ï¼šå¼¹çª—与表单
const showAttendanceDialog = ref(false)
const attendanceFormRef = ref(null)
const attendanceForm = reactive({
  date: '',
  checkIn: '',
  checkOut: '',
  status: '正常'
})
const attendanceRules = {
  date: [{ required: true, message: '请选择日期', trigger: 'change' }],
  checkIn: [{ required: true, message: '请选择签到时间', trigger: 'change' }],
  checkOut: [{ required: true, message: '请选择签退时间', trigger: 'change' }],
  status: [{ required: true, message: '请选择状态', trigger: 'change' }]
}

// å¤„理导航点击
const handleNavClick = (type) => {
  currentView.value = type
}

// èŽ·å–状态类型
const getStatusType = (status) => {
  const types = {
    '已通过': 'success',
    '审批中': 'warning',
    '已拒绝': 'danger'
  }
  return types[status] || 'info'
}

// æ–°å¢žè€ƒå‹¤è®°å½•ï¼ˆæ‰“开弹窗并预填默认值）
const addAttendanceRecord = () => {
  attendanceForm.date = new Date().toISOString().split('T')[0]
  attendanceForm.checkIn = '09:00'
  attendanceForm.checkOut = '18:00'
  attendanceForm.status = '正常'
  showAttendanceDialog.value = true
}

// è®¡ç®—工时
const computeWorkHours = (inStr, outStr) => {
  const [inH, inM] = inStr.split(':').map(n => parseInt(n, 10))
  const [outH, outM] = outStr.split(':').map(n => parseInt(n, 10))
  const inMin = inH * 60 + inM
  const outMin = outH * 60 + outM
  const diff = Math.max(0, outMin - inMin)
  const h = Math.floor(diff / 60)
  const m = diff % 60
  return m === 0 ? `${h}小时` : `${h}小时${m}分`
}

// æäº¤æ–°å¢žè€ƒå‹¤è®°å½•
const submitAttendance = () => {
  if (!attendanceFormRef.value) return
  attendanceFormRef.value.validate((valid) => {
    if (!valid) return
    const workHours = computeWorkHours(attendanceForm.checkIn, attendanceForm.checkOut)
    const newRecord = {
      date: attendanceForm.date,
      checkIn: attendanceForm.checkIn,
      checkOut: attendanceForm.checkOut,
      workHours,
      status: attendanceForm.status
    }
    attendanceData.value.unshift(newRecord)
    showAttendanceDialog.value = false
    // é‡ç½®è¡¨å•
    attendanceForm.date = ''
    attendanceForm.checkIn = ''
    attendanceForm.checkOut = ''
    attendanceForm.status = '正常'
    ElMessage.success('考勤记录添加成功')
  })
}

// ç¼–辑考勤记录
const editAttendanceRecord = (row) => {
  ElMessage.info('编辑功能开发中...')
}

// åˆ é™¤è€ƒå‹¤è®°å½•
const deleteAttendanceRecord = (index) => {
  attendanceData.value.splice(index, 1)
  ElMessage.success('考勤记录删除成功')
}

// ç¼–辑假期记录
const editLeaveRecord = (row) => {
  ElMessage.info('编辑功能开发中...')
}

// åˆ é™¤å‡æœŸè®°å½•
const deleteLeaveRecord = (index) => {
  leaveData.value.splice(index, 1)
  ElMessage.success('假期记录删除成功')
}

// æäº¤å‡æœŸç”³è¯·
const submitLeaveApplication = () => {
  if (!leaveForm.type || !leaveForm.startDate || !leaveForm.endDate || !leaveForm.reason) {
    ElMessage.warning('请填写完整信息')
    return
  }
  
  const newLeave = {
    type: leaveForm.type,
    startDate: leaveForm.startDate,
    endDate: leaveForm.endDate,
    days: 3, // ç®€å•è®¡ç®—
    reason: leaveForm.reason,
    status: '审批中'
  }
  
  leaveData.value.unshift(newLeave)
  showLeaveDialog.value = false
  
  // é‡ç½®è¡¨å•
  Object.keys(leaveForm).forEach(key => {
    leaveForm[key] = ''
  })
  
  ElMessage.success('假期申请提交成功')
}

// ä¿å­˜ä¸ªäººä¿¡æ¯
const saveProfile = () => {
  Object.assign(profile.value, profileForm)
  editProfile.value = false
  ElMessage.success('个人信息保存成功')
}

// åˆå§‹åŒ–个人信息表单
const initProfileForm = () => {
  Object.assign(profileForm, {
    name: profile.value.name,
    phone: profile.value.phone,
    email: profile.value.email,
    address: profile.value.address
  })
}

// ç›‘听编辑个人信息弹窗
watch(editProfile, (val) => {
  if (val) {
    initProfileForm()
  }
})
</script>

<style scoped>
.self-service-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.page-header {
  text-align: center;
  margin-bottom: 30px;
  padding: 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  color: white;
}

.page-header h2 {
  color: white;
  margin-bottom: 10px;
  font-size: 28px;
  font-weight: 600;
}

.page-header p {
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  margin: 0;
}

.nav-cards {
  margin-bottom: 30px;
}

.nav-card {
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 12px;
  border: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.nav-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.nav-content {
  text-align: center;
  padding: 20px;
}

.nav-icon {
  color: #409EFF;
  margin-bottom: 15px;
}

.nav-content h3 {
  margin: 0 0 10px 0;
  color: #303133;
  font-size: 18px;
}

.nav-content p {
  margin: 0;
  color: #909399;
  font-size: 14px;
}

.main-content {
  margin-bottom: 30px;
}

.content-card {
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border: none;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  color: #303133;
}

/* å“åº”式设计 */
@media (max-width: 768px) {
  .self-service-container {
    padding: 10px;
  }
  
  .nav-cards .el-col {
    margin-bottom: 15px;
  }
  
  .page-header h2 {
    font-size: 24px;
  }
}
</style>

 src/views/procurementManagement/arrivalManagement/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,189 @@
<template>
  <div class="app-container">
    <el-card class="search-card" shadow="never">
      <el-form :model="searchForm" :inline="true">
        <el-form-item label="采购订单号：">
          <el-input v-model="searchForm.orderNo" placeholder="请输入订单号" clearable />
        </el-form-item>
        <el-form-item label="供应商名称：">
          <el-input v-model="searchForm.supplierName" placeholder="请输入供应商名称" clearable />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
          <el-button @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card class="table-card" shadow="never">
      <div class="table-header">
        <el-button type="primary" @click="openDialog('add')">新增到货</el-button>
        <el-button type="success" @click="handleBatchReceive">批量收货</el-button>
        <el-button type="danger" @click="handleBatchDelete">批量删除</el-button>
      </div>

      <el-table :data="tableData" border v-loading="loading" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="到货单号" prop="arrivalNo" width="180" />
        <el-table-column label="采购订单号" prop="orderNo" width="180" />
        <el-table-column label="供应商名称" prop="supplierName" />
        <el-table-column label="到货状态" prop="status" width="100">
          <template #default="{ row }">
            <el-tag :type="getStatusType(row.status)">{{ getStatusText(row.status) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="到货数量" prop="arrivalQuantity" width="100" />
        <el-table-column label="到货时间" prop="arrivalTime" width="180" />
        <el-table-column label="操作" width="200" align="center">
          <template #default="{ row }">
            <el-button type="primary" link @click="openDialog('edit', row)">编辑</el-button>
            <el-button type="success" link @click="handleReceive(row)">收货</el-button>
            <el-button type="danger" link @click="handleDelete(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-dialog v-model="dialogVisible" :title="dialogType === 'add' ? '新增到货' : '编辑到货'" width="600px">
      <el-form :model="formData" label-width="120px">
        <el-form-item label="采购订单号">
          <el-select v-model="formData.orderNo" placeholder="请选择采购订单" style="width: 100%">
            <el-option label="PO20241201001" value="PO20241201001" />
            <el-option label="PO20241201002" value="PO20241201002" />
          </el-select>
        </el-form-item>
        <el-form-item label="供应商名称">
          <el-input v-model="formData.supplierName" placeholder="供应商名称" readonly />
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="formData.remark" type="textarea" :rows="3" placeholder="请输入备注信息" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

const loading = ref(false)
const dialogVisible = ref(false)
const dialogType = ref('add')
const selectedRows = ref([])

const searchForm = reactive({
  orderNo: '',
  supplierName: ''
})

const formData = reactive({
  orderNo: '',
  supplierName: '',
  remark: ''
})

const mockData = [
  {
    id: 1,
    arrivalNo: 'AR20241201001',
    orderNo: 'PO20241201001',
    supplierName: '供应商A',
    status: 'received',
    arrivalQuantity: 250,
    arrivalTime: '2025-12-01 15:30:00',
    remark: '正常到货'
  }
]

const tableData = ref([...mockData])

const getStatusType = (status) => {
  const statusMap = { pending: 'warning', received: 'success', stored: 'info' }
  return statusMap[status] || 'info'
}

const getStatusText = (status) => {
  const statusMap = { pending: '待收货', received: '已收货', stored: '已入库' }
  return statusMap[status] || '未知'
}

const handleSearch = () => {
  loading.value = true
  setTimeout(() => { loading.value = false }, 500)
}

const resetSearch = () => {
  Object.assign(searchForm, { orderNo: '', supplierName: '' })
}

const openDialog = (type, row = {}) => {
  dialogType.value = type
  if (type === 'edit' && row.id) {
    Object.assign(formData, { orderNo: row.orderNo, supplierName: row.supplierName, remark: row.remark })
  } else {
    Object.assign(formData, { orderNo: '', supplierName: '', remark: '' })
  }
  dialogVisible.value = true
}

const handleSubmit = () => {
  if (dialogType.value === 'add') {
    const newArrival = {
      id: Date.now(),
      arrivalNo: `AR${Date.now()}`,
      orderNo: formData.orderNo,
      supplierName: formData.supplierName,
      status: 'pending',
      arrivalQuantity: 0,
      arrivalTime: new Date().toLocaleString(),
      remark: formData.remark
    }
    tableData.value.unshift(newArrival)
    ElMessage.success('新增成功')
  }
  dialogVisible.value = false
}

const handleReceive = (row) => {
  row.status = 'received'
  ElMessage.success('收货成功')
}

const handleDelete = (row) => {
  ElMessageBox.confirm('确定要删除这条记录吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    const index = tableData.value.findIndex(item => item.id === row.id)
    if (index !== -1) {
      tableData.value.splice(index, 1)
      ElMessage.success('删除成功')
    }
  })
}

const handleBatchReceive = () => {
  ElMessage.success('批量收货成功')
}

const handleBatchDelete = () => {
  ElMessage.success('批量删除成功')
}

const handleSelectionChange = (rows) => {
  selectedRows.value = rows
}
</script>

<style scoped>
.app-container { padding: 20px; }
.search-card { margin-bottom: 20px; }
.table-card { margin-bottom: 20px; }
.table-header { margin-bottom: 20px; }
</style>

 src/views/procurementManagement/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,378 @@
<template>
  <div class="app-container">
    <!-- é¡µé¢æ ‡é¢˜ -->
    <div class="page-header">
      <h2>采购管理系统</h2>
      <p>统一管理采购全流程，提升采购效率与质量</p>
    </div>

    <!-- åŠŸèƒ½æ¨¡å—卡片 -->
    <el-row :gutter="20" class="module-cards">
      <el-col :span="8">
        <el-card class="module-card" shadow="hover" @click="navigateTo('/procurementManagement/purchaseOrder')">
          <div class="card-content">
            <div class="card-icon">
              <el-icon size="48" color="#409EFF"><Document /></el-icon>
            </div>
            <div class="card-info">
              <h3>采购订单管理</h3>
              <p>新建、编辑、删除采购订单，选择供应商，填写商品明细</p>
              <div class="card-stats">
                <span>待审核: {{ stats.pendingOrders }}</span>
                <span>已审核: {{ stats.approvedOrders }}</span>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :span="8">
        <el-card class="module-card" shadow="hover" @click="navigateTo('/procurementManagement/arrivalManagement')">
          <div class="card-content">
            <div class="card-icon">
              <el-icon size="48" color="#67C23A"><Box /></el-icon>
            </div>
            <div class="card-info">
              <h3>到货管理</h3>
              <p>自动关联采购订单，录入到货商品信息，支持打印查看</p>
              <div class="card-stats">
                <span>待收货: {{ stats.pendingArrivals }}</span>
                <span>已收货: {{ stats.receivedArrivals }}</span>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :span="8">
        <el-card class="module-card" shadow="hover" @click="navigateTo('/procurementManagement/qualityInspection')">
          <div class="card-content">
            <div class="card-icon">
              <el-icon size="48" color="#E6A23C"><Search /></el-icon>
            </div>
            <div class="card-info">
              <h3>质检管理</h3>
              <p>到货后自动生成质检单，填写合格与不合格商品数量及原因</p>
              <div class="card-stats">
                <span>待质检: {{ stats.pendingInspections }}</span>
                <span>已完成: {{ stats.completedInspections }}</span>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="module-cards">
      <el-col :span="8">
        <el-card class="module-card" shadow="hover" @click="navigateTo('/procurementManagement/returnManagement')">
          <div class="card-content">
            <div class="card-icon">
              <el-icon size="48" color="#F56C6C"><RefreshLeft /></el-icon>
            </div>
            <div class="card-info">
              <h3>退货管理</h3>
              <p>生成采购退货单和质检退货单，支持筛选查询与单据详情</p>
              <div class="card-stats">
                <span>待审核: {{ stats.pendingReturns }}</span>
                <span>已审核: {{ stats.approvedReturns }}</span>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :span="8">
        <el-card class="module-card" shadow="hover" @click="navigateTo('/procurementManagement/priceManagement')">
          <div class="card-content">
            <div class="card-icon">
              <el-icon size="48" color="#909399"><Money /></el-icon>
            </div>
            <div class="card-info">
              <h3>价格管理</h3>
              <p>根据商品及市场价格变化进行采购价调整，自动更新采购单据</p>
              <div class="card-stats">
                <span>有效价格: {{ stats.activePrices }}</span>
                <span>待生效: {{ stats.pendingPrices }}</span>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :span="8">
        <el-card class="module-card" shadow="hover" @click="navigateTo('/procurementManagement/procurementLedger')">
          <div class="card-content">
            <div class="card-icon">
              <el-icon size="48" color="#9C27B0"><List /></el-icon>
            </div>
            <div class="card-info">
              <h3>采购台账</h3>
              <p>查看采购历史记录，统计分析采购数据，生成采购报表</p>
              <div class="card-stats">
                <span>总订单: {{ stats.totalOrders }}</span>
                <span>总金额: Â¥{{ stats.totalAmount.toFixed(2) }}</span>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- ç»Ÿè®¡æ¦‚览 -->
    <el-card class="stats-card" shadow="never">
      <template #header>
        <div class="card-header">
          <span>采购统计概览</span>
          <el-button type="primary" size="small" @click="refreshStats">刷新数据</el-button>
        </div>
      </template>
      
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="stat-item">
            <div class="stat-number">{{ stats.totalOrders }}</div>
            <div class="stat-label">采购订单总数</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="stat-item">
            <div class="stat-number">{{ stats.totalAmount.toFixed(2) }}</div>
            <div class="stat-label">采购总金额(万元)</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="stat-item">
            <div class="stat-number">{{ stats.avgDeliveryTime }}</div>
            <div class="stat-label">平均交付天数</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="stat-item">
            <div class="stat-number">{{ stats.qualityRate }}%</div>
            <div class="stat-label">质检合格率</div>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <!-- æœ€è¿‘活动 -->
    <el-card class="activity-card" shadow="never">
      <template #header>
        <span>最近活动</span>
      </template>
      
      <el-timeline>
        <el-timeline-item
          v-for="(activity, index) in recentActivities"
          :key="index"
          :timestamp="activity.time"
          :type="activity.type"
        >
          {{ activity.content }}
        </el-timeline-item>
      </el-timeline>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { Document, Box, Search, RefreshLeft, Money, List } from '@element-plus/icons-vue'

const router = useRouter()

// ç»Ÿè®¡æ•°æ®
const stats = ref({
  pendingOrders: 5,
  approvedOrders: 25,
  pendingArrivals: 3,
  receivedArrivals: 18,
  pendingInspections: 2,
  completedInspections: 15,
  pendingReturns: 1,
  approvedReturns: 3,
  activePrices: 45,
  pendingPrices: 2,
  totalOrders: 30,
  totalAmount: 125.8,
  avgDeliveryTime: 7,
  qualityRate: 96.5
})

// æœ€è¿‘活动
const recentActivities = ref([
  {
    time: '2025-12-01 18:30',
    content: '新增采购订单 PO20241201004',
    type: 'primary'
  },
  {
    time: '2025-12-01 17:45',
    content: '完成质检单 QI20241201002',
    type: 'success'
  },
  {
    time: '2025-12-01 16:20',
    content: '到货单 AR20241201003 å·²æ”¶è´§',
    type: 'success'
  },
  {
    time: '2025-12-01 15:15',
    content: '价格调整：商品B ä»Ž Â¥80 è°ƒæ•´ä¸º Â¥75',
    type: 'warning'
  },
  {
    time: '2025-12-01 14:30',
    content: '退货单 RT20241201003 å·²å®¡æ ¸',
    type: 'info'
  }
])

// å¯¼èˆªåˆ°æŒ‡å®šé¡µé¢
const navigateTo = (path) => {
  router.push(path)
}

// åˆ·æ–°ç»Ÿè®¡æ•°æ®
const refreshStats = () => {
  // æ¨¡æ‹Ÿåˆ·æ–°æ•°æ®
  stats.value.pendingOrders = Math.floor(Math.random() * 10) + 1
  stats.value.totalAmount = (Math.random() * 100 + 100).toFixed(1)
}

onMounted(() => {
  // é¡µé¢åŠ è½½å®ŒæˆåŽçš„初始化逻辑
})
</script>

<style scoped>
.app-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.page-header {
  text-align: center;
  margin-bottom: 30px;
  padding: 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 10px;
  color: white;
}

.page-header h2 {
  margin: 0 0 10px 0;
  font-size: 28px;
  font-weight: 600;
}

.page-header p {
  margin: 0;
  font-size: 16px;
  opacity: 0.9;
}

.module-cards {
  margin-bottom: 20px;
}

.module-card {
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
  border-radius: 12px;
}

.module-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.card-content {
  display: flex;
  align-items: center;
  padding: 20px;
}

.card-icon {
  margin-right: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  border-radius: 50%;
  color: white;
}

.card-info h3 {
  margin: 0 0 10px 0;
  font-size: 18px;
  font-weight: 600;
  color: #303133;
}

.card-info p {
  margin: 0 0 15px 0;
  font-size: 14px;
  color: #606266;
  line-height: 1.5;
}

.card-stats {
  display: flex;
  gap: 15px;
}

.card-stats span {
  font-size: 12px;
  color: #909399;
  background-color: #f5f7fa;
  padding: 4px 8px;
  border-radius: 4px;
}

.stats-card {
  margin-bottom: 20px;
  border-radius: 12px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.stat-item {
  text-align: center;
  padding: 20px;
}

.stat-number {
  font-size: 32px;
  font-weight: 600;
  color: #409EFF;
  margin-bottom: 8px;
}

.stat-label {
  font-size: 14px;
  color: #606266;
}

.activity-card {
  border-radius: 12px;
}

.el-timeline-item {
  padding-bottom: 20px;
}

.el-timeline-item:last-child {
  padding-bottom: 0;
}
</style>

 src/views/procurementManagement/invoiceEntry/index.vue

@@ -165,7 +165,7 @@
      },
    },
    {
      label: "已开票金额(元)",
      label: "已来票金额(元)",
      prop: "receiptPaymentAmount",
      width:200,
      formatData: (val) => {
@@ -173,7 +173,7 @@
      },
    },
    {
      label: "待开票金额(元)",
      label: "待来票金额(元)",
      prop: "unReceiptPaymentAmount",
      width:200,
      formatData: (val) => {

 src/views/procurementManagement/paymentEntry/index.vue

@@ -221,31 +221,31 @@
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="登记人：" prop="registrant">
              <el-input
                v-model="form.registrant"
                placeholder="请输入"
                clearable
                disabled
              />
            </el-form-item>
          </el-col>
                    <el-col :span="12">
                        <el-form-item label="付款日期：" prop="paymentDate">
                            <el-date-picker
                                style="width: 100%"
                                v-model="form.paymentDate"
                                value-format="YYYY-MM-DD"
                                format="YYYY-MM-DD"
                                type="date"
                                placeholder="请选择"
                                clearable
                            />
                        </el-form-item>
                    </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="付款日期：" prop="paymentDate">
              <el-date-picker
                style="width: 100%"
                v-model="form.paymentDate"
                value-format="YYYY-MM-DD"
                format="YYYY-MM-DD"
                type="date"
                placeholder="请选择"
                clearable
              />
            </el-form-item>
          </el-col>
                    <el-col :span="12">
                        <el-form-item label="登记人：" prop="registrant">
                            <el-input
                                v-model="form.registrant"
                                placeholder="请输入"
                                clearable
                                disabled
                            />
                        </el-form-item>
                    </el-col>
          <el-col :span="12">
            <el-form-item label="登记日期：" prop="registrationtDate">
              <el-input

 src/views/procurementManagement/paymentHistory/index.vue

@@ -63,6 +63,10 @@
const isShowSummarySon = ref(true);
const tableColumn = ref([
  {
    label: "采购合同号",
    prop: "purchaseContractNumber",
  },
  {
    label: "付款日期",
    prop: "paymentDate",
  },

 src/views/procurementManagement/priceManagement/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,276 @@
<template>
  <div class="app-container">
    <el-card class="search-card" shadow="never">
      <el-form :model="searchForm" :inline="true">
        <el-form-item label="商品名称：">
          <el-input v-model="searchForm.productName" placeholder="请输入商品名称" clearable />
        </el-form-item>
        <el-form-item label="供应商名称：">
          <el-input v-model="searchForm.supplierName" placeholder="请输入供应商名称" clearable />
        </el-form-item>
        <el-form-item label="价格状态：">
          <el-select v-model="searchForm.status" placeholder="请选择状态" clearable>
            <el-option label="有效" value="active" />
            <el-option label="已过期" value="expired" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
          <el-button @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card class="table-card" shadow="never">
      <div class="table-header">
        <el-button type="primary" @click="openDialog('add')">新增价格</el-button>
        <el-button type="success" @click="handleBatchUpdate">批量更新</el-button>
        <el-button type="danger" @click="handleBatchDelete">批量删除</el-button>
      </div>

      <el-table :data="tableData" border v-loading="loading" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="商品名称" prop="productName" />
        <el-table-column label="规格型号" prop="specification" />
        <el-table-column label="供应商名称" prop="supplierName" />
        <el-table-column label="原价格" prop="oldPrice" width="120">
          <template #default="{ row }">Â¥{{ row.oldPrice.toFixed(2) }}</template>
        </el-table-column>
        <el-table-column label="新价格" prop="newPrice" width="120">
          <template #default="{ row }">Â¥{{ row.newPrice.toFixed(2) }}</template>
        </el-table-column>
        <el-table-column label="调价幅度" prop="priceChange" width="120">
          <template #default="{ row }">
            <span :style="{ color: row.priceChange >= 0 ? '#f56c6c' : '#67c23a' }">
              {{ row.priceChange >= 0 ? '+' : '' }}{{ row.priceChange.toFixed(2) }}%
            </span>
          </template>
        </el-table-column>
        <el-table-column label="生效时间" prop="effectiveTime" width="180" />
        <el-table-column label="状态" prop="status" width="100">
          <template #default="{ row }">
            <el-tag :type="getStatusType(row.status)">{{ getStatusText(row.status) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200" align="center">
          <template #default="{ row }">
            <el-button type="primary" link @click="openDialog('edit', row)">编辑</el-button>
            <el-button type="success" link @click="handleApply(row)" v-if="row.status === 'pending'">应用</el-button>
            <el-button type="danger" link @click="handleDelete(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-dialog v-model="dialogVisible" :title="dialogType === 'add' ? '新增价格' : '编辑价格'" width="600px">
      <el-form :model="formData" label-width="120px">
        <el-form-item label="商品名称">
          <el-select v-model="formData.productName" placeholder="请选择商品" style="width: 100%">
            <el-option label="商品A" value="商品A" />
            <el-option label="商品B" value="商品B" />
            <el-option label="商品C" value="商品C" />
          </el-select>
        </el-form-item>
        <el-form-item label="规格型号">
          <el-input v-model="formData.specification" placeholder="请输入规格型号" />
        </el-form-item>
        <el-form-item label="供应商名称">
          <el-select v-model="formData.supplierName" placeholder="请选择供应商" style="width: 100%">
            <el-option label="供应商A" value="供应商A" />
            <el-option label="供应商B" value="供应商B" />
            <el-option label="供应商C" value="供应商C" />
          </el-select>
        </el-form-item>
        <el-form-item label="原价格">
          <el-input v-model="formData.oldPrice" placeholder="请输入原价格" type="number" />
        </el-form-item>
        <el-form-item label="新价格">
          <el-input v-model="formData.newPrice" placeholder="请输入新价格" type="number" />
        </el-form-item>
        <el-form-item label="生效时间">
          <el-date-picker v-model="formData.effectiveTime" type="datetime" placeholder="选择生效时间" style="width: 100%" />
        </el-form-item>
        <el-form-item label="调价原因">
          <el-select v-model="formData.reason" placeholder="请选择调价原因" style="width: 100%">
            <el-option label="市场价格变动" value="market" />
            <el-option label="成本变化" value="cost" />
            <el-option label="供应商调整" value="supplier" />
            <el-option label="其他原因" value="other" />
          </el-select>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="formData.remark" type="textarea" :rows="3" placeholder="请输入备注信息" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

const loading = ref(false)
const dialogVisible = ref(false)
const dialogType = ref('add')
const selectedRows = ref([])

const searchForm = reactive({
  productName: '',
  supplierName: '',
  status: ''
})

const formData = reactive({
  productName: '',
  specification: '',
  supplierName: '',
  oldPrice: 0,
  newPrice: 0,
  effectiveTime: '',
  reason: '',
  remark: ''
})

const mockData = [
  {
    id: 1,
    productName: '商品A',
    specification: '规格1',
    supplierName: '供应商A',
    oldPrice: 50.00,
    newPrice: 55.00,
    priceChange: 10.00,
    effectiveTime: '2025-12-01 00:00:00',
    status: 'active',
    reason: '市场价格变动',
    remark: '市场价格上涨'
  },
  {
    id: 2,
    productName: '商品B',
    specification: '规格2',
    supplierName: '供应商B',
    oldPrice: 80.00,
    newPrice: 75.00,
    priceChange: -6.25,
    effectiveTime: '2025-12-01 00:00:00',
    status: 'active',
    reason: '成本变化',
    remark: '成本下降'
  }
]

const tableData = ref([...mockData])

const getStatusType = (status) => {
  const statusMap = { active: 'success', expired: 'info', pending: 'warning' }
  return statusMap[status] || 'info'
}

const getStatusText = (status) => {
  const statusMap = { active: '有效', expired: '已过期', pending: '待生效' }
  return statusMap[status] || '未知'
}

const handleSearch = () => {
  loading.value = true
  setTimeout(() => { loading.value = false }, 500)
}

const resetSearch = () => {
  Object.assign(searchForm, { productName: '', supplierName: '', status: '' })
}

const openDialog = (type, row = {}) => {
  dialogType.value = type
  if (type === 'edit' && row.id) {
    Object.assign(formData, {
      productName: row.productName,
      specification: row.specification,
      supplierName: row.supplierName,
      oldPrice: row.oldPrice,
      newPrice: row.newPrice,
      effectiveTime: row.effectiveTime,
      reason: row.reason,
      remark: row.remark
    })
  } else {
    Object.assign(formData, {
      productName: '',
      specification: '',
      supplierName: '',
      oldPrice: 0,
      newPrice: 0,
      effectiveTime: '',
      reason: '',
      remark: ''
    })
  }
  dialogVisible.value = true
}

const handleSubmit = () => {
  if (dialogType.value === 'add') {
    const priceChange = ((formData.newPrice - formData.oldPrice) / formData.oldPrice) * 100
    const newPrice = {
      id: Date.now(),
      productName: formData.productName,
      specification: formData.specification,
      supplierName: formData.supplierName,
      oldPrice: formData.oldPrice,
      newPrice: formData.newPrice,
      priceChange: priceChange,
      effectiveTime: formData.effectiveTime,
      status: 'pending',
      reason: formData.reason,
      remark: formData.remark
    }
    tableData.value.unshift(newPrice)
    ElMessage.success('新增成功')
  }
  dialogVisible.value = false
}

const handleApply = (row) => {
  row.status = 'active'
  ElMessage.success('价格已应用')
}

const handleDelete = (row) => {
  ElMessageBox.confirm('确定要删除这条记录吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    const index = tableData.value.findIndex(item => item.id === row.id)
    if (index !== -1) {
      tableData.value.splice(index, 1)
      ElMessage.success('删除成功')
    }
  })
}

const handleBatchUpdate = () => {
  ElMessage.success('批量更新成功')
}

const handleBatchDelete = () => {
  ElMessage.success('批量删除成功')
}

const handleSelectionChange = (rows) => {
  selectedRows.value = rows
}
</script>

<style scoped>
.app-container { padding: 20px; }
.search-card { margin-bottom: 20px; }
.table-card { margin-bottom: 20px; }
.table-header { margin-bottom: 20px; }
</style>

 src/views/procurementManagement/procurementInvoiceLedger/Form/EditForm.vue

@@ -53,7 +53,7 @@
defineOptions({
  name: "来票台账表单",
});

const temFutureTickets = ref(0)
const { form, resetForm } = useFormData({
  id: undefined,
  purchaseContractNumber: undefined, // é‡‡è´­åˆåŒå·
@@ -77,6 +77,7 @@
    form.ticketsAmount = data.ticketsAmount.toFixed(2);
    form.taxInclusiveUnitPrice = data.taxInclusiveUnitPrice;
    form.futureTickets = data.futureTickets;
    temFutureTickets.value = data.futureTickets;
  }
};

@@ -86,16 +87,14 @@
        proxy.$modal.msgWarning("含税单价不能为零或未定义");
        return;
    }
	
    if (Number(form.ticketsNum) > Number(form.futureTickets)) {
    if (Number(form.ticketsNum) > Number(temFutureTickets.value)) {
        proxy.$modal.msgWarning("开票数不得大于未开票数");
        form.ticketsNum = form.futureTickets
        return;
        form.ticketsNum = temFutureTickets.value
    }
    
    // ç¡®ä¿æ‰€æœ‰æ•°å€¼éƒ½è½¬æ¢ä¸ºæ•°å­—类型进行计算
    const ticketsAmount = Number(val) * Number(form.taxInclusiveUnitPrice);
    const futureTickets = Number(form.futureTickets) - Number(val);
    const ticketsAmount = Number(form.ticketsNum) * Number(form.taxInclusiveUnitPrice);
    const futureTickets = Number(temFutureTickets.value) - Number(form.ticketsNum);
    form.futureTickets = Number(futureTickets.toFixed(2));
    form.ticketsAmount = Number(ticketsAmount.toFixed(2));
};

 src/views/procurementManagement/procurementInvoiceLedger/index.vue

@@ -162,14 +162,19 @@
      width: 150,
    },
    {
      label: "客户名称",
      prop: "customerName",
      label: "项目名称",
      prop: "projectName",
      width: 240,
    },
    {
      label: "供应商名称",
      prop: "supplierName",
      width: 240,
    },
    {
      label: "产品大类",
      prop: "productCategory",
      width: 150,
    },
    {
      label: "规格型号",
@@ -190,12 +195,17 @@
      },
    },
    {
      label: "开票日期",
      label: "本次来票数",
      prop: "ticketsNum",
      width: 110,
    },
    {
      label: "来票日期",
      prop: "createdAt",
      width: 110,
    },
    {
      label: "开票金额",
      label: "来票金额(元)",
      prop: "ticketsAmount",
      width: 200,
      formatData: (cell) => {

 src/views/procurementManagement/purchaseOrder/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,188 @@
<template>
  <div class="app-container">
    <el-card class="search-card" shadow="never">
      <el-form :model="searchForm" :inline="true">
        <el-form-item label="供应商名称：">
          <el-input v-model="searchForm.supplierName" placeholder="请输入供应商名称" clearable />
        </el-form-item>
        <el-form-item label="订单状态：">
          <el-select v-model="searchForm.status" placeholder="请选择状态" clearable>
            <el-option label="草稿" value="draft" />
            <el-option label="待审核" value="pending" />
            <el-option label="已审核" value="approved" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
          <el-button @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card class="table-card" shadow="never">
      <div class="table-header">
        <el-button type="primary" @click="openDialog('add')">新增订单</el-button>
        <el-button type="danger" @click="handleBatchDelete" :disabled="!selectedRows.length">批量删除</el-button>
      </div>

      <el-table :data="tableData" border v-loading="loading" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="订单编号" prop="orderNo" width="180" />
        <el-table-column label="供应商名称" prop="supplierName" />
        <el-table-column label="订单状态" prop="status" width="100">
          <template #default="{ row }">
            <el-tag :type="getStatusType(row.status)">{{ getStatusText(row.status) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="总金额" prop="totalAmount" width="120">
          <template #default="{ row }">Â¥{{ row.totalAmount.toFixed(2) }}</template>
        </el-table-column>
        <el-table-column label="创建时间" prop="createTime" width="180" />
        <el-table-column label="操作" width="200" align="center">
          <template #default="{ row }">
            <el-button type="primary" size="small" @click="openDialog('edit', row)">编辑</el-button>
            <el-button type="success" size="small" @click="viewDetails(row)">查看</el-button>
            <el-button type="danger" size="small" @click="handleDelete(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-dialog v-model="dialogVisible" :title="dialogType === 'add' ? '新增采购订单' : '编辑采购订单'" width="800px">
      <el-form :model="formData" ref="formRef" label-width="120px">
        <el-form-item label="供应商名称" prop="supplierName">
          <el-select v-model="formData.supplierName" placeholder="请选择供应商" style="width: 100%">
            <el-option label="供应商A" value="供应商A" />
            <el-option label="供应商B" value="供应商B" />
          </el-select>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="formData.remark" type="textarea" :rows="3" placeholder="请输入备注信息" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

const loading = ref(false)
const dialogVisible = ref(false)
const dialogType = ref('add')
const selectedRows = ref([])

const searchForm = reactive({
  supplierName: '',
  status: ''
})

const formData = reactive({
  supplierName: '',
  remark: ''
})

const mockData = [
  {
    id: 1,
    orderNo: 'PO20241201001',
    supplierName: '供应商A',
    status: 'approved',
    totalAmount: 12500.00,
    createTime: '2025-12-01 10:30:00',
    remark: '常规采购'
  }
]

const tableData = ref([...mockData])

const getStatusType = (status) => {
  const statusMap = { draft: 'info', pending: 'warning', approved: 'success' }
  return statusMap[status] || 'info'
}

const getStatusText = (status) => {
  const statusMap = { draft: '草稿', pending: '待审核', approved: '已审核' }
  return statusMap[status] || '未知'
}

const handleSearch = () => {
  loading.value = true
  setTimeout(() => {
    loading.value = false
  }, 500)
}

const resetSearch = () => {
  Object.assign(searchForm, { supplierName: '', status: '' })
}

const openDialog = (type, row = {}) => {
  dialogType.value = type
  if (type === 'edit' && row.id) {
    Object.assign(formData, { supplierName: row.supplierName, remark: row.remark })
  } else {
    Object.assign(formData, { supplierName: '', remark: '' })
  }
  dialogVisible.value = true
}

const handleSubmit = () => {
  if (dialogType.value === 'add') {
    const newOrder = {
      id: Date.now(),
      orderNo: `PO${Date.now()}`,
      supplierName: formData.supplierName,
      status: 'draft',
      totalAmount: 0,
      createTime: new Date().toLocaleString(),
      remark: formData.remark
    }
    tableData.value.unshift(newOrder)
    ElMessage.success('新增成功')
  }
  dialogVisible.value = false
}

const viewDetails = (row) => {
  ElMessage.info('查看详情功能')
}

const handleDelete = (row) => {
  ElMessageBox.confirm('确定要删除这条记录吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    const index = tableData.value.findIndex(item => item.id === row.id)
    if (index !== -1) {
      tableData.value.splice(index, 1)
      ElMessage.success('删除成功')
    }
  })
}

const handleBatchDelete = () => {
  if (selectedRows.value.length === 0) {
    ElMessage.warning('请选择要删除的记录')
    return
  }
  ElMessage.success('批量删除成功')
}

const handleSelectionChange = (rows) => {
  selectedRows.value = rows
}
</script>

<style scoped>
.app-container { padding: 20px; }
.search-card { margin-bottom: 20px; }
.table-card { margin-bottom: 20px; }
.table-header { margin-bottom: 20px; }
</style>

 src/views/procurementManagement/qualityInspection/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,285 @@
<template>
  <div class="app-container">
    <el-card class="search-card" shadow="never">
      <el-form :model="searchForm" :inline="true">
        <el-form-item label="质检单号：" style="width: 300px;">
          <el-input v-model="searchForm.inspectionNo" placeholder="请输入质检单号" clearable />
        </el-form-item>
        <el-form-item label="质检状态：" style="width: 300px;">
          <el-select v-model="searchForm.status" placeholder="请选择状态" clearable>
            <el-option label="待质检" value="pending" />
            <el-option label="质检中" value="inspecting" />
            <el-option label="已完成" value="completed" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
          <el-button @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card class="table-card" shadow="never">
      <div class="table-header">
        <el-button type="primary" @click="openDialog('add')">新增质检单</el-button>
        <el-button type="success" @click="handleBatchComplete">批量完成</el-button>
        <el-button type="danger" @click="handleBatchDelete">批量删除</el-button>
      </div>

      <el-table :data="tableData" border v-loading="loading" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="质检单号" prop="inspectionNo" width="180" />
        <el-table-column label="到货单号" prop="arrivalNo" width="180" />
        <el-table-column label="供应商名称" prop="supplierName" />
        <el-table-column label="质检状态" prop="status" width="100">
          <template #default="{ row }">
            <el-tag :type="getStatusType(row.status)">{{ getStatusText(row.status) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="合格数量" prop="qualifiedQuantity" width="100" />
        <el-table-column label="不合格数量" prop="unqualifiedQuantity" width="100" />
        <el-table-column label="质检时间" prop="inspectionTime" width="180" />
        <el-table-column label="操作" width="200" align="center">
          <template #default="{ row }">
            <el-button type="primary" link @click="openDialog('edit', row)">编辑</el-button>
            <el-button type="success" link @click="handleComplete(row)" v-if="row.status !== 'completed'">完成</el-button>
            <el-button type="danger" link @click="handleDelete(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-dialog v-model="dialogVisible" :title="dialogType === 'add' ? '新增质检单' : '编辑质检单'" width="1000px">
      <el-form :model="formData" label-width="120px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="到货单号">
              <el-select v-model="formData.arrivalNo" placeholder="请选择到货单" style="width: 100%">
                <el-option label="AR20241201001" value="AR20241201001" />
                <el-option label="AR20241201002" value="AR20241201002" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="供应商名称">
              <el-input v-model="formData.supplierName" placeholder="供应商名称" readonly />
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-form-item label="质检商品">
          <div class="product-list" style="width: 100%;">
            <el-table :data="formData.products" border width="100%">
              <el-table-column label="商品名称" width="150">
                <template #default="{ row }">
                  <el-input v-model="row.productName" placeholder="请输入商品名称" />
                </template>
              </el-table-column>
              <el-table-column label="规格型号" width="150">
                <template #default="{ row }">
                  <el-input v-model="row.specification" placeholder="请输入规格型号" />
                </template>
              </el-table-column>
              <el-table-column label="到货数量" width="150">
                <template #default="{ row }">
                  <el-input-number v-model="row.arrivalQuantity" :min="0" placeholder="数量" style="width: 100%;"/>
                </template>
              </el-table-column>
              <el-table-column label="合格数量" width="150">
                <template #default="{ row }">
                  <el-input-number v-model="row.qualifiedQuantity" :min="0" placeholder="数量"  style="width: 100%;"/>
                </template>
              </el-table-column>
              <el-table-column label="不合格数量" width="150">
                <template #default="{ row }">
                  <el-input-number v-model="row.unqualifiedQuantity" :min="0" placeholder="数量"  style="width: 100%;"/>
                </template>
              </el-table-column>
              <el-table-column label="不合格原因" width="200">
                <template #default="{ row }">
                  <el-input v-model="row.unqualifiedReason" placeholder="请输入不合格原因" />
                </template>
              </el-table-column>
              <el-table-column label="操作" width="100">
                <template #default="{ $index }">
                  <el-button type="danger" link @click="removeProduct($index)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <div class="add-product-btn">
              <el-button type="primary" @click="addProduct">添加商品</el-button>
            </div>
          </div>
        </el-form-item>

        <el-form-item label="质检员">
          <el-input v-model="formData.inspector" placeholder="请输入质检员姓名" />
        </el-form-item>

        <el-form-item label="备注">
          <el-input v-model="formData.remark" type="textarea" :rows="3" placeholder="请输入备注信息" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

const loading = ref(false)
const dialogVisible = ref(false)
const dialogType = ref('add')
const selectedRows = ref([])

const searchForm = reactive({
  inspectionNo: '',
  status: ''
})

const formData = reactive({
  arrivalNo: '',
  supplierName: '',
  products: [],
  inspector: '',
  remark: ''
})

const mockData = [
  {
    id: 1,
    inspectionNo: 'QI20241201001',
    arrivalNo: 'AR20241201001',
    supplierName: '供应商A',
    status: 'completed',
    qualifiedQuantity: 240,
    unqualifiedQuantity: 10,
    inspectionTime: '2025-12-01 16:30:00',
    inspector: '陈志强',
    remark: '质检完成'
  }
]

const tableData = ref([...mockData])

const getStatusType = (status) => {
  const statusMap = { pending: 'info', inspecting: 'warning', completed: 'success' }
  return statusMap[status] || 'info'
}

const getStatusText = (status) => {
  const statusMap = { pending: '待质检', inspecting: '质检中', completed: '已完成' }
  return statusMap[status] || '未知'
}

const handleSearch = () => {
  loading.value = true
  setTimeout(() => { loading.value = false }, 500)
}

const resetSearch = () => {
  Object.assign(searchForm, { inspectionNo: '', status: '' })
}

const openDialog = (type, row = {}) => {
  dialogType.value = type
  if (type === 'edit' && row.id) {
    Object.assign(formData, { 
      arrivalNo: row.arrivalNo, 
      supplierName: row.supplierName, 
      inspector: row.inspector,
      remark: row.remark 
    })
  } else {
    Object.assign(formData, { 
      arrivalNo: '', 
      supplierName: '', 
      products: [],
      inspector: '', 
      remark: '' 
    })
  }
  dialogVisible.value = true
}

const handleSubmit = () => {
  if (dialogType.value === 'add') {
    const newInspection = {
      id: Date.now(),
      inspectionNo: `QI${Date.now()}`,
      arrivalNo: formData.arrivalNo,
      supplierName: formData.supplierName,
      status: 'pending',
      qualifiedQuantity: 0,
      unqualifiedQuantity: 0,
      inspectionTime: new Date().toLocaleString(),
      inspector: formData.inspector,
      remark: formData.remark
    }
    tableData.value.unshift(newInspection)
    ElMessage.success('新增成功')
  }
  dialogVisible.value = false
}

const handleComplete = (row) => {
  row.status = 'completed'
  ElMessage.success('质检完成')
}

const handleDelete = (row) => {
  ElMessageBox.confirm('确定要删除这条记录吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    const index = tableData.value.findIndex(item => item.id === row.id)
    if (index !== -1) {
      tableData.value.splice(index, 1)
      ElMessage.success('删除成功')
    }
  })
}

const handleBatchComplete = () => {
  ElMessage.success('批量完成成功')
}

const handleBatchDelete = () => {
  ElMessage.success('批量删除成功')
}

const handleSelectionChange = (rows) => {
  selectedRows.value = rows
}

const addProduct = () => {
  formData.products.push({
    productName: '',
    specification: '',
    arrivalQuantity: 0,
    qualifiedQuantity: 0,
    unqualifiedQuantity: 0,
    unqualifiedReason: ''
  })
}

const removeProduct = (index) => {
  formData.products.splice(index, 1)
}
</script>

<style scoped>
.app-container { padding: 20px; }
.search-card { margin-bottom: 20px; }
.table-card { margin-bottom: 20px; }
.table-header { margin-bottom: 20px; }
.product-list { border: 1px solid #dcdfe6; border-radius: 4px; padding: 15px; }
.product-item { margin-bottom: 15px; padding: 10px; background-color: #f5f7fa; border-radius: 4px; }
.add-product-btn { margin-top: 15px; text-align: center; }
</style>

 src/views/procurementManagement/returnManagement/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,234 @@
<template>
  <div class="app-container">
    <el-card class="search-card" shadow="never">
      <el-form :model="searchForm" :inline="true">
        <el-form-item label="退货单号：" style="width: 300px;">
          <el-input v-model="searchForm.returnNo" placeholder="请输入退货单号" clearable />
        </el-form-item>
        <el-form-item label="退货类型：" style="width: 300px;">
          <el-select v-model="searchForm.returnType" placeholder="请选择类型" clearable>
            <el-option label="采购退货" value="purchase" />
            <el-option label="质检退货" value="quality" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
          <el-button @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card class="table-card" shadow="never">
      <div class="table-header">
        <el-button type="primary" @click="openDialog('add')">新增退货单</el-button>
        <el-button type="success" @click="handleBatchApprove">批量审核</el-button>
        <el-button type="danger" @click="handleBatchDelete">批量删除</el-button>
      </div>

      <el-table :data="tableData" border v-loading="loading" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="退货单号" prop="returnNo" width="180" />
        <el-table-column label="关联单号" prop="relatedNo" width="180" />
        <el-table-column label="退货类型" prop="returnType" width="100">
          <template #default="{ row }">
            <el-tag :type="row.returnType === 'purchase' ? 'danger' : 'warning'">
              {{ getReturnTypeText(row.returnType) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="供应商名称" prop="supplierName" />
        <el-table-column label="退货状态" prop="status" width="100">
          <template #default="{ row }">
            <el-tag :type="getStatusType(row.status)">{{ getStatusText(row.status) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="退货金额" prop="returnAmount" width="120">
          <template #default="{ row }">Â¥{{ row.returnAmount.toFixed(2) }}</template>
        </el-table-column>
        <el-table-column label="创建时间" prop="createTime" width="180" />
        <el-table-column label="操作" width="200" align="center">
          <template #default="{ row }">
            <el-button type="primary" link @click="openDialog('edit', row)">编辑</el-button>
            <el-button type="success" link @click="handleApprove(row)" v-if="row.status === 'pending'">审核</el-button>
            <el-button type="danger" link @click="handleDelete(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-dialog v-model="dialogVisible" :title="dialogType === 'add' ? '新增退货单' : '编辑退货单'" width="600px">
      <el-form :model="formData" label-width="120px">
        <el-form-item label="退货类型">
          <el-select v-model="formData.returnType" placeholder="请选择退货类型" style="width: 100%">
            <el-option label="采购退货" value="purchase" />
            <el-option label="质检退货" value="quality" />
          </el-select>
        </el-form-item>
        <el-form-item label="关联单号">
          <el-input v-model="formData.relatedNo" placeholder="请输入关联单号" />
        </el-form-item>
        <el-form-item label="供应商名称">
          <el-input v-model="formData.supplierName" placeholder="请输入供应商名称" />
        </el-form-item>
        <el-form-item label="退货原因">
          <el-select v-model="formData.returnReason" placeholder="请选择退货原因" style="width: 100%">
            <el-option label="质量问题" value="quality" />
            <el-option label="规格不符" value="specification" />
            <el-option label="数量错误" value="quantity" />
          </el-select>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="formData.remark" type="textarea" :rows="3" placeholder="请输入备注信息" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

const loading = ref(false)
const dialogVisible = ref(false)
const dialogType = ref('add')
const selectedRows = ref([])

const searchForm = reactive({
  returnNo: '',
  returnType: ''
})

const formData = reactive({
  returnType: '',
  relatedNo: '',
  supplierName: '',
  returnReason: '',
  remark: ''
})

const mockData = [
  {
    id: 1,
    returnNo: 'RT20241201001',
    relatedNo: 'PO20241201001',
    returnType: 'purchase',
    supplierName: '供应商A',
    status: 'approved',
    returnAmount: 500.00,
    createTime: '2025-12-01 17:30:00',
    returnReason: '质量问题',
    remark: '商品存在质量问题'
  }
]

const tableData = ref([...mockData])

const getReturnTypeText = (type) => {
  const typeMap = { purchase: '采购退货', quality: '质检退货' }
  return typeMap[type] || '未知'
}

const getStatusType = (status) => {
  const statusMap = { pending: 'warning', approved: 'success', returned: 'info' }
  return statusMap[status] || 'info'
}

const getStatusText = (status) => {
  const statusMap = { pending: '待审核', approved: '已审核', returned: '已退货' }
  return statusMap[status] || '未知'
}

const handleSearch = () => {
  loading.value = true
  setTimeout(() => { loading.value = false }, 500)
}

const resetSearch = () => {
  Object.assign(searchForm, { returnNo: '', returnType: '' })
}

const openDialog = (type, row = {}) => {
  dialogType.value = type
  if (type === 'edit' && row.id) {
    Object.assign(formData, {
      returnType: row.returnType,
      relatedNo: row.relatedNo,
      supplierName: row.supplierName,
      returnReason: row.returnReason,
      remark: row.remark
    })
  } else {
    Object.assign(formData, {
      returnType: '',
      relatedNo: '',
      supplierName: '',
      returnReason: '',
      remark: ''
    })
  }
  dialogVisible.value = true
}

const handleSubmit = () => {
  if (dialogType.value === 'add') {
    const newReturn = {
      id: Date.now(),
      returnNo: `RT${Date.now()}`,
      relatedNo: formData.relatedNo,
      returnType: formData.returnType,
      supplierName: formData.supplierName,
      status: 'pending',
      returnAmount: 0,
      createTime: new Date().toLocaleString(),
      returnReason: formData.returnReason,
      remark: formData.remark
    }
    tableData.value.unshift(newReturn)
    ElMessage.success('新增成功')
  }
  dialogVisible.value = false
}

const handleApprove = (row) => {
  row.status = 'approved'
  ElMessage.success('审核通过')
}

const handleDelete = (row) => {
  ElMessageBox.confirm('确定要删除这条记录吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    const index = tableData.value.findIndex(item => item.id === row.id)
    if (index !== -1) {
      tableData.value.splice(index, 1)
      ElMessage.success('删除成功')
    }
  })
}

const handleBatchApprove = () => {
  ElMessage.success('批量审核成功')
}

const handleBatchDelete = () => {
  ElMessage.success('批量删除成功')
}

const handleSelectionChange = (rows) => {
  selectedRows.value = rows
}
</script>

<style scoped>
.app-container { padding: 20px; }
.search-card { margin-bottom: 20px; }
.table-card { margin-bottom: 20px; }
.table-header { margin-bottom: 20px; }
</style>

 src/views/productManagement/productIdentifier/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,708 @@
<template>
  <div class="app-container">
    <el-card class="box-card">
             <!-- æœç´¢åŒºåŸŸ -->
       <el-row :gutter="20" class="search-row">
         <el-col :span="6">
           <el-input
             v-model="searchForm.productName"
             placeholder="请输入产品名称"
             clearable
             @keyup.enter="handleSearch"
           >
             <template #prefix>
               <el-icon><Search /></el-icon>
             </template>
           </el-input>
         </el-col>
         <el-col :span="6">
           <el-select v-model="searchForm.identifierType" placeholder="请选择标识类型" clearable>
             <el-option label="二维码" value="二维码"></el-option>
             <el-option label="防伪码" value="防伪码"></el-option>
           </el-select>
         </el-col>
         <el-col :span="6">
           <el-select v-model="searchForm.status" placeholder="请选择状态" clearable>
             <el-option label="已生成" value="已生成"></el-option>
             <el-option label="已分配" value="已分配"></el-option>
             <el-option label="已使用" value="已使用"></el-option>
             <el-option label="已作废" value="已作废"></el-option>
           </el-select>
         </el-col>
         <el-col :span="6">
           <el-button type="primary" @click="handleSearch">搜索</el-button>
           <el-button @click="resetSearch">重置</el-button>
           <el-button style="float: right;" type="primary" @click="handleAdd">
             æ–°å¢žæ ‡è¯†
           </el-button>
         </el-col>
       </el-row>

      <!-- äº§å“æ ‡è¯†åˆ—表 -->
      <el-table
        :data="filteredList"
        style="width: 100%"
        v-loading="loading"
        border
        stripe
        height="calc(100vh - 22em)"
      >
        <el-table-column prop="id" label="ID" width="80" align="center"/>
        <el-table-column prop="productName" label="产品名称" width="150" />
        <el-table-column prop="productCode" label="产品编码" width="120" />
        <el-table-column prop="batchNo" label="批次号" width="120" />
        <el-table-column prop="identifierType" label="标识类型" width="100">
          <template #default="scope">
            <el-tag :type="getIdentifierTypeType(scope.row.identifierType)">
              {{ scope.row.identifierType }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="identifierCode" label="标识码" />
        <el-table-column prop="status" label="状态" width="100">
          <template #default="scope">
            <el-tag :type="getStatusType(scope.row.status)">
              {{ scope.row.status }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="generateTime" label="生成时间" width="160" />
        <el-table-column label="操作" fixed="right" align="center" width="280">
          <template #default="scope">
            <el-button link type="primary" @click="handleView(scope.row)">查看</el-button>
            <el-button link type="primary" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button link type="success" @click="generateQRCode(scope.row)">生成二维码</el-button>
            <el-button link type="primary" @click="handleExport(scope.row)">导出</el-button>
            <el-button link type="primary" @click="handleReassign(scope.row)" v-if="scope.row.status === '已分配'">重新分配</el-button>
            <el-button link type="danger" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- åˆ†é¡µ -->
      <pagination
        :total="pagination.total"
        layout="total, sizes, prev, pager, next, jumper"
        :page="pagination.currentPage"
        :limit="pagination.pageSize"
        @pagination="handleCurrentChange"
      />
    </el-card>

    <!-- æ–°å¢ž/编辑对话框 -->
    <el-dialog v-model="dialogVisible" :title="dialogTitle" width="700px">
      <el-form :model="form" :rules="rules" ref="formRef" label-width="100px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="产品名称" prop="productName">
              <el-input v-model="form.productName" placeholder="请输入产品名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="产品编码" prop="productCode">
              <el-input v-model="form.productCode" placeholder="请输入产品编码"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="批次号" prop="batchNo">
              <el-input v-model="form.batchNo" placeholder="请输入批次号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="标识类型" prop="identifierType">
              <el-select v-model="form.identifierType" placeholder="请选择标识类型" style="width: 100%">
                <el-option label="二维码" value="二维码"></el-option>
                <el-option label="防伪码" value="防伪码"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="生成数量" prop="quantity">
              <el-input-number v-model="form.quantity" :min="1" :max="10000" style="width: 100%"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="状态" prop="status">
              <el-select v-model="form.status" placeholder="请选择状态" style="width: 100%">
                <el-option label="已生成" value="已生成"></el-option>
                <el-option label="已分配" value="已分配"></el-option>
                <el-option label="已使用" value="已使用"></el-option>
                <el-option label="已作废" value="已作废"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="备注" prop="remark">
              <el-input type="textarea" v-model="form.remark" placeholder="请输入备注信息" rows="3"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取 æ¶ˆ</el-button>
          <el-button type="primary" @click="handleSubmit">ç¡® å®š</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- æ ‡è¯†ç”Ÿæˆå¯¹è¯æ¡† -->
    <el-dialog v-model="generateDialogVisible" title="标识生成" width="500px">
      <el-form label-width="100px">
        <el-form-item label="产品名称">
          <span>{{ currentProduct.productName }}</span>
        </el-form-item>
        <el-form-item label="产品编码">
          <span>{{ currentProduct.productCode }}</span>
        </el-form-item>
        <el-form-item label="批次号">
          <span>{{ currentProduct.batchNo }}</span>
        </el-form-item>
        <el-form-item label="标识类型">
          <span>{{ currentProduct.identifierType }}</span>
        </el-form-item>
        <el-form-item label="生成数量" prop="generateQuantity">
          <el-input-number v-model="generateQuantity" :min="1" :max="10000" style="width: 100%"></el-input-number>
        </el-form-item>
        <el-form-item label="编码规则" prop="codeRule">
          <el-select v-model="codeRule" placeholder="请选择编码规则" style="width: 100%">
            <el-option label="产品编码+批次号+序号" value="产品编码+批次号+序号"></el-option>
            <el-option label="时间戳+随机数" value="时间戳+随机数"></el-option>
            <el-option label="自定义规则" value="自定义规则"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="自定义前缀" prop="customPrefix" v-if="codeRule === '自定义规则'">
          <el-input v-model="customPrefix" placeholder="请输入自定义前缀"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="generateDialogVisible = false">取 æ¶ˆ</el-button>
          <el-button type="primary" @click="generateIdentifiers">生 æˆ</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- é‡æ–°åˆ†é…å¯¹è¯æ¡† -->
    <el-dialog v-model="reassignDialogVisible" title="重新分配标识" width="500px">
      <el-form label-width="100px">
        <el-form-item label="产品名称">
          <span>{{ currentProduct.productName }}</span>
        </el-form-item>
        <el-form-item label="标识码">
          <span>{{ currentProduct.identifierCode }}</span>
        </el-form-item>
        <el-form-item label="新批次号" prop="newBatchNo">
          <el-input v-model="newBatchNo" placeholder="请输入新批次号"></el-input>
        </el-form-item>
        <el-form-item label="分配原因" prop="reassignReason">
          <el-input type="textarea" v-model="reassignReason" rows="3" placeholder="请输入重新分配原因"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="reassignDialogVisible = false">取 æ¶ˆ</el-button>
          <el-button type="primary" @click="saveReassign">ç¡® å®š</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- äºŒç»´ç é¢„览对话框 -->
    <el-dialog v-model="qrCodeDialogVisible" title="二维码预览" width="500px" center>
      <div class="qr-preview-container">
        <div v-if="qrCodeUrl" class="qr-image-container">
          <img :src="qrCodeUrl" alt="二维码" class="qr-image" />
          <div class="qr-info">
            <p><strong>产品名称：</strong>{{ currentQRProduct.productName }}</p>
            <p><strong>产品编码：</strong>{{ currentQRProduct.productCode }}</p>
            <p><strong>批次号：</strong>{{ currentQRProduct.batchNo }}</p>
            <p><strong>标识码：</strong>{{ currentQRProduct.identifierCode }}</p>
            <p><strong>标识类型：</strong>{{ currentQRProduct.identifierType }}</p>
          </div>
        </div>
        <div v-else class="qr-loading">
          <el-icon class="is-loading"><Loading /></el-icon>
          <p>正在生成二维码...</p>
        </div>
      </div>
      
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="qrCodeDialogVisible = false">关闭</el-button>
          <el-button 
            v-if="qrCodeUrl" 
            type="primary" 
            @click="copyQRContent" 
            icon="CopyDocument"
          >
            å¤åˆ¶å†…容
          </el-button>
          <el-button 
            v-if="qrCodeUrl" 
            type="success" 
            @click="downloadQRCode" 
            icon="Download"
          >
            ä¸‹è½½äºŒç»´ç 
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus, Search, Loading, Download } from '@element-plus/icons-vue'
import Pagination from '@/components/PIMTable/Pagination.vue'
import QRCode from 'qrcode'

// å“åº”式数据
const loading = ref(false)
const searchForm = reactive({
  productName: '',
  identifierType: '',
  status: ''
})

const identifierList = ref([
  {
    id: 1,
    productName: '工业传感器A型',
    productCode: 'SENSOR001',
    batchNo: 'B202312001',
    identifierType: '二维码',
    identifierCode: 'QR_SENSOR001_B202312001_001',
    status: '已分配',
    generateTime: '2023-12-01 10:00:00',
    remark: '重要产品标识'
  },
  {
    id: 2,
    productName: '控制面板B型',
    productCode: 'PANEL002',
    batchNo: 'B202312002',
    identifierType: '防伪码',
    identifierCode: 'SEC_PANEL002_B202312002_001',
    status: '已生成',
    generateTime: '2023-12-02 14:30:00',
    remark: '常规产品标识'
  },
  {
    id: 3,
    productName: '数据采集器C型',
    productCode: 'COLLECTOR003',
    batchNo: 'B202312003',
    identifierType: '防伪码',
    identifierCode: 'SEC_COLLECTOR003_B202312003_001',
    status: '已使用',
    generateTime: '2023-12-03 09:15:00',
    remark: '测试产品标识'
  }
])

const pagination = reactive({
  total: 3,
  currentPage: 1,
  pageSize: 10
})

const dialogVisible = ref(false)
const dialogTitle = ref('新增标识')
const form = reactive({
  productName: '',
  productCode: '',
  batchNo: '',
  identifierType: '',
  quantity: 1,
  status: '已生成',
  remark: ''
})

const rules = {
  productName: [{ required: true, message: '请输入产品名称', trigger: 'blur' }],
  productCode: [{ required: true, message: '请输入产品编码', trigger: 'blur' }],
  batchNo: [{ required: true, message: '请输入批次号', trigger: 'blur' }],
  identifierType: [{ required: true, message: '请选择标识类型', trigger: 'change' }],
  quantity: [{ required: true, message: '请输入生成数量', trigger: 'blur' }],
  status: [{ required: true, message: '请选择状态', trigger: 'change' }]
}

const isEdit = ref(false)
const editId = ref(null)
const generateDialogVisible = ref(false)
const reassignDialogVisible = ref(false)
const currentProduct = ref({})
const generateQuantity = ref(1)
const codeRule = ref('')
const customPrefix = ref('')
const newBatchNo = ref('')
const reassignReason = ref('')
const formRef = ref()

// äºŒç»´ç ç›¸å…³å˜é‡
const qrCodeDialogVisible = ref(false)
const qrCodeUrl = ref('')
const currentQRProduct = ref({})

// è®¡ç®—属性
const filteredList = computed(() => {
  let list = identifierList.value
  if (searchForm.productName) {
    list = list.filter(item => item.productName.includes(searchForm.productName))
  }
  if (searchForm.identifierType) {
    list = list.filter(item => item.identifierType === searchForm.identifierType)
  }
  if (searchForm.status) {
    list = list.filter(item => item.status === searchForm.status)
  }
  return list
})

// æ–¹æ³•
const getIdentifierTypeType = (type) => {
  const typeMap = {
    '二维码': 'success',
    '防伪码': 'warning'
  }
  return typeMap[type] || 'info'
}

const getStatusType = (status) => {
  const statusMap = {
    '已生成': 'info',
    '已分配': 'primary',
    '已使用': 'success',
    '已作废': 'danger'
  }
  return statusMap[status] || 'info'
}

const handleSearch = () => {
  // æœç´¢é€»è¾‘已在computed中处理
}

const resetSearch = () => {
  searchForm.productName = ''
  searchForm.identifierType = ''
  searchForm.status = ''
}

const handleAdd = () => {
  dialogTitle.value = '新增标识'
  isEdit.value = false
  form.productName = ''
  form.productCode = ''
  form.batchNo = ''
  form.identifierType = ''
  form.quantity = 1
  form.status = '已生成'
  form.remark = ''
  dialogVisible.value = true
}

const handleView = (row) => {
  // æŸ¥çœ‹æ ‡è¯†è¯¦æƒ…
  ElMessage.info('查看标识详情功能待实现')
}

const handleEdit = (row) => {
  dialogTitle.value = '编辑标识'
  isEdit.value = true
  editId.value = row.id
  Object.assign(form, row)
  dialogVisible.value = true
}

const handleExport = (row) => {
  // å¯¼å‡ºæ ‡è¯†
  ElMessage.success(`已导出标识: ${row.identifierCode}`)
}

const handleReassign = (row) => {
  currentProduct.value = row
  newBatchNo.value = ''
  reassignReason.value = ''
  reassignDialogVisible.value = true
}

const handleDelete = (row) => {
  ElMessageBox.confirm('确认删除该标识吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    const index = identifierList.value.findIndex(item => item.id === row.id)
    if (index > -1) {
      identifierList.value.splice(index, 1)
      pagination.total--
      ElMessage.success('删除成功')
    }
  })
}

// ç”ŸæˆäºŒç»´ç 
const generateQRCode = async (row) => {
  try {
    // æ£€æŸ¥å¿…要字段
    if (!row.productName || !row.productCode || !row.batchNo) {
      ElMessage.warning('产品信息不完整，无法生成二维码')
      return
    }
    
    currentQRProduct.value = row
    qrCodeUrl.value = ''
    qrCodeDialogVisible.value = true
    
    // æž„建二维码内容
    let qrContent = ''
    if (row.identifierType === '二维码') {
      qrContent = `${row.productName}|${row.productCode}|${row.batchNo}|${row.identifierCode}`
    } else if (row.identifierType === '防伪码') {
      // é˜²ä¼ªç æ ¼å¼ï¼šSEC_产品编码_批次号_时间戳_随机数
      const timestamp = Date.now()
      const random = Math.random().toString(36).substr(2, 8)
      qrContent = `SEC_${row.productCode}_${row.batchNo}_${timestamp}_${random}`
    }
    
    // ç”ŸæˆäºŒç»´ç 
    qrCodeUrl.value = await QRCode.toDataURL(qrContent, {
      width: 256,
      margin: 2,
      color: {
        dark: '#000000',
        light: '#FFFFFF'
      },
      errorCorrectionLevel: row.identifierType === '防伪码' ? 'H' : 'M'
    })
    
    ElMessage.success('二维码生成成功！')
    
  } catch (error) {
    console.error('生成二维码失败:', error)
    ElMessage.error('生成二维码失败：' + error.message)
    qrCodeDialogVisible.value = false
  }
}

// ä¸‹è½½äºŒç»´ç 
const downloadQRCode = () => {
  if (!qrCodeUrl.value) {
    ElMessage.warning('请先生成二维码')
    return
  }
  
  const a = document.createElement('a')
  a.href = qrCodeUrl.value
  a.download = `${currentQRProduct.value.productName}_${currentQRProduct.value.identifierType}_${new Date().getTime()}.png`
  document.body.appendChild(a)
  a.click()
  document.body.removeChild(a)
  ElMessage.success('下载成功！')
}

// å¤åˆ¶äºŒç»´ç å†…容
const copyQRContent = async () => {
  if (!currentQRProduct.value) {
    ElMessage.warning('没有可复制的内容')
    return
  }
  
  try {
    let content = ''
    if (currentQRProduct.value.identifierType === '二维码') {
      content = `${currentQRProduct.value.productName}|${currentQRProduct.value.productCode}|${currentQRProduct.value.batchNo}|${currentQRProduct.value.identifierCode}`
    } else if (currentQRProduct.value.identifierType === '防伪码') {
      const timestamp = Date.now()
      const random = Math.random().toString(36).substr(2, 8)
      content = `SEC_${currentQRProduct.value.productCode}_${currentQRProduct.value.batchNo}_${timestamp}_${random}`
    }
    
    await navigator.clipboard.writeText(content)
    ElMessage.success('内容已复制到剪贴板')
  } catch (error) {
    // é™çº§æ–¹æ¡ˆ
    const textArea = document.createElement('textarea')
    textArea.value = content
    document.body.appendChild(textArea)
    textArea.select()
    document.execCommand('copy')
    document.body.removeChild(textArea)
    ElMessage.success('内容已复制到剪贴板')
  }
}

const generateIdentifiers = () => {
  if (!codeRule.value) {
    ElMessage.warning('请选择编码规则')
    return
  }
  
  // ç”Ÿæˆæ ‡è¯†çš„逻辑
  const newIdentifiers = []
  for (let i = 1; i <= generateQuantity.value; i++) {
    let identifierCode = ''
    if (codeRule.value === '产品编码+批次号+序号') {
      identifierCode = `${currentProduct.value.productCode}_${currentProduct.value.batchNo}_${String(i).padStart(3, '0')}`
    } else if (codeRule.value === '时间戳+随机数') {
      identifierCode = `TS_${Date.now()}_${Math.floor(Math.random() * 1000)}`
    } else if (codeRule.value === '自定义规则') {
      identifierCode = `${customPrefix.value || 'CUSTOM'}_${Date.now()}_${i}`
    }
    
    newIdentifiers.push({
      id: Math.max(...identifierList.value.map(item => item.id)) + i,
      productName: currentProduct.value.productName,
      productCode: currentProduct.value.productCode,
      batchNo: currentProduct.value.batchNo,
      identifierType: currentProduct.value.identifierType,
      identifierCode: identifierCode,
      status: '已生成',
      generateTime: new Date().toLocaleString(),
      remark: '批量生成'
    })
  }
  
  identifierList.value.push(...newIdentifiers)
  pagination.total += newIdentifiers.length
  ElMessage.success(`成功生成 ${newIdentifiers.length} ä¸ªæ ‡è¯†`)
  generateDialogVisible.value = false
}

const saveReassign = () => {
  if (!newBatchNo.value) {
    ElMessage.warning('请输入新批次号')
    return
  }
  
  const index = identifierList.value.findIndex(item => item.id === currentProduct.value.id)
  if (index > -1) {
    identifierList.value[index].batchNo = newBatchNo.value
    identifierList.value[index].status = '已分配'
    ElMessage.success('标识重新分配成功')
    reassignDialogVisible.value = false
  }
}

const handleSubmit = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      if (isEdit.value) {
        // ç¼–辑
        const index = identifierList.value.findIndex(item => item.id === editId.value)
        if (index > -1) {
          identifierList.value[index] = { ...form, id: editId.value }
          ElMessage.success('编辑成功')
        }
             } else {
         // æ–°å¢ž
         const newId = Math.max(...identifierList.value.map(item => item.id)) + 1
         
         // æ ¹æ®æ ‡è¯†ç±»åž‹ç”Ÿæˆä¸åŒçš„标识码
         let identifierCode = ''
         if (form.identifierType === '二维码') {
           identifierCode = `QR_${form.productCode}_${form.batchNo}_001`
         } else if (form.identifierType === '防伪码') {
           identifierCode = `SEC_${form.productCode}_${form.batchNo}_001`
         }
         
         identifierList.value.push({
           ...form,
           id: newId,
           identifierCode: identifierCode,
           generateTime: new Date().toLocaleString()
         })
         pagination.total++
         ElMessage.success('新增成功')
       }
      dialogVisible.value = false
    }
  })
}

const handleCurrentChange = (val) => {
  pagination.currentPage = val.page
  pagination.pageSize = val.limit
}
</script>

<style scoped>
.search-row {
  margin-bottom: 20px;
}

.quick-actions-row {
  margin-bottom: 20px;
}

.quick-actions-row .el-alert {
  margin-bottom: 0;
}

.quick-actions-row .el-alert p {
  margin: 5px 0;
  font-size: 14px;
  line-height: 1.5;
}

/* äºŒç»´ç é¢„览样式 */
.qr-preview-container {
  text-align: center;
  padding: 20px;
}

.qr-image-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.qr-image {
  max-width: 100%;
  height: auto;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.qr-info {
  text-align: left;
  background: #f8f9fa;
  padding: 15px;
  border-radius: 8px;
  min-width: 300px;
}

.qr-info p {
  margin: 8px 0;
  color: #666;
  font-size: 14px;
}

.qr-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  padding: 40px 0;
}

.qr-loading .el-icon {
  font-size: 32px;
  color: #409EFF;
}

.qr-loading p {
  color: #666;
  margin: 0;
}
</style>

 src/views/productionManagement/safetyMonitoring/index.vue

@@ -295,7 +295,7 @@
            emergencyRecords: [
                {
                    id: 'EM001',
                    time: '2024-01-15 14:35:12',
                    time: '2025-01-15 14:35:12',
                    location: '储罐T-003',
                    type: '甲烷超标',
                    status: 'resolved',
@@ -303,7 +303,7 @@
                },
                {
                    id: 'EM002',
                    time: '2024-01-15 14:35:15',
                    time: '2025-01-15 14:35:15',
                    location: '压缩机C-002',
                    type: '硫化氢超标',
                    status: 'processing',

 src/views/qualityManagement/nonconformingManagement/index.vue

@@ -4,7 +4,7 @@
      <div style="display: flex;flex-direction: row;align-items: center;">
        <div>
          <span class="search_title">类型：</span>
          <el-select v-model="searchForm.inspectType" clearable style="width: 240px" @change="handleQuery">
          <el-select v-model="searchForm.inspectType" clearable style="width: 200px" @change="handleQuery">
            <el-option label="原材料检验" :value="0" />
            <el-option label="过程检验" :value="1" />
            <el-option label="出厂检验" :value="2" />
@@ -12,7 +12,7 @@
        </div>
        <div style="margin-left: 10px">
          <span class="search_title">状态：</span>
          <el-select v-model="searchForm.inspectState" clearable style="width: 240px" @change="handleQuery">
          <el-select v-model="searchForm.inspectState" clearable style="width: 200px" @change="handleQuery">
            <el-option label="待处理" :value="0" />
            <el-option label="已处理" :value="1" />
          </el-select>
@@ -21,7 +21,7 @@
          <span class="search_title">产品名称：</span>
          <el-input
              v-model="searchForm.productName"
              style="width: 240px"
              style="width: 200px"
              placeholder="请输入产品名称搜索"
              @change="handleQuery"
              clearable
@@ -30,6 +30,7 @@
        </div>
        <span  style="margin-left: 10px" class="search_title">检测日期：</span>
        <el-date-picker  v-model="searchForm.entryDate" value-format="YYYY-MM-DD" format="YYYY-MM-DD" type="daterange"
                                                 style="width: 300px"
                         placeholder="请选择" clearable @change="changeDaterange" />
        <el-button type="primary" @click="handleQuery" style="margin-left: 10px">搜索</el-button>
      </div>

 src/views/qualityManagement/visualization/qualityDashboard.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,307 @@
<template>
  <div class="quality-dashboard">
    <el-row :gutter="16">
      <el-col :xs="24" :sm="12">
        <el-card shadow="hover" class="panel">
          <template #header>
            <div class="panel-title">
              æ£€æµ‹æ ·å“åŠ¨æ€çŠ¶æ€
              <div class="actions">
                <el-switch v-model="voiceEnabled" active-text="语音预警" inactive-text="静音" />
              </div>
            </div>
          </template>
          <div class="status-list">
            <div v-for="item in sampleStatus" :key="item.id" class="status-item" :class="item.status">
              <div class="left">
                <span class="dot" :class="item.status"></span>
                <span class="name">{{ item.name }}</span>
              </div>
              <div class="right">
                <el-tag :type="statusTagType(item.status)" size="small">{{ statusLabel(item.status) }}</el-tag>
                <span class="time">{{ item.time }}</span>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12">
        <el-card shadow="hover" class="panel">
          <template #header>
            <div class="panel-title">任务排行（Top 10）</div>
          </template>
          <EChart :xAxis="tasksXAxis" :yAxis="[{ type: 'value' }]" :series="tasksSeries" :grid="{ left: 40, right: 20, top: 20, bottom: 40 }" :tooltip="{ trigger: 'axis' }" :barColors="['#3b82f6']" :chartStyle="{ height: '320px', width: '100%' }" />
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="16" style="margin-top: 16px;">
      <el-col :xs="24" :sm="14">
        <el-card shadow="hover" class="panel">
          <template #header>
            <div class="panel-title">历史趋势</div>
          </template>
          <EChart :xAxis="[{ type: 'category', data: trendXAxis }]" :yAxis="[{ type: 'value', name: '数量' }]" :series="trendSeries" :tooltip="{ trigger: 'axis' }" :legend="{ top: 0 }" :lineColors="['#10b981', '#f59e0b']" :chartStyle="{ height: '340px', width: '100%' }" />
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="10">
        <el-card shadow="hover" class="panel">
          <template #header>
            <div class="panel-title">合格率分析</div>
          </template>
          <EChart :series="passRateSeries" :legend="{ show: false }" :chartStyle="{ height: '340px', width: '100%' }" />
          <div class="passrate-text">
            å½“前合格率：<b>{{ (passRate * 100).toFixed(1) }}%</b>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="16" style="margin-top: 16px;">
      <el-col :xs="24">
        <el-card shadow="hover" class="panel">
          <template #header>
            <div class="panel-title">SPC æŽ§åˆ¶å›¾ï¼ˆXbar）</div>
          </template>
          <EChart :xAxis="[{ type: 'category', data: spcXAxis }]" :yAxis="[{ type: 'value', name: '测量值' }]" :series="spcSeries" :legend="{ top: 0 }" :tooltip="{ trigger: 'axis' }" :lineColors="['#2563eb', '#ef4444', '#f97316', '#22c55e']" :chartStyle="{ height: '380px', width: '100%' }" />
        </el-card>
      </el-col>
    </el-row>
  </div>
  
</template>

<script setup>
import { onMounted, onBeforeUnmount, reactive, ref } from 'vue'
import EChart from '@/components/Echarts/echarts.vue'

const voiceEnabled = ref(true)
let dataTimer = null

// 1) æ ·å“åŠ¨æ€çŠ¶æ€ï¼ˆæ»šåŠ¨æ›´æ–°ï¼‰
const sampleStatus = ref([])
const statusPool = ['processing', 'warning', 'error', 'success']
function statusLabel(s) {
  return s === 'processing' ? '检测中' : s === 'warning' ? '预警' : s === 'error' ? '不合格' : '合格'
}
function statusTagType(s) {
  return s === 'processing' ? 'info' : s === 'warning' ? 'warning' : s === 'error' ? 'danger' : 'success'
}
function randomSample() {
  const id = Math.random().toString(36).slice(2, 8)
  const status = statusPool[Math.floor(Math.random() * statusPool.length)]
  const name = `样品-${Math.floor(Math.random() * 900 + 100)}`
  const time = new Date().toLocaleTimeString('zh-CN', { hour12: false })
  return { id, name, status, time }
}

// 2) ä»»åŠ¡æŽ’行（柱状图）
const tasksXAxis = reactive([{ type: 'category', data: [] }])
const tasksSeries = ref([
  {
    type: 'bar',
    data: [],
    label: { show: true, position: 'inside', align: 'center', verticalAlign: 'middle', color: '#fff' },
    encode: undefined,
  },
])

// 3) åŽ†å²è¶‹åŠ¿ï¼ˆæŠ˜çº¿ï¼‰
const trendXAxis = ref([])
const trendSeries = ref([
  { name: '来样数', type: 'line', smooth: true, data: [] },
  { name: '完成数', type: 'line', smooth: true, data: [] },
])

// 4) åˆæ ¼çŽ‡åˆ†æžï¼ˆä»ªè¡¨ç›˜ï¼‰
const passRate = ref(0.92)
const passRateSeries = ref([
  {
    type: 'gauge',
    progress: { show: true, width: 12 },
    axisLine: { lineStyle: { width: 12 } },
    pointer: { show: true },
    detail: { valueAnimation: true, formatter: (v) => `${(v * 100).toFixed(1)}%` },
    data: [{ value: passRate.value }],
  },
])

// 5) SPC æŽ§åˆ¶å›¾
const spcXAxis = ref([])
const spcData = ref([]) // å®žé™…测量值
const CL = ref(50)
const UCL = ref(55)
const LCL = ref(45)
const spcSeries = ref([
  {
    name: '测量均值',
    type: 'line',
    smooth: false,
    symbol: 'circle',
    data: [],
    markLine: {
      symbol: 'none',
      lineStyle: { type: 'dashed', color: '#999' },
      data: [
        { yAxis: () => UCL.value, name: 'UCL' },
        { yAxis: () => CL.value, name: 'CL' },
        { yAxis: () => LCL.value, name: 'LCL' },
      ],
      label: { formatter: ({ name }) => name },
    },
  },
  { name: 'UCL', type: 'line', data: [], symbol: 'none', lineStyle: { type: 'dashed', color: '#ef4444' } },
  { name: 'CL', type: 'line', data: [], symbol: 'none', lineStyle: { type: 'dashed', color: '#f97316' } },
  { name: 'LCL', type: 'line', data: [], symbol: 'none', lineStyle: { type: 'dashed', color: '#22c55e' } },
])

// è¯­éŸ³æ’­æŠ¥
function speak(text) {
  if (!voiceEnabled.value) return
  if (!('speechSynthesis' in window)) return
  const utter = new SpeechSynthesisUtterance(text)
  utter.lang = 'zh-CN'
  try {
    window.speechSynthesis.cancel()
    window.speechSynthesis.speak(utter)
  } catch (e) {
    // ignore
  }
}

function refreshFakeData() {
  // æ ·å“çŠ¶æ€æ»šåŠ¨
  const next = randomSample()
  sampleStatus.value = [next, ...sampleStatus.value].slice(0, 8)

  // ä»»åŠ¡æŽ’è¡Œ
  const tasks = Array.from({ length: 10 }).map((_, i) => ({ name: `任务-${i + 1}`, count: Math.floor(Math.random() * 100 + 20) }))
  tasks.sort((a, b) => a.count - b.count)
  tasksXAxis.data = tasks.map(t => t.name)
  tasksSeries.value[0].data = tasks.map(t => t.count)

  // åŽ†å²è¶‹åŠ¿ï¼ˆè¿½åŠ ç‚¹ï¼‰
  const nowLabel = new Date().toLocaleTimeString('zh-CN', { minute: '2-digit', second: '2-digit' })
  if (trendXAxis.value.length > 15) {
    trendXAxis.value.shift()
    trendSeries.value[0].data.shift()
    trendSeries.value[1].data.shift()
  }
  trendXAxis.value.push(nowLabel)
  const incoming = Math.floor(Math.random() * 30 + 20)
  const finished = Math.max(0, incoming - Math.floor(Math.random() * 10))
  trendSeries.value[0].data.push(incoming)
  trendSeries.value[1].data.push(finished)

  // åˆæ ¼çŽ‡ï¼ˆè½»å¾®æ³¢åŠ¨ï¼‰
  const delta = (Math.random() - 0.5) * 0.02
  passRate.value = Math.min(0.99, Math.max(0.6, passRate.value + delta))
  passRateSeries.value[0].data[0].value = passRate.value

  // SPC æ•°æ®ï¼ˆçª—口移动）
  const nextVal = CL.value + (Math.random() - 0.5) * 8 // æ³¢åŠ¨
  if (spcXAxis.value.length > 30) {
    spcXAxis.value.shift()
    spcData.value.shift()
  }
  spcXAxis.value.push(`${spcXAxis.value.length + 1}`)
  spcData.value.push(parseFloat(nextVal.toFixed(2)))
  spcSeries.value[0].data = [...spcData.value]
  spcSeries.value[1].data = new Array(spcData.value.length).fill(UCL.value)
  spcSeries.value[2].data = new Array(spcData.value.length).fill(CL.value)
  spcSeries.value[3].data = new Array(spcData.value.length).fill(LCL.value)

  // è§¦å‘播报：合格率过低或 SPC è¶…限
  if (passRate.value < 0.8) {
    speak(`预警，当前合格率为 ${(passRate.value * 100).toFixed(0)}%，低于 80% é˜ˆå€¼`)
  }
  const last = spcData.value[spcData.value.length - 1]
  if (last > UCL.value) {
    speak(`预警，最新测量值 ${last.toFixed(2)} è¶…过上限`)
  }
  if (last < LCL.value) {
    speak(`预警，最新测量值 ${last.toFixed(2)} ä½ŽäºŽä¸‹é™`)
  }
}

onMounted(() => {
  // åˆå§‹åŒ–几条假数据
  sampleStatus.value = Array.from({ length: 5 }).map(() => randomSample())
  for (let i = 0; i < 10; i++) {
    trendXAxis.value.push(`T-${i}`)
    trendSeries.value[0].data.push(Math.floor(Math.random() * 30 + 20))
    trendSeries.value[1].data.push(Math.floor(Math.random() * 25 + 15))
  }
  for (let i = 0; i < 20; i++) {
    spcXAxis.value.push(`${i + 1}`)
    const v = CL.value + (Math.random() - 0.5) * 6
    spcData.value.push(parseFloat(v.toFixed(2)))
  }
  spcSeries.value[0].data = [...spcData.value]
  spcSeries.value[1].data = new Array(spcData.value.length).fill(UCL.value)
  spcSeries.value[2].data = new Array(spcData.value.length).fill(CL.value)
  spcSeries.value[3].data = new Array(spcData.value.length).fill(LCL.value)

  dataTimer = setInterval(refreshFakeData, 10000)
})

onBeforeUnmount(() => {
  if (dataTimer) clearInterval(dataTimer)
  try { window.speechSynthesis && window.speechSynthesis.cancel() } catch (e) {}
})
</script>

<style scoped>
.quality-dashboard {
  padding: 8px;
}
.panel-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
}
.status-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 320px;
  overflow: auto;
}
.status-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-radius: 6px;
  background: var(--el-fill-color-light);
}
.status-item .left {
  display: flex;
  align-items: center;
  gap: 8px;
}
.status-item .right {
  display: flex;
  align-items: center;
  gap: 10px;
}
.status-item .name { font-weight: 500; }
.status-item .time { color: var(--el-text-color-secondary); font-size: 12px; }
.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.dot.processing { background: #60a5fa; }
.dot.warning { background: #f59e0b; }
.dot.error { background: #ef4444; }
.dot.success { background: #10b981; }
.passrate-text {
  text-align: center;
  margin-top: 8px;
}
</style>



 src/views/reportAnalysis/reportManagement.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,733 @@
<template>
  <div class="report-management">
    <!-- é¡µé¢æ ‡é¢˜ -->
    <div class="page-header">
      <h2>报表管理</h2>
      <p>提供样品进度、设备使用、检测项目、领用记录等各类自动统计报表</p>
    </div>

    <!-- ç­›é€‰æ¡ä»¶ -->
    <el-card class="filter-card" shadow="never">
      <el-form :model="filterForm" inline>
        <el-form-item label="时间范围">
          <el-date-picker
            v-model="filterForm.dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            @change="handleFilterChange"
          />
        </el-form-item>
        <el-form-item label="报表类型">
          <el-select v-model="filterForm.reportType" placeholder="请选择报表类型" @change="handleFilterChange">
            <el-option label="样品进度报表" value="sample" />
            <el-option label="设备使用报表" value="equipment" />
            <el-option label="检测项目报表" value="inspection" />
            <el-option label="领用记录报表" value="usage" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleFilterChange">查询</el-button>
          <el-button @click="resetFilter">重置</el-button>
          <el-button type="success" @click="exportReport">导出报表</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- ç»Ÿè®¡å¡ç‰‡ -->
    <div class="statistics-cards">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-card class="stat-card" shadow="hover">
            <div class="stat-content">
              <div class="stat-icon">
                <el-icon><Box /></el-icon>
              </div>
              <div class="stat-info">
                <div class="stat-number">{{ statistics.totalSamples }}</div>
                <div class="stat-label">总样品数</div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="stat-card" shadow="hover">
            <div class="stat-content">
              <div class="stat-icon">
                <el-icon><Tools /></el-icon>
              </div>
              <div class="stat-info">
                <div class="stat-number">{{ statistics.activeEquipment }}</div>
                <div class="stat-label">在用设备</div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="stat-card" shadow="hover">
            <div class="stat-content">
              <div class="stat-icon">
                <el-icon><Document /></el-icon>
              </div>
              <div class="stat-info">
                <div class="stat-number">{{ statistics.completedInspections }}</div>
                <div class="stat-label">已完成检测</div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="stat-card" shadow="hover">
            <div class="stat-content">
              <div class="stat-icon">
                <el-icon><ShoppingCart /></el-icon>
              </div>
              <div class="stat-info">
                <div class="stat-number">{{ statistics.totalUsage }}</div>
                <div class="stat-label">总领用次数</div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- å›¾è¡¨åŒºåŸŸ -->
    <div class="charts-container">
      <el-row :gutter="20">
        <!-- æ ·å“è¿›åº¦å›¾è¡¨ -->
        <el-col :span="12">
          <el-card class="chart-card" shadow="hover">
            <template #header>
              <div class="card-header">
                <span>样品进度统计</span>
                <el-button type="text" @click="refreshSampleChart">刷新</el-button>
              </div>
            </template>
            <div ref="sampleChartRef" class="chart-container"></div>
          </el-card>
        </el-col>
        
        <!-- è®¾å¤‡ä½¿ç”¨å›¾è¡¨ -->
        <el-col :span="12">
          <el-card class="chart-card" shadow="hover">
            <template #header>
              <div class="card-header">
                <span>设备使用率统计</span>
                <el-button type="text" @click="refreshEquipmentChart">刷新</el-button>
              </div>
            </template>
            <div ref="equipmentChartRef" class="chart-container"></div>
          </el-card>
        </el-col>
      </el-row>
      
      <el-row :gutter="20" style="margin-top: 20px;">
        <!-- æ£€æµ‹é¡¹ç›®ç»Ÿè®¡ -->
        <el-col :span="12">
          <el-card class="chart-card" shadow="hover">
            <template #header>
              <div class="card-header">
                <span>检测项目分布</span>
                <el-button type="text" @click="refreshInspectionChart">刷新</el-button>
              </div>
            </template>
            <div ref="inspectionChartRef" class="chart-container"></div>
          </el-card>
        </el-col>
        
        <!-- é¢†ç”¨è®°å½•è¶‹åŠ¿ -->
        <el-col :span="12">
          <el-card class="chart-card" shadow="hover">
            <template #header>
              <div class="card-header">
                <span>领用记录趋势</span>
                <el-button type="text" @click="refreshUsageChart">刷新</el-button>
              </div>
            </template>
            <div ref="usageChartRef" class="chart-container"></div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- è¯¦ç»†æ•°æ®è¡¨æ ¼ -->
    <el-card class="table-card" shadow="hover">
      <template #header>
        <div class="card-header">
          <span>详细数据</span>
          <div>
            <el-button type="primary" size="small" @click="refreshTable">刷新</el-button>
            <el-button type="success" size="small" @click="exportTable">导出</el-button>
          </div>
        </div>
      </template>
      
      <el-table
        :data="tableData"
        style="width: 100%"
        v-loading="tableLoading"
        stripe
        border
      >
        <el-table-column prop="id" label="编号" width="80" />
        <el-table-column prop="name" label="名称" />
        <el-table-column prop="type" label="类型" width="120" />
        <el-table-column prop="status" label="状态" width="100">
          <template #default="scope">
            <el-tag :type="getStatusType(scope.row.status)">
              {{ scope.row.status }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="progress" label="进度" width="120">
          <template #default="scope">
            <el-progress :percentage="scope.row.progress" :status="getProgressStatus(scope.row.progress)" />
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="180" />
        <el-table-column prop="updateTime" label="更新时间" width="180" />
        <el-table-column label="操作" width="150" fixed="right">
          <template #default="scope">
            <el-button type="text" size="small" @click="viewDetail(scope.row)">查看</el-button>
            <el-button type="text" size="small" @click="editItem(scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="pagination.currentPage"
          v-model:page-size="pagination.pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="pagination.total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, nextTick } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import * as echarts from 'echarts'
import { Box, Tools, Document, ShoppingCart } from '@element-plus/icons-vue'

// å“åº”式数据
const filterForm = reactive({
  dateRange: [],
  reportType: 'sample'
})

const statistics = reactive({
  totalSamples: 1250,
  activeEquipment: 45,
  completedInspections: 890,
  totalUsage: 2340
})

const tableData = ref([])
const tableLoading = ref(false)
const pagination = reactive({
  currentPage: 1,
  pageSize: 20,
  total: 0
})

// å›¾è¡¨å¼•ç”¨
const sampleChartRef = ref(null)
const equipmentChartRef = ref(null)
const inspectionChartRef = ref(null)
const usageChartRef = ref(null)

// å›¾è¡¨å®žä¾‹
let sampleChart = null
let equipmentChart = null
let inspectionChart = null
let usageChart = null

// åˆå§‹åŒ–数据
const initData = () => {
  // æ¨¡æ‹Ÿè¡¨æ ¼æ•°æ®
  tableData.value = [
    {
      id: 'SP001',
      name: '样品A-001',
      type: '金属材料',
      status: '检测中',
      progress: 75,
      createTime: '2025-01-15 09:30:00',
      updateTime: '2025-01-20 14:20:00'
    },
    {
      id: 'SP002',
      name: '样品B-002',
      type: '塑料制品',
      status: '已完成',
      progress: 100,
      createTime: '2025-01-10 10:15:00',
      updateTime: '2025-01-18 16:45:00'
    },
    {
      id: 'SP003',
      name: '样品C-003',
      type: '电子元件',
      status: '待检测',
      progress: 0,
      createTime: '2025-01-22 08:45:00',
      updateTime: '2025-01-22 08:45:00'
    },
    {
      id: 'EQ001',
      name: '检测设备A',
      type: '光谱仪',
      status: '使用中',
      progress: 60,
      createTime: '2025-01-05 14:20:00',
      updateTime: '2025-01-20 11:30:00'
    },
    {
      id: 'EQ002',
      name: '检测设备B',
      type: '显微镜',
      status: '空闲',
      progress: 0,
      createTime: '2025-01-08 16:10:00',
      updateTime: '2025-01-19 09:15:00'
    }
  ]
  
  pagination.total = tableData.value.length
}

// åˆå§‹åŒ–样品进度图表
const initSampleChart = () => {
  if (sampleChartRef.value) {
    sampleChart = echarts.init(sampleChartRef.value)
    const option = {
      title: {
        text: '样品进度分布',
        left: 'center'
      },
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
      },
      legend: {
        orient: 'vertical',
        left: 'left'
      },
      series: [
        {
          name: '样品状态',
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: '18',
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: [
            { value: 450, name: '已完成' },
            { value: 320, name: '检测中' },
            { value: 280, name: '待检测' },
            { value: 200, name: '已暂停' }
          ]
        }
      ]
    }
    sampleChart.setOption(option)
  }
}

// åˆå§‹åŒ–设备使用图表
const initEquipmentChart = () => {
  if (equipmentChartRef.value) {
    equipmentChart = echarts.init(equipmentChartRef.value)
    const option = {
      title: {
        text: '设备使用率',
        left: 'center'
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      xAxis: {
        type: 'category',
        data: ['光谱仪', '显微镜', '硬度计', '拉力机', '冲击机', '金相仪']
      },
      yAxis: {
        type: 'value',
        name: '使用率(%)'
      },
      series: [
        {
          name: '使用率',
          type: 'bar',
          data: [85, 60, 75, 90, 45, 70],
          label: {
            show: true,
            position: 'inside',
            align: 'center',
            verticalAlign: 'middle',
            formatter: '{c}%',
            color: '#fff'
          },
          itemStyle: {
            color: function(params) {
              const colors = ['#409EFF', '#67C23A', '#E6A23C', '#F56C6C', '#909399', '#9C27B0']
              return colors[params.dataIndex]
            }
          }
        }
      ]
    }
    equipmentChart.setOption(option)
  }
}

// åˆå§‹åŒ–检测项目图表
const initInspectionChart = () => {
  if (inspectionChartRef.value) {
    inspectionChart = echarts.init(inspectionChartRef.value)
    const option = {
      title: {
        text: '检测项目分布',
        left: 'center'
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'left'
      },
      series: [
        {
          name: '检测项目',
          type: 'pie',
          radius: '50%',
          data: [
            { value: 335, name: '物理性能' },
            { value: 310, name: '化学分析' },
            { value: 234, name: '尺寸测量' },
            { value: 135, name: '外观检查' },
            { value: 148, name: '其他检测' }
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    }
    inspectionChart.setOption(option)
  }
}

// åˆå§‹åŒ–领用记录图表
const initUsageChart = () => {
  if (usageChartRef.value) {
    usageChart = echarts.init(usageChartRef.value)
    const option = {
      title: {
        text: '领用记录趋势',
        left: 'center'
      },
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: ['领用次数', '归还次数']
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '领用次数',
          type: 'line',
          stack: 'Total',
          data: [120, 132, 101, 134, 90, 230, 210, 182, 191, 234, 290, 330]
        },
        {
          name: '归还次数',
          type: 'line',
          stack: 'Total',
          data: [110, 125, 95, 128, 85, 220, 200, 175, 185, 225, 280, 320]
        }
      ]
    }
    usageChart.setOption(option)
  }
}

// äº‹ä»¶å¤„理函数
const handleFilterChange = () => {
  ElMessage.success('筛选条件已更新')
  // è¿™é‡Œå¯ä»¥æ ¹æ®ç­›é€‰æ¡ä»¶é‡æ–°åŠ è½½æ•°æ®
}

const resetFilter = () => {
  filterForm.dateRange = []
  filterForm.reportType = 'sample'
  ElMessage.info('筛选条件已重置')
}

const exportReport = () => {
  ElMessage.success('报表导出功能开发中...')
}

const refreshSampleChart = () => {
  initSampleChart()
  ElMessage.success('样品进度图表已刷新')
}

const refreshEquipmentChart = () => {
  initEquipmentChart()
  ElMessage.success('设备使用图表已刷新')
}

const refreshInspectionChart = () => {
  initInspectionChart()
  ElMessage.success('检测项目图表已刷新')
}

const refreshUsageChart = () => {
  initUsageChart()
  ElMessage.success('领用记录图表已刷新')
}

const refreshTable = () => {
  tableLoading.value = true
  setTimeout(() => {
    tableLoading.value = false
    ElMessage.success('表格数据已刷新')
  }, 1000)
}

const exportTable = () => {
  ElMessage.success('表格导出功能开发中...')
}

const handleSizeChange = (val) => {
  pagination.pageSize = val
  // é‡æ–°åŠ è½½æ•°æ®
}

const handleCurrentChange = (val) => {
  pagination.currentPage = val
  // é‡æ–°åŠ è½½æ•°æ®
}

const getStatusType = (status) => {
  const statusMap = {
    '已完成': 'success',
    '检测中': 'warning',
    '待检测': 'info',
    '已暂停': 'danger',
    '使用中': 'primary',
    '空闲': 'info'
  }
  return statusMap[status] || 'info'
}

const getProgressStatus = (progress) => {
  if (progress === 100) return 'success'
  if (progress >= 80) return 'warning'
  if (progress >= 50) return ''
  return 'exception'
}

const viewDetail = (row) => {
  ElMessage.info(`查看详情: ${row.name}`)
}

const editItem = (row) => {
  ElMessage.info(`编辑项目: ${row.name}`)
}

// ç”Ÿå‘½å‘¨æœŸ
onMounted(() => {
  initData()
  nextTick(() => {
    initSampleChart()
    initEquipmentChart()
    initInspectionChart()
    initUsageChart()
  })
  
  // ç›‘听窗口大小变化，重新调整图表大小
  window.addEventListener('resize', () => {
    sampleChart?.resize()
    equipmentChart?.resize()
    inspectionChart?.resize()
    usageChart?.resize()
  })
})
</script>

<style scoped>
.report-management {
  padding: 20px;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.page-header {
  margin-bottom: 20px;
  text-align: center;
}

.page-header h2 {
  color: #303133;
  margin-bottom: 8px;
  font-size: 24px;
  font-weight: 600;
}

.page-header p {
  color: #909399;
  font-size: 14px;
  margin: 0;
}

.filter-card {
  margin-bottom: 20px;
}

.statistics-cards {
  margin-bottom: 20px;
}

.stat-card {
  height: 120px;
}

.stat-content {
  display: flex;
  align-items: center;
  height: 100%;
}

.stat-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20px;
  font-size: 24px;
  color: white;
}

.stat-card:nth-child(1) .stat-icon {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.stat-card:nth-child(2) .stat-icon {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.stat-card:nth-child(3) .stat-icon {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.stat-card:nth-child(4) .stat-icon {
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.stat-info {
  flex: 1;
}

.stat-number {
  font-size: 28px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 8px;
}

.stat-label {
  font-size: 14px;
  color: #909399;
}

.charts-container {
  margin-bottom: 20px;
}

.chart-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chart-container {
  height: 300px;
  width: 100%;
}

.table-card {
  margin-bottom: 20px;
}

.pagination-container {
  margin-top: 20px;
  text-align: right;
}

:deep(.el-card__header) {
  padding: 15px 20px;
  border-bottom: 1px solid #ebeef5;
  background-color: #fafafa;
}

:deep(.el-card__body) {
  padding: 20px;
}

:deep(.el-table) {
  margin-bottom: 20px;
}

:deep(.el-progress) {
  margin: 0;
}

:deep(.el-tag) {
  margin: 0;
}
</style>

 src/views/reportAnalysis/reportManagement/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,716 @@
<template>
    <div class="report-management">
        <!-- ç­›é€‰æ¡ä»¶ -->
        <el-card class="filter-card" shadow="never">
            <el-form :model="filterForm" inline>
                <el-form-item label="时间范围">
                    <el-date-picker
                        style="width: 300px"
                        v-model="filterForm.dateRange"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        format="YYYY-MM-DD"
                        value-format="YYYY-MM-DD"
                        @change="handleFilterChange"
                    />
                </el-form-item>
                <el-form-item label="报表类型">
                    <el-select v-model="filterForm.reportType" placeholder="请选择报表类型" @change="handleFilterChange" style="width: 300px">
                        <el-option label="样品进度报表" value="sample" />
                        <el-option label="设备使用报表" value="equipment" />
                        <el-option label="检测项目报表" value="inspection" />
                        <el-option label="领用记录报表" value="usage" />
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleFilterChange">查询</el-button>
                    <el-button @click="resetFilter">重置</el-button>
                    <el-button type="success" @click="exportReport">导出报表</el-button>
                </el-form-item>
            </el-form>
        </el-card>
		
        <!-- ç»Ÿè®¡å¡ç‰‡ -->
        <div class="statistics-cards">
            <el-row :gutter="20">
                <el-col :span="6">
                    <el-card class="stat-card" shadow="hover">
                        <div class="stat-content">
                            <div class="stat-icon">
                                <el-icon><Box /></el-icon>
                            </div>
                            <div class="stat-info">
                                <div class="stat-number">{{ statistics.totalSamples }}</div>
                                <div class="stat-label">总样品数</div>
                            </div>
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="6">
                    <el-card class="stat-card" shadow="hover">
                        <div class="stat-content">
                            <div class="stat-icon">
                                <el-icon><Tools /></el-icon>
                            </div>
                            <div class="stat-info">
                                <div class="stat-number">{{ statistics.activeEquipment }}</div>
                                <div class="stat-label">在用设备</div>
                            </div>
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="6">
                    <el-card class="stat-card" shadow="hover">
                        <div class="stat-content">
                            <div class="stat-icon">
                                <el-icon><Document /></el-icon>
                            </div>
                            <div class="stat-info">
                                <div class="stat-number">{{ statistics.completedInspections }}</div>
                                <div class="stat-label">已完成检测</div>
                            </div>
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="6">
                    <el-card class="stat-card" shadow="hover">
                        <div class="stat-content">
                            <div class="stat-icon">
                                <el-icon><ShoppingCart /></el-icon>
                            </div>
                            <div class="stat-info">
                                <div class="stat-number">{{ statistics.totalUsage }}</div>
                                <div class="stat-label">总领用次数</div>
                            </div>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </div>
		
        <!-- å›¾è¡¨åŒºåŸŸ -->
        <div class="charts-container">
            <el-row :gutter="20">
                <!-- æ ·å“è¿›åº¦å›¾è¡¨ -->
                <el-col :span="12">
                    <el-card class="chart-card" shadow="hover">
                        <template #header>
                            <div class="card-header">
                                <span>样品进度统计</span>
                                <el-button link @click="refreshSampleChart">刷新</el-button>
                            </div>
                        </template>
                        <div ref="sampleChartRef" class="chart-container"></div>
                    </el-card>
                </el-col>
				
                <!-- è®¾å¤‡ä½¿ç”¨å›¾è¡¨ -->
                <el-col :span="12">
                    <el-card class="chart-card" shadow="hover">
                        <template #header>
                            <div class="card-header">
                                <span>设备使用率统计</span>
                                <el-button link @click="refreshEquipmentChart">刷新</el-button>
                            </div>
                        </template>
                        <div ref="equipmentChartRef" class="chart-container"></div>
                    </el-card>
                </el-col>
            </el-row>
			
            <el-row :gutter="20" style="margin-top: 20px;">
                <!-- æ£€æµ‹é¡¹ç›®ç»Ÿè®¡ -->
                <el-col :span="12">
                    <el-card class="chart-card" shadow="hover">
                        <template #header>
                            <div class="card-header">
                                <span>检测项目分布</span>
                                <el-button link @click="refreshInspectionChart">刷新</el-button>
                            </div>
                        </template>
                        <div ref="inspectionChartRef" class="chart-container"></div>
                    </el-card>
                </el-col>
				
                <!-- é¢†ç”¨è®°å½•è¶‹åŠ¿ -->
                <el-col :span="12">
                    <el-card class="chart-card" shadow="hover">
                        <template #header>
                            <div class="card-header">
                                <span>领用记录趋势</span>
                                <el-button link @click="refreshUsageChart">刷新</el-button>
                            </div>
                        </template>
                        <div ref="usageChartRef" class="chart-container"></div>
                    </el-card>
                </el-col>
            </el-row>
        </div>
		
        <!-- è¯¦ç»†æ•°æ®è¡¨æ ¼ -->
        <el-card class="table-card" shadow="hover">
            <template #header>
                <div class="card-header">
                    <span>详细数据</span>
                    <div>
                        <el-button type="primary" size="small" @click="refreshTable">刷新</el-button>
                        <el-button type="success" size="small" @click="exportTable">导出</el-button>
                    </div>
                </div>
            </template>
			
            <el-table
                :data="tableData"
                style="width: 100%"
                v-loading="tableLoading"
                stripe
                border
            >
                <el-table-column prop="id" label="编号" width="80" />
                <el-table-column prop="name" label="名称" />
                <el-table-column prop="type" label="类型" width="120" />
                <el-table-column prop="status" label="状态" width="100">
                    <template #default="scope">
                        <el-tag :type="getStatusType(scope.row.status)">
                            {{ scope.row.status }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="progress" label="进度" width="120">
                    <template #default="scope">
                        <el-progress :percentage="scope.row.progress" :status="getProgressStatus(scope.row.progress)" />
                    </template>
                </el-table-column>
                <el-table-column prop="createTime" label="创建时间" width="180" />
                <el-table-column prop="updateTime" label="更新时间" width="180" />
                <el-table-column label="操作" width="150" fixed="right">
                    <template #default="scope">
                        <el-button link size="small" @click="viewDetail(scope.row)">查看</el-button>
                        <el-button link size="small" @click="editItem(scope.row)">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
			
            <div class="pagination-container">
                <el-pagination
                    v-model:current-page="pagination.currentPage"
                    v-model:page-size="pagination.pageSize"
                    :page-sizes="[10, 20, 50, 100]"
                    :total="pagination.total"
                    layout="total, sizes, prev, pager, next, jumper"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                />
            </div>
        </el-card>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted, nextTick } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import * as echarts from 'echarts'
import { Box, Tools, Document, ShoppingCart } from '@element-plus/icons-vue'

// å“åº”式数据
const filterForm = reactive({
    dateRange: [],
    reportType: 'sample'
})

const statistics = reactive({
    totalSamples: 1250,
    activeEquipment: 45,
    completedInspections: 890,
    totalUsage: 2340
})

const tableData = ref([])
const tableLoading = ref(false)
const pagination = reactive({
    currentPage: 1,
    pageSize: 20,
    total: 0
})

// å›¾è¡¨å¼•ç”¨
const sampleChartRef = ref(null)
const equipmentChartRef = ref(null)
const inspectionChartRef = ref(null)
const usageChartRef = ref(null)

// å›¾è¡¨å®žä¾‹
let sampleChart = null
let equipmentChart = null
let inspectionChart = null
let usageChart = null

// åˆå§‹åŒ–数据
const initData = () => {
    // æ¨¡æ‹Ÿè¡¨æ ¼æ•°æ®
    tableData.value = [
        {
            id: 'SP001',
            name: '样品A-001',
            type: '金属材料',
            status: '检测中',
            progress: 75,
            createTime: '2025-01-15 09:30:00',
            updateTime: '2025-01-20 14:20:00'
        },
        {
            id: 'SP002',
            name: '样品B-002',
            type: '塑料制品',
            status: '已完成',
            progress: 100,
            createTime: '2025-01-10 10:15:00',
            updateTime: '2025-01-18 16:45:00'
        },
        {
            id: 'SP003',
            name: '样品C-003',
            type: '电子元件',
            status: '待检测',
            progress: 0,
            createTime: '2025-01-22 08:45:00',
            updateTime: '2025-01-22 08:45:00'
        },
        {
            id: 'EQ001',
            name: '检测设备A',
            type: '光谱仪',
            status: '使用中',
            progress: 60,
            createTime: '2025-01-05 14:20:00',
            updateTime: '2025-01-20 11:30:00'
        },
        {
            id: 'EQ002',
            name: '检测设备B',
            type: '显微镜',
            status: '空闲',
            progress: 0,
            createTime: '2025-01-08 16:10:00',
            updateTime: '2025-01-19 09:15:00'
        }
    ]
	
    pagination.total = tableData.value.length
}

// åˆå§‹åŒ–样品进度图表
const initSampleChart = () => {
    if (sampleChartRef.value) {
        sampleChart = echarts.init(sampleChartRef.value)
        const option = {
            title: {
                show: false
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c} ({d}%)'
            },
            legend: {
                orient: 'vertical',
                left: 'left'
            },
            series: [
                {
                    name: '样品状态',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '18',
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        { value: 450, name: '已完成' },
                        { value: 320, name: '检测中' },
                        { value: 280, name: '待检测' },
                        { value: 200, name: '已暂停' }
                    ]
                }
            ]
        }
        sampleChart.setOption(option)
    }
}

// åˆå§‹åŒ–设备使用图表
const initEquipmentChart = () => {
    if (equipmentChartRef.value) {
        equipmentChart = echarts.init(equipmentChartRef.value)
        const option = {
            title: {
                show: false
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            xAxis: {
                type: 'category',
                data: ['光谱仪', '显微镜', '硬度计', '拉力机', '冲击机', '金相仪']
            },
            yAxis: {
                type: 'value',
                name: '使用率(%)'
            },
            series: [
                {
                    name: '使用率',
                    type: 'bar',
                    data: [85, 60, 75, 90, 45, 70],
                    itemStyle: {
                        color: function(params) {
                            const colors = ['#409EFF', '#67C23A', '#E6A23C', '#F56C6C', '#909399', '#9C27B0']
                            return colors[params.dataIndex]
                        }
                    }
                }
            ]
        }
        equipmentChart.setOption(option)
    }
}

// åˆå§‹åŒ–检测项目图表
const initInspectionChart = () => {
    if (inspectionChartRef.value) {
        inspectionChart = echarts.init(inspectionChartRef.value)
        const option = {
            title: {
                show: false
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'left'
            },
            series: [
                {
                    name: '检测项目',
                    type: 'pie',
                    radius: '50%',
                    data: [
                        { value: 335, name: '物理性能' },
                        { value: 310, name: '化学分析' },
                        { value: 234, name: '尺寸测量' },
                        { value: 135, name: '外观检查' },
                        { value: 148, name: '其他检测' }
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        }
        inspectionChart.setOption(option)
    }
}

// åˆå§‹åŒ–领用记录图表
const initUsageChart = () => {
    if (usageChartRef.value) {
        usageChart = echarts.init(usageChartRef.value)
        const option = {
            title: {
                show: false
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['领用次数', '归还次数']
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: '领用次数',
                    type: 'line',
                    stack: 'Total',
                    data: [120, 132, 101, 134, 90, 230, 210, 182, 191, 234, 290, 330]
                },
                {
                    name: '归还次数',
                    type: 'line',
                    stack: 'Total',
                    data: [110, 125, 95, 128, 85, 220, 200, 175, 185, 225, 280, 320]
                }
            ]
        }
        usageChart.setOption(option)
    }
}

// äº‹ä»¶å¤„理函数
const handleFilterChange = () => {
    ElMessage.success('筛选条件已更新')
    // è¿™é‡Œå¯ä»¥æ ¹æ®ç­›é€‰æ¡ä»¶é‡æ–°åŠ è½½æ•°æ®
}

const resetFilter = () => {
    filterForm.dateRange = []
    filterForm.reportType = 'sample'
    ElMessage.info('筛选条件已重置')
}

const exportReport = () => {
    ElMessage.success('报表导出功能开发中...')
}

const refreshSampleChart = () => {
    initSampleChart()
    ElMessage.success('样品进度图表已刷新')
}

const refreshEquipmentChart = () => {
    initEquipmentChart()
    ElMessage.success('设备使用图表已刷新')
}

const refreshInspectionChart = () => {
    initInspectionChart()
    ElMessage.success('检测项目图表已刷新')
}

const refreshUsageChart = () => {
    initUsageChart()
    ElMessage.success('领用记录图表已刷新')
}

const refreshTable = () => {
    tableLoading.value = true
    setTimeout(() => {
        tableLoading.value = false
        ElMessage.success('表格数据已刷新')
    }, 1000)
}

const exportTable = () => {
    ElMessage.success('表格导出功能开发中...')
}

const handleSizeChange = (val) => {
    pagination.pageSize = val
    // é‡æ–°åŠ è½½æ•°æ®
}

const handleCurrentChange = (val) => {
    pagination.currentPage = val
    // é‡æ–°åŠ è½½æ•°æ®
}

const getStatusType = (status) => {
    const statusMap = {
        '已完成': 'success',
        '检测中': 'warning',
        '待检测': 'info',
        '已暂停': 'danger',
        '使用中': 'primary',
        '空闲': 'info'
    }
    return statusMap[status] || 'info'
}

const getProgressStatus = (progress) => {
    if (progress === 100) return 'success'
    if (progress >= 80) return 'warning'
    if (progress >= 50) return ''
    return 'exception'
}

const viewDetail = (row) => {
    ElMessage.info(`查看详情: ${row.name}`)
}

const editItem = (row) => {
    ElMessage.info(`编辑项目: ${row.name}`)
}

// ç”Ÿå‘½å‘¨æœŸ
onMounted(() => {
    initData()
    nextTick(() => {
        initSampleChart()
        initEquipmentChart()
        initInspectionChart()
        initUsageChart()
    })
	
    // ç›‘听窗口大小变化，重新调整图表大小
    window.addEventListener('resize', () => {
        sampleChart?.resize()
        equipmentChart?.resize()
        inspectionChart?.resize()
        usageChart?.resize()
    })
})
</script>

<style scoped>
.report-management {
    padding: 20px;
    background-color: #f5f5f5;
    min-height: 100vh;
}

.page-header {
    margin-bottom: 20px;
    text-align: center;
}

.page-header h2 {
    color: #303133;
    margin-bottom: 8px;
    font-size: 24px;
    font-weight: 600;
}

.page-header p {
    color: #909399;
    font-size: 14px;
    margin: 0;
}

.filter-card {
    margin-bottom: 20px;
}

.statistics-cards {
    margin-bottom: 20px;
}

.stat-card {
    height: 120px;
}

.stat-content {
    display: flex;
    align-items: center;
    height: 100%;
}

.stat-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20px;
    font-size: 24px;
    color: white;
}

.stat-card:nth-child(1) .stat-icon {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.stat-card:nth-child(2) .stat-icon {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.stat-card:nth-child(3) .stat-icon {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.stat-card:nth-child(4) .stat-icon {
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.stat-info {
    flex: 1;
}

.stat-number {
    font-size: 28px;
    font-weight: bold;
    color: #303133;
    margin-bottom: 8px;
}

.stat-label {
    font-size: 14px;
    color: #909399;
}

.charts-container {
    margin-bottom: 20px;
}

.chart-card {
    margin-bottom: 20px;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.chart-container {
    height: 300px;
    width: 100%;
}

.table-card {
    margin-bottom: 20px;
}

.pagination-container {
    margin-top: 20px;
    text-align: right;
}

:deep(.el-card__header) {
    padding: 15px 20px;
    border-bottom: 1px solid #ebeef5;
    background-color: #fafafa;
}

:deep(.el-card__body) {
    padding: 20px;
}

:deep(.el-table) {
    margin-bottom: 20px;
}

:deep(.el-progress) {
    margin: 0;
}

:deep(.el-tag) {
    margin: 0;
}
</style>

 src/views/salesManagement/customerManagement/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,423 @@
<template>
  <div class="app-container">
    <el-card class="box-card">
      <!-- æœç´¢åŒºåŸŸ -->
      <el-row :gutter="20" class="search-row">
        <el-col :span="6">
          <el-input
            v-model="searchForm.name"
            placeholder="请输入客户名称"
            clearable
            @keyup.enter="handleSearch"
          >
            <template #prefix>
              <el-icon><Search /></el-icon>
            </template>
          </el-input>
        </el-col>
        <el-col :span="6">
          <el-select v-model="searchForm.region" placeholder="请选择区域" clearable>
            <el-option label="华东区" value="华东区"></el-option>
            <el-option label="华南区" value="华南区"></el-option>
            <el-option label="华北区" value="华北区"></el-option>
            <el-option label="西南区" value="西南区"></el-option>
          </el-select>
        </el-col>
        <el-col :span="6">
          <el-select v-model="searchForm.level" placeholder="请选择客户等级" clearable>
            <el-option label="VIP客户" value="VIP客户"></el-option>
            <el-option label="重要客户" value="重要客户"></el-option>
            <el-option label="普通客户" value="普通客户"></el-option>
          </el-select>
        </el-col>
        <el-col :span="6">
          <el-button type="primary" @click="handleSearch">搜索</el-button>
          <el-button @click="resetSearch">重置</el-button>
          <el-button style="float: right;" type="primary" @click="handleAdd">
            æ–°å¢žå®¢æˆ·
          </el-button>
        </el-col>
      </el-row>

      <!-- å®¢æˆ·åˆ—表 -->
      <el-table
        :data="filteredList"
        style="width: 100%"
        v-loading="loading"
        border
        stripe
        height="calc(100vh - 22em)"
      >
        <el-table-column prop="id" label="ID" width="80" align="center"/>
        <el-table-column prop="name" label="客户名称" width="150" />
        <el-table-column prop="contactPerson" label="联系人" width="100" />
        <el-table-column prop="phone" label="联系电话" width="140" />
        <el-table-column prop="email" label="邮箱" />
        <el-table-column prop="region" label="区域" width="100" />
        <el-table-column prop="level" label="客户等级" width="100">
          <template #default="scope">
            <el-tag :type="getLevelType(scope.row.level)">
              {{ scope.row.level }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="salesperson" label="负责业务员" width="120" />
        <el-table-column prop="status" label="状态" width="80">
          <template #default="scope">
            <el-tag :type="getStatusType(scope.row.status)">
              {{ scope.row.status }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200" fixed="right" align="center">
          <template #default="scope">
            <el-button link type="primary" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button link type="primary" @click="handleAllocation(scope.row)">分配</el-button>
            <el-button link type="danger" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- åˆ†é¡µ -->
      <pagination
        :total="pagination.total"
        layout="total, sizes, prev, pager, next, jumper"
        :page="pagination.currentPage"
        :limit="pagination.pageSize"
        @pagination="handleCurrentChange"
      />
    </el-card>

    <!-- æ–°å¢ž/编辑对话框 -->
    <el-dialog v-model="dialogVisible" :title="dialogTitle" width="600px">
      <el-form :model="form" :rules="rules" ref="formRef" label-width="100px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="客户名称" prop="name">
              <el-input v-model="form.name" placeholder="请输入客户名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系人" prop="contactPerson">
              <el-input v-model="form.contactPerson" placeholder="请输入联系人"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="联系电话" prop="phone">
              <el-input v-model="form.phone" placeholder="请输入联系电话"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="form.email" placeholder="请输入邮箱"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="区域" prop="region">
              <el-select v-model="form.region" placeholder="请选择区域" style="width: 100%">
                <el-option label="华东区" value="华东区"></el-option>
                <el-option label="华南区" value="华南区"></el-option>
                <el-option label="华北区" value="华北区"></el-option>
                <el-option label="西南区" value="西南区"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="客户等级" prop="level">
              <el-select v-model="form.level" placeholder="请选择客户等级" style="width: 100%">
                <el-option label="VIP客户" value="VIP客户"></el-option>
                <el-option label="重要客户" value="重要客户"></el-option>
                <el-option label="普通客户" value="普通客户"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="负责业务员" prop="salesperson">
              <el-select v-model="form.salesperson" placeholder="请选择业务员" style="width: 100%">
                <el-option label="陈志强" value="陈志强"></el-option>
                <el-option label="刘雅婷" value="刘雅婷"></el-option>
                <el-option label="王建国" value="王建国"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="状态" prop="status">
              <el-select v-model="form.status" placeholder="请选择状态" style="width: 100%">
                <el-option label="活跃" value="活跃"></el-option>
                <el-option label="潜在" value="潜在"></el-option>
                <el-option label="流失" value="流失"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取 æ¶ˆ</el-button>
          <el-button type="primary" @click="handleSubmit">ç¡® å®š</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- å®¢æˆ·åˆ†é…å¯¹è¯æ¡† -->
    <el-dialog v-model="allocationDialogVisible" title="客户分配" width="500px">
      <el-form label-width="100px">
        <el-form-item label="客户名称">
          <span>{{ currentCustomer.name }}</span>
        </el-form-item>
        <el-form-item label="当前业务员">
          <span>{{ currentCustomer.salesperson }}</span>
        </el-form-item>
        <el-form-item label="重新分配">
          <el-select v-model="newSalesperson" placeholder="请选择新业务员" style="width: 100%">
            <el-option label="陈志强" value="陈志强"></el-option>
            <el-option label="刘雅婷" value="刘雅婷"></el-option>
            <el-option label="王建国" value="王建国"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="分配原因">
          <el-input v-model="allocationReason" type="textarea" rows="3" placeholder="请输入分配原因"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="allocationDialogVisible = false">取 æ¶ˆ</el-button>
          <el-button type="primary" @click="saveAllocation">ç¡® å®š</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus, Search } from '@element-plus/icons-vue'
import Pagination from '@/components/PIMTable/Pagination.vue'

// å“åº”式数据
const loading = ref(false)
const searchForm = reactive({
  name: '',
  region: '',
  level: ''
})

const customerList = ref([
  {
    id: 1,
    name: '上海科技有限公司',
    contactPerson: '陈志强',
    phone: '021-12345678',
    email: 'zhang@shanghai-tech.com',
    region: '华东区',
    level: 'VIP客户',
    salesperson: '陈志强',
    status: '活跃'
  },
  {
    id: 2,
    name: '深圳电子有限公司',
    contactPerson: '刘雅婷',
    phone: '0755-87654321',
    email: 'li@shenzhen-elec.com',
    region: '华南区',
    level: '重要客户',
    salesperson: '刘雅婷',
    status: '活跃'
  },
  {
    id: 3,
    name: '北京贸易公司',
    contactPerson: '王建国',
    phone: '010-11223344',
    email: 'wang@beijing-trade.com',
    region: '华北区',
    level: '普通客户',
    salesperson: '王建国',
    status: '潜在'
  }
])

const pagination = reactive({
  total: 3,
  currentPage: 1,
  pageSize: 10
})

const dialogVisible = ref(false)
const dialogTitle = ref('新增客户')
const form = reactive({
  name: '',
  contactPerson: '',
  phone: '',
  email: '',
  region: '',
  level: '',
  salesperson: '',
  status: '活跃'
})

const rules = {
  name: [{ required: true, message: '请输入客户名称', trigger: 'blur' }],
  contactPerson: [{ required: true, message: '请输入联系人', trigger: 'blur' }],
  phone: [{ required: true, message: '请输入联系电话', trigger: 'blur' }],
  email: [{ required: true, message: '请输入邮箱', trigger: 'blur' }],
  region: [{ required: true, message: '请选择区域', trigger: 'change' }],
  level: [{ required: true, message: '请选择客户等级', trigger: 'change' }],
  salesperson: [{ required: true, message: '请选择业务员', trigger: 'change' }],
  status: [{ required: true, message: '请选择状态', trigger: 'change' }]
}

const isEdit = ref(false)
const editId = ref(null)
const allocationDialogVisible = ref(false)
const currentCustomer = ref({})
const newSalesperson = ref('')
const allocationReason = ref('')
const formRef = ref()

// è®¡ç®—属性
const filteredList = computed(() => {
  let list = customerList.value
  if (searchForm.name) {
    list = list.filter(item => item.name.includes(searchForm.name))
  }
  if (searchForm.region) {
    list = list.filter(item => item.region === searchForm.region)
  }
  if (searchForm.level) {
    list = list.filter(item => item.level === searchForm.level)
  }
  return list
})

// æ–¹æ³•
const getLevelType = (level) => {
  const levelMap = {
    'VIP客户': 'danger',
    '重要客户': 'warning',
    '普通客户': 'info'
  }
  return levelMap[level] || 'info'
}

const getStatusType = (status) => {
  const statusMap = {
    '活跃': 'success',
    '潜在': 'warning',
    '流失': 'danger'
  }
  return statusMap[status] || 'info'
}

const handleSearch = () => {
  // æœç´¢é€»è¾‘已在computed中处理
}

const resetSearch = () => {
  searchForm.name = ''
  searchForm.region = ''
  searchForm.level = ''
}

const handleAdd = () => {
  dialogTitle.value = '新增客户'
  isEdit.value = false
  form.name = ''
  form.contactPerson = ''
  form.phone = ''
  form.email = ''
  form.region = ''
  form.level = ''
  form.salesperson = ''
  form.status = '活跃'
  dialogVisible.value = true
}

const handleEdit = (row) => {
  dialogTitle.value = '编辑客户'
  isEdit.value = true
  editId.value = row.id
  Object.assign(form, row)
  dialogVisible.value = true
}

const handleDelete = (row) => {
  ElMessageBox.confirm('确认删除该客户吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    const index = customerList.value.findIndex(item => item.id === row.id)
    if (index > -1) {
      customerList.value.splice(index, 1)
      pagination.total--
      ElMessage.success('删除成功')
    }
  })
}

const handleAllocation = (row) => {
  currentCustomer.value = row
  newSalesperson.value = ''
  allocationReason.value = ''
  allocationDialogVisible.value = true
}

const saveAllocation = () => {
  if (!newSalesperson.value) {
    ElMessage.warning('请选择新业务员')
    return
  }
  
  const index = customerList.value.findIndex(item => item.id === currentCustomer.value.id)
  if (index > -1) {
    customerList.value[index].salesperson = newSalesperson.value
    ElMessage.success('客户分配成功')
    allocationDialogVisible.value = false
  }
}

const handleSubmit = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      if (isEdit.value) {
        // ç¼–辑
        const index = customerList.value.findIndex(item => item.id === editId.value)
        if (index > -1) {
          customerList.value[index] = { ...form, id: editId.value }
          ElMessage.success('编辑成功')
        }
      } else {
        // æ–°å¢ž
        const newId = Math.max(...customerList.value.map(item => item.id)) + 1
        customerList.value.push({
          ...form,
          id: newId
        })
        pagination.total++
        ElMessage.success('新增成功')
      }
      dialogVisible.value = false
    }
  })
}

const handleCurrentChange = (val) => {
  pagination.currentPage = val.page
  pagination.pageSize = val.limit
}
</script>

<style scoped>
.search-row {
  margin-bottom: 20px;
}
</style>

 src/views/salesManagement/orderManagement/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,495 @@
<template>
  <div class="app-container">
    <el-card class="box-card">
      <!-- æœç´¢åŒºåŸŸ -->
      <el-row :gutter="20" class="search-row">
        <el-col :span="6">
          <el-input
            v-model="searchForm.orderNo"
            placeholder="请输入订单号"
            clearable
            @keyup.enter="handleSearch"
          >
            <template #prefix>
              <el-icon><Search /></el-icon>
            </template>
          </el-input>
        </el-col>
        <el-col :span="6">
          <el-select v-model="searchForm.customer" placeholder="请选择客户" clearable>
            <el-option label="上海科技有限公司" value="上海科技有限公司"></el-option>
            <el-option label="深圳电子有限公司" value="深圳电子有限公司"></el-option>
            <el-option label="北京贸易公司" value="北京贸易公司"></el-option>
          </el-select>
        </el-col>
        <el-col :span="6">
          <el-select v-model="searchForm.status" placeholder="请选择订单状态" clearable>
            <el-option label="待审核" value="待审核"></el-option>
            <el-option label="已审核" value="已审核"></el-option>
            <el-option label="已发货" value="已发货"></el-option>
            <el-option label="已完成" value="已完成"></el-option>
            <el-option label="已取消" value="已取消"></el-option>
          </el-select>
        </el-col>
        <el-col :span="6">
          <el-button type="primary" @click="handleSearch">搜索</el-button>
          <el-button @click="resetSearch">重置</el-button>
          <el-button style="float: right;" type="primary" @click="handleAdd">
            æ–°å¢žè®¢å•
          </el-button>
        </el-col>
      </el-row>

      <!-- è®¢å•åˆ—表 -->
      <el-table
        :data="filteredList"
        style="width: 100%"
        v-loading="loading"
        border
        stripe
        height="calc(100vh - 22em)"
      >
        <el-table-column prop="id" label="ID" width="80" align="center"/>
        <el-table-column prop="orderNo" label="订单号" width="150" />
        <el-table-column prop="customer" label="客户名称" />
        <el-table-column prop="salesperson" label="业务员" width="100" />
        <el-table-column prop="orderDate" label="下单日期" width="120" />
        <el-table-column prop="amount" label="订单金额" width="120">
          <template #default="scope">
            Â¥{{ scope.row.amount.toFixed(2) }}
          </template>
        </el-table-column>
        <el-table-column prop="paymentMethod" label="付款方式" width="120" />
        <el-table-column prop="status" label="订单状态" width="100">
          <template #default="scope">
            <el-tag :type="getStatusType(scope.row.status)">
              {{ scope.row.status }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="250" fixed="right" align="center">
          <template #default="scope">
            <el-button link type="primary" @click="handleView(scope.row)">查看</el-button>
            <el-button link type="primary" @click="handleEdit(scope.row)" v-if="scope.row.status === '待审核'">编辑</el-button>
            <el-button link type="primary" @click="handleReview(scope.row)" v-if="scope.row.status === '待审核'">审核</el-button>
            <el-button link type="primary" @click="handleTransfer(scope.row)" v-if="scope.row.status === '已审核'">转单</el-button>
            <el-button link type="danger" @click="handleCancel(scope.row)" v-if="scope.row.status === '待审核'">取消</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- åˆ†é¡µ -->
      <pagination
        :total="pagination.total"
        layout="total, sizes, prev, pager, next, jumper"
        :page="pagination.currentPage"
        :limit="pagination.pageSize"
        @pagination="handleCurrentChange"
      />
    </el-card>

    <!-- æ–°å¢ž/编辑对话框 -->
    <el-dialog v-model="dialogVisible" :title="dialogTitle" width="700px">
      <el-form :model="form" :rules="rules" ref="formRef" label-width="100px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="客户名称" prop="customer">
              <el-select v-model="form.customer" placeholder="请选择客户" style="width: 100%">
                <el-option label="上海科技有限公司" value="上海科技有限公司"></el-option>
                <el-option label="深圳电子有限公司" value="深圳电子有限公司"></el-option>
                <el-option label="北京贸易公司" value="北京贸易公司"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="业务员" prop="salesperson">
              <el-select v-model="form.salesperson" placeholder="请选择业务员" style="width: 100%">
                <el-option label="陈志强" value="陈志强"></el-option>
                <el-option label="刘雅婷" value="刘雅婷"></el-option>
                <el-option label="王建国" value="王建国"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="订单日期" prop="orderDate">
              <el-date-picker
                v-model="form.orderDate"
                type="date"
                placeholder="选择订单日期"
                style="width: 100%"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="订单金额" prop="amount">
              <el-input-number v-model="form.amount" :precision="2" :min="0" style="width: 100%"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="付款方式" prop="paymentMethod">
              <el-select v-model="form.paymentMethod" placeholder="请选择付款方式" style="width: 100%">
                <el-option label="全款到付" value="全款到付"></el-option>
                <el-option label="分期付款" value="分期付款"></el-option>
                <el-option label="月结" value="月结"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="订单状态" prop="status">
              <el-select v-model="form.status" placeholder="请选择状态" style="width: 100%">
                <el-option label="待审核" value="待审核"></el-option>
                <el-option label="已审核" value="已审核"></el-option>
                <el-option label="已发货" value="已发货"></el-option>
                <el-option label="已完成" value="已完成"></el-option>
                <el-option label="已取消" value="已取消"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="备注" prop="remark">
              <el-input type="textarea" v-model="form.remark" placeholder="请输入备注信息" rows="3"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取 æ¶ˆ</el-button>
          <el-button type="primary" @click="handleSubmit">ç¡® å®š</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- è®¢å•å®¡æ ¸å¯¹è¯æ¡† -->
    <el-dialog v-model="reviewDialogVisible" title="订单审核" width="500px">
      <el-form label-width="100px">
        <el-form-item label="订单号">
          <span>{{ currentOrder.orderNo }}</span>
        </el-form-item>
        <el-form-item label="客户名称">
          <span>{{ currentOrder.customer }}</span>
        </el-form-item>
        <el-form-item label="订单金额">
          <span>Â¥{{ currentOrder.amount.toFixed(2) }}</span>
        </el-form-item>
        <el-form-item label="审核结果" prop="reviewResult">
          <el-radio-group v-model="reviewResult">
            <el-radio label="通过">通过</el-radio>
            <el-radio label="拒绝">拒绝</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="审核意见" prop="reviewComment">
          <el-input type="textarea" v-model="reviewComment" rows="3" placeholder="请输入审核意见"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="reviewDialogVisible = false">取 æ¶ˆ</el-button>
          <el-button type="primary" @click="saveReview">ç¡® å®š</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- è®¢å•è½¬å•å¯¹è¯æ¡† -->
    <el-dialog v-model="transferDialogVisible" title="订单转单" width="500px">
      <el-form label-width="100px">
        <el-form-item label="订单号">
          <span>{{ currentOrder.orderNo }}</span>
        </el-form-item>
        <el-form-item label="当前业务员">
          <span>{{ currentOrder.salesperson }}</span>
        </el-form-item>
        <el-form-item label="转单给" prop="newSalesperson">
          <el-select v-model="newSalesperson" placeholder="请选择新业务员" style="width: 100%">
            <el-option label="陈志强" value="陈志强"></el-option>
            <el-option label="刘雅婷" value="刘雅婷"></el-option>
            <el-option label="王建国" value="王建国"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="转单原因" prop="transferReason">
          <el-input type="textarea" v-model="transferReason" rows="3" placeholder="请输入转单原因"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="transferDialogVisible = false">取 æ¶ˆ</el-button>
          <el-button type="primary" @click="saveTransfer">ç¡® å®š</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus, Search } from '@element-plus/icons-vue'
import Pagination from '@/components/PIMTable/Pagination.vue'

// å“åº”式数据
const loading = ref(false)
const searchForm = reactive({
  orderNo: '',
  customer: '',
  status: ''
})

const orderList = ref([
  {
    id: 1,
    orderNo: 'ORD202312001',
    customer: '上海科技有限公司',
    salesperson: '陈志强',
    orderDate: '2023-12-01',
    amount: 50000.00,
    paymentMethod: '全款到付',
    status: '待审核',
    remark: '重要客户订单'
  },
  {
    id: 2,
    orderNo: 'ORD202312002',
    customer: '深圳电子有限公司',
    salesperson: '刘雅婷',
    orderDate: '2023-12-02',
    amount: 35000.00,
    paymentMethod: '分期付款',
    status: '已审核',
    remark: '常规订单'
  },
  {
    id: 3,
    orderNo: 'ORD202312003',
    customer: '北京贸易公司',
    salesperson: '王建国',
    orderDate: '2023-12-03',
    amount: 28000.00,
    paymentMethod: '月结',
    status: '已发货',
    remark: '新客户订单'
  }
])

const pagination = reactive({
  total: 3,
  currentPage: 1,
  pageSize: 10
})

const dialogVisible = ref(false)
const dialogTitle = ref('新增订单')
const form = reactive({
  customer: '',
  salesperson: '',
  orderDate: '',
  amount: 0,
  paymentMethod: '',
  status: '待审核',
  remark: ''
})

const rules = {
  customer: [{ required: true, message: '请选择客户', trigger: 'change' }],
  salesperson: [{ required: true, message: '请选择业务员', trigger: 'change' }],
  orderDate: [{ required: true, message: '请选择订单日期', trigger: 'change' }],
  amount: [{ required: true, message: '请输入订单金额', trigger: 'blur' }],
  paymentMethod: [{ required: true, message: '请选择付款方式', trigger: 'change' }],
  status: [{ required: true, message: '请选择状态', trigger: 'change' }]
}

const isEdit = ref(false)
const editId = ref(null)
const reviewDialogVisible = ref(false)
const transferDialogVisible = ref(false)
const currentOrder = ref({})
const reviewResult = ref('')
const reviewComment = ref('')
const newSalesperson = ref('')
const transferReason = ref('')
const formRef = ref()

// è®¡ç®—属性
const filteredList = computed(() => {
  let list = orderList.value
  if (searchForm.orderNo) {
    list = list.filter(item => item.orderNo.includes(searchForm.orderNo))
  }
  if (searchForm.customer) {
    list = list.filter(item => item.customer === searchForm.customer)
  }
  if (searchForm.status) {
    list = list.filter(item => item.status === searchForm.status)
  }
  return list
})

// æ–¹æ³•
const getStatusType = (status) => {
  const statusMap = {
    '待审核': 'warning',
    '已审核': 'primary',
    '已发货': 'success',
    '已完成': 'success',
    '已取消': 'danger'
  }
  return statusMap[status] || 'info'
}

const handleSearch = () => {
  // æœç´¢é€»è¾‘已在computed中处理
}

const resetSearch = () => {
  searchForm.orderNo = ''
  searchForm.customer = ''
  searchForm.status = ''
}

const handleAdd = () => {
  dialogTitle.value = '新增订单'
  isEdit.value = false
  form.customer = ''
  form.salesperson = ''
  form.orderDate = ''
  form.amount = 0
  form.paymentMethod = ''
  form.status = '待审核'
  form.remark = ''
  dialogVisible.value = true
}

const handleView = (row) => {
  // æŸ¥çœ‹è®¢å•è¯¦æƒ…
  ElMessage.info('查看订单详情功能待实现')
}

const handleEdit = (row) => {
  dialogTitle.value = '编辑订单'
  isEdit.value = true
  editId.value = row.id
  Object.assign(form, row)
  dialogVisible.value = true
}

const handleReview = (row) => {
  currentOrder.value = row
  reviewResult.value = ''
  reviewComment.value = ''
  reviewDialogVisible.value = true
}

const handleTransfer = (row) => {
  currentOrder.value = row
  newSalesperson.value = ''
  transferReason.value = ''
  transferDialogVisible.value = true
}

const handleCancel = (row) => {
  ElMessageBox.confirm('确认取消该订单吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    const index = orderList.value.findIndex(item => item.id === row.id)
    if (index > -1) {
      orderList.value[index].status = '已取消'
      ElMessage.success('订单已取消')
    }
  })
}

const handleDelete = (row) => {
  ElMessageBox.confirm('确认删除该订单吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    const index = orderList.value.findIndex(item => item.id === row.id)
    if (index > -1) {
      orderList.value.splice(index, 1)
      pagination.total--
      ElMessage.success('删除成功')
    }
  })
}

const saveReview = () => {
  if (!reviewResult.value) {
    ElMessage.warning('请选择审核结果')
    return
  }
  
  const index = orderList.value.findIndex(item => item.id === currentOrder.value.id)
  if (index > -1) {
    if (reviewResult.value === '通过') {
      orderList.value[index].status = '已审核'
      ElMessage.success('订单审核通过')
    } else {
      orderList.value[index].status = '已取消'
      ElMessage.success('订单审核拒绝')
    }
    reviewDialogVisible.value = false
  }
}

const saveTransfer = () => {
  if (!newSalesperson.value) {
    ElMessage.warning('请选择新业务员')
    return
  }
  
  const index = orderList.value.findIndex(item => item.id === currentOrder.value.id)
  if (index > -1) {
    orderList.value[index].salesperson = newSalesperson.value
    ElMessage.success('订单转单成功')
    transferDialogVisible.value = false
  }
}

const handleSubmit = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      if (isEdit.value) {
        // ç¼–辑
        const index = orderList.value.findIndex(item => item.id === editId.value)
        if (index > -1) {
          orderList.value[index] = { ...form, id: editId.value }
          ElMessage.success('编辑成功')
        }
      } else {
        // æ–°å¢ž
        const newId = Math.max(...orderList.value.map(item => item.id)) + 1
        const orderNo = `ORD${new Date().getFullYear()}${String(new Date().getMonth() + 1).padStart(2, '0')}${String(new Date().getDate()).padStart(2, '0')}${String(newId).padStart(3, '0')}`
        orderList.value.push({
          ...form,
          id: newId,
          orderNo: orderNo
        })
        pagination.total++
        ElMessage.success('新增成功')
      }
      dialogVisible.value = false
    }
  })
}

const handleCurrentChange = (val) => {
  pagination.currentPage = val.page
  pagination.pageSize = val.limit
}
</script>

<style scoped>
.search-row {
  margin-bottom: 20px;
}
</style>

 src/views/salesManagement/paymentShipping/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,534 @@
<template>
  <div class="app-container">
    <el-card class="box-card">
      <!-- æœç´¢åŒºåŸŸ -->
      <el-row :gutter="20" class="search-row">
        <el-col :span="6">
          <el-input
            v-model="searchForm.orderNo"
            placeholder="请输入订单号"
            clearable
            @keyup.enter="handleSearch"
          >
            <template #prefix>
              <el-icon><Search /></el-icon>
            </template>
          </el-input>
        </el-col>
        <el-col :span="6">
          <el-select v-model="searchForm.paymentStatus" placeholder="请选择付款状态" clearable>
            <el-option label="未付款" value="未付款"></el-option>
            <el-option label="已付款" value="已付款"></el-option>
            <el-option label="部分付款" value="部分付款"></el-option>
          </el-select>
        </el-col>
        <el-col :span="6">
          <el-select v-model="searchForm.shippingStatus" placeholder="请选择发货状态" clearable>
            <el-option label="待发货" value="待发货"></el-option>
            <el-option label="已发货" value="已发货"></el-option>
            <el-option label="已签收" value="已签收"></el-option>
          </el-select>
        </el-col>
        <el-col :span="6">
          <el-button type="primary" @click="handleSearch">搜索</el-button>
          <el-button @click="resetSearch">重置</el-button>
          <el-button style="float: right;" type="primary" @click="handleAdd">
            æ–°å¢žè®°å½•
          </el-button>
        </el-col>
      </el-row>

      <!-- æ”¯ä»˜ä¸Žå‘货列表 -->
      <el-table
        :data="filteredList"
        style="width: 100%"
        v-loading="loading"
        border
        stripe
        height="calc(100vh - 22em)"
      >
        <el-table-column prop="id" label="ID" width="80" align="center"/>
        <el-table-column prop="orderNo" label="订单号" />
        <el-table-column prop="customer" label="客户名称" />
        <el-table-column prop="orderAmount" label="订单金额" width="120">
          <template #default="scope">
            Â¥{{ scope.row.orderAmount.toFixed(2) }}
          </template>
        </el-table-column>
        <el-table-column prop="paymentMethod" label="付款方式" width="120" />
        <el-table-column prop="paymentStatus" label="付款状态" width="100">
          <template #default="scope">
            <el-tag :type="getPaymentStatusType(scope.row.paymentStatus)">
              {{ scope.row.paymentStatus }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="shippingStatus" label="发货状态" width="100">
          <template #default="scope">
            <el-tag :type="getShippingStatusType(scope.row.shippingStatus)">
              {{ scope.row.shippingStatus }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="shippingDate" label="发货日期" width="120" />
        <el-table-column label="操作" width="250" fixed="right" align="center">
          <template #default="scope">
            <el-button link type="primary" @click="handleView(scope.row)">查看</el-button>
            <el-button link type="primary" @click="handlePayment(scope.row)" v-if="scope.row.paymentStatus !== '已付款'">付款</el-button>
            <el-button link type="primary" @click="handleShipping(scope.row)" v-if="scope.row.paymentStatus === '已付款' && scope.row.shippingStatus === '待发货'">发货</el-button>
            <el-button link type="primary" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button link type="danger" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- åˆ†é¡µ -->
      <pagination
        :total="pagination.total"
        layout="total, sizes, prev, pager, next, jumper"
        :page="pagination.currentPage"
        :limit="pagination.pageSize"
        @pagination="handleCurrentChange"
      />
    </el-card>

    <!-- æ–°å¢ž/编辑对话框 -->
    <el-dialog v-model="dialogVisible" :title="dialogTitle" width="700px">
      <el-form :model="form" :rules="rules" ref="formRef" label-width="100px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="订单号" prop="orderNo">
              <el-input v-model="form.orderNo" placeholder="请输入订单号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="客户名称" prop="customer">
              <el-select v-model="form.customer" placeholder="请选择客户" style="width: 100%">
                <el-option label="上海科技有限公司" value="上海科技有限公司"></el-option>
                <el-option label="深圳电子有限公司" value="深圳电子有限公司"></el-option>
                <el-option label="北京贸易公司" value="北京贸易公司"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="订单金额" prop="orderAmount">
              <el-input-number v-model="form.orderAmount" :precision="2" :min="0" style="width: 100%"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="付款方式" prop="paymentMethod">
              <el-select v-model="form.paymentMethod" placeholder="请选择付款方式" style="width: 100%">
                <el-option label="全款到付" value="全款到付"></el-option>
                <el-option label="分期付款" value="分期付款"></el-option>
                <el-option label="月结" value="月结"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="付款状态" prop="paymentStatus">
              <el-select v-model="form.paymentStatus" placeholder="请选择付款状态" style="width: 100%">
                <el-option label="未付款" value="未付款"></el-option>
                <el-option label="已付款" value="已付款"></el-option>
                <el-option label="部分付款" value="部分付款"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="发货状态" prop="shippingStatus">
              <el-select v-model="form.shippingStatus" placeholder="请选择发货状态" style="width: 100%">
                <el-option label="待发货" value="待发货"></el-option>
                <el-option label="已发货" value="已发货"></el-option>
                <el-option label="已签收" value="已签收"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="发货日期" prop="shippingDate">
              <el-date-picker
                v-model="form.shippingDate"
                type="date"
                placeholder="选择发货日期"
                style="width: 100%"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="物流单号" prop="trackingNo">
              <el-input v-model="form.trackingNo" placeholder="请输入物流单号"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="备注" prop="remark">
              <el-input type="textarea" v-model="form.remark" placeholder="请输入备注信息" rows="3"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取 æ¶ˆ</el-button>
          <el-button type="primary" @click="handleSubmit">ç¡® å®š</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- ä»˜æ¬¾å¯¹è¯æ¡† -->
    <el-dialog v-model="paymentDialogVisible" title="订单付款" width="500px">
      <el-form label-width="100px">
        <el-form-item label="订单号">
          <span>{{ currentRecord.orderNo }}</span>
        </el-form-item>
        <el-form-item label="客户名称">
          <span>{{ currentRecord.customer }}</span>
        </el-form-item>
        <el-form-item label="订单金额">
          <span>Â¥{{ currentRecord.orderAmount.toFixed(2) }}</span>
        </el-form-item>
        <el-form-item label="付款金额" prop="paymentAmount">
          <el-input-number v-model="paymentAmount" :precision="2" :min="0" :max="currentRecord.orderAmount" style="width: 100%"></el-input-number>
        </el-form-item>
        <el-form-item label="付款方式" prop="paymentMethod">
          <el-select v-model="paymentMethod" placeholder="请选择付款方式" style="width: 100%">
            <el-option label="现金" value="现金"></el-option>
            <el-option label="银行转账" value="银行转账"></el-option>
            <el-option label="支付宝" value="支付宝"></el-option>
            <el-option label="微信支付" value="微信支付"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="付款备注" prop="paymentRemark">
          <el-input type="textarea" v-model="paymentRemark" rows="3" placeholder="请输入付款备注"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="paymentDialogVisible = false">取 æ¶ˆ</el-button>
          <el-button type="primary" @click="savePayment">ç¡® å®š</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- å‘货对话框 -->
    <el-dialog v-model="shippingDialogVisible" title="订单发货" width="500px">
      <el-form label-width="100px">
        <el-form-item label="订单号">
          <span>{{ currentRecord.orderNo }}</span>
        </el-form-item>
        <el-form-item label="客户名称">
          <span>{{ currentRecord.customer }}</span>
        </el-form-item>
        <el-form-item label="发货日期" prop="shippingDate">
          <el-date-picker
            v-model="shippingDate"
            type="date"
            placeholder="选择发货日期"
            style="width: 100%"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
        <el-form-item label="物流公司" prop="logisticsCompany">
          <el-select v-model="logisticsCompany" placeholder="请选择物流公司" style="width: 100%">
            <el-option label="顺丰速运" value="顺丰速运"></el-option>
            <el-option label="圆通速递" value="圆通速递"></el-option>
            <el-option label="中通快递" value="中通快递"></el-option>
            <el-option label="申通快递" value="申通快递"></el-option>
            <el-option label="韵达速递" value="韵达速递"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="物流单号" prop="trackingNo">
          <el-input v-model="trackingNo" placeholder="请输入物流单号"></el-input>
        </el-form-item>
        <el-form-item label="发货备注" prop="shippingRemark">
          <el-input type="textarea" v-model="shippingRemark" rows="3" placeholder="请输入发货备注"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="shippingDialogVisible = false">取 æ¶ˆ</el-button>
          <el-button type="primary" @click="saveShipping">ç¡® å®š</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus, Search } from '@element-plus/icons-vue'
import Pagination from '@/components/PIMTable/Pagination.vue'

// å“åº”式数据
const loading = ref(false)
const searchForm = reactive({
  orderNo: '',
  paymentStatus: '',
  shippingStatus: ''
})

const recordList = ref([
  {
    id: 1,
    orderNo: 'ORD202312001',
    customer: '上海科技有限公司',
    orderAmount: 50000.00,
    paymentMethod: '全款到付',
    paymentStatus: '已付款',
    shippingStatus: '已发货',
    shippingDate: '2023-12-05',
    trackingNo: 'SF1234567890',
    remark: '重要客户订单'
  },
  {
    id: 2,
    orderNo: 'ORD202312002',
    customer: '深圳电子有限公司',
    orderAmount: 35000.00,
    paymentMethod: '分期付款',
    paymentStatus: '部分付款',
    shippingStatus: '待发货',
    shippingDate: '',
    trackingNo: '',
    remark: '常规订单'
  },
  {
    id: 3,
    orderNo: 'ORD202312003',
    customer: '北京贸易公司',
    orderAmount: 28000.00,
    paymentMethod: '月结',
    paymentStatus: '未付款',
    shippingStatus: '待发货',
    shippingDate: '',
    trackingNo: '',
    remark: '新客户订单'
  }
])

const pagination = reactive({
  total: 3,
  currentPage: 1,
  pageSize: 10
})

const dialogVisible = ref(false)
const dialogTitle = ref('新增记录')
const form = reactive({
  orderNo: '',
  customer: '',
  orderAmount: 0,
  paymentMethod: '',
  paymentStatus: '未付款',
  shippingStatus: '待发货',
  shippingDate: '',
  trackingNo: '',
  remark: ''
})

const rules = {
  orderNo: [{ required: true, message: '请输入订单号', trigger: 'blur' }],
  customer: [{ required: true, message: '请选择客户', trigger: 'change' }],
  orderAmount: [{ required: true, message: '请输入订单金额', trigger: 'blur' }],
  paymentMethod: [{ required: true, message: '请选择付款方式', trigger: 'change' }],
  paymentStatus: [{ required: true, message: '请选择付款状态', trigger: 'change' }],
  shippingStatus: [{ required: true, message: '请选择发货状态', trigger: 'change' }]
}

const isEdit = ref(false)
const editId = ref(null)
const paymentDialogVisible = ref(false)
const shippingDialogVisible = ref(false)
const currentRecord = ref({})
const paymentAmount = ref(0)
const paymentMethod = ref('')
const paymentRemark = ref('')
const shippingDate = ref('')
const logisticsCompany = ref('')
const trackingNo = ref('')
const shippingRemark = ref('')
const formRef = ref()

// è®¡ç®—属性
const filteredList = computed(() => {
  let list = recordList.value
  if (searchForm.orderNo) {
    list = list.filter(item => item.orderNo.includes(searchForm.orderNo))
  }
  if (searchForm.paymentStatus) {
    list = list.filter(item => item.paymentStatus === searchForm.paymentStatus)
  }
  if (searchForm.shippingStatus) {
    list = list.filter(item => item.shippingStatus === searchForm.shippingStatus)
  }
  return list
})

// æ–¹æ³•
const getPaymentStatusType = (status) => {
  const statusMap = {
    '未付款': 'danger',
    '已付款': 'success',
    '部分付款': 'warning'
  }
  return statusMap[status] || 'info'
}

const getShippingStatusType = (status) => {
  const statusMap = {
    '待发货': 'warning',
    '已发货': 'primary',
    '已签收': 'success'
  }
  return statusMap[status] || 'info'
}

const handleSearch = () => {
  // æœç´¢é€»è¾‘已在computed中处理
}

const resetSearch = () => {
  searchForm.orderNo = ''
  searchForm.paymentStatus = ''
  searchForm.shippingStatus = ''
}

const handleAdd = () => {
  dialogTitle.value = '新增记录'
  isEdit.value = false
  form.orderNo = ''
  form.customer = ''
  form.orderAmount = 0
  form.paymentMethod = ''
  form.paymentStatus = '未付款'
  form.shippingStatus = '待发货'
  form.shippingDate = ''
  form.trackingNo = ''
  form.remark = ''
  dialogVisible.value = true
}

const handleView = (row) => {
  // æŸ¥çœ‹è®°å½•è¯¦æƒ…
  ElMessage.info('查看记录详情功能待实现')
}

const handleEdit = (row) => {
  dialogTitle.value = '编辑记录'
  isEdit.value = true
  editId.value = row.id
  Object.assign(form, row)
  dialogVisible.value = true
}

const handlePayment = (row) => {
  currentRecord.value = row
  paymentAmount.value = row.orderAmount
  paymentMethod.value = ''
  paymentRemark.value = ''
  paymentDialogVisible.value = true
}

const handleShipping = (row) => {
  currentRecord.value = row
  shippingDate.value = ''
  logisticsCompany.value = ''
  trackingNo.value = ''
  shippingRemark.value = ''
  shippingDialogVisible.value = true
}

const handleDelete = (row) => {
  ElMessageBox.confirm('确认删除该记录吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    const index = recordList.value.findIndex(item => item.id === row.id)
    if (index > -1) {
      recordList.value.splice(index, 1)
      pagination.total--
      ElMessage.success('删除成功')
    }
  })
}

const savePayment = () => {
  if (!paymentMethod.value) {
    ElMessage.warning('请选择付款方式')
    return
  }
  
  const index = recordList.value.findIndex(item => item.id === currentRecord.value.id)
  if (index > -1) {
    if (paymentAmount.value >= currentRecord.value.orderAmount) {
      recordList.value[index].paymentStatus = '已付款'
    } else if (paymentAmount.value > 0) {
      recordList.value[index].paymentStatus = '部分付款'
    }
    ElMessage.success('付款记录已保存')
    paymentDialogVisible.value = false
  }
}

const saveShipping = () => {
  if (!shippingDate.value || !logisticsCompany.value || !trackingNo.value) {
    ElMessage.warning('请填写完整的发货信息')
    return
  }
  
  const index = recordList.value.findIndex(item => item.id === currentRecord.value.id)
  if (index > -1) {
    recordList.value[index].shippingStatus = '已发货'
    recordList.value[index].shippingDate = shippingDate.value
    recordList.value[index].trackingNo = trackingNo.value
    ElMessage.success('发货信息已保存')
    shippingDialogVisible.value = false
  }
}

const handleSubmit = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      if (isEdit.value) {
        // ç¼–辑
        const index = recordList.value.findIndex(item => item.id === editId.value)
        if (index > -1) {
          recordList.value[index] = { ...form, id: editId.value }
          ElMessage.success('编辑成功')
        }
      } else {
        // æ–°å¢ž
        const newId = Math.max(...recordList.value.map(item => item.id)) + 1
        recordList.value.push({
          ...form,
          id: newId
        })
        pagination.total++
        ElMessage.success('新增成功')
      }
      dialogVisible.value = false
    }
  })
}

const handleCurrentChange = (val) => {
  pagination.currentPage = val.page
  pagination.pageSize = val.limit
}
</script>

<style scoped>
.search-row {
  margin-bottom: 20px;
}
</style>

 src/views/salesManagement/salespersonManagement/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,392 @@
<template>
  <div class="app-container">
    <el-card class="box-card">
      <!-- æœç´¢åŒºåŸŸ -->
      <el-row :gutter="20" class="search-row">
        <el-col :span="6">
          <el-input
            v-model="searchForm.name"
            placeholder="请输入业务员姓名"
            clearable
            @keyup.enter="handleSearch"
          >
            <template #prefix>
              <el-icon><Search /></el-icon>
            </template>
          </el-input>
        </el-col>
        <el-col :span="6">
          <el-select v-model="searchForm.department" placeholder="请选择部门" clearable>
            <el-option label="销售部" value="销售部"></el-option>
            <el-option label="市场部" value="市场部"></el-option>
            <el-option label="客服部" value="客服部"></el-option>
          </el-select>
        </el-col>
        <el-col :span="6">
          <el-select v-model="searchForm.status" placeholder="请选择状态" clearable>
            <el-option label="在职" value="在职"></el-option>
            <el-option label="离职" value="离职"></el-option>
            <el-option label="试用期" value="试用期"></el-option>
          </el-select>
        </el-col>
        <el-col :span="6">
          <el-button type="primary" @click="handleSearch">搜索</el-button>
          <el-button @click="resetSearch">重置</el-button>
          <el-button type="primary" style="float: right;" @click="handleAdd">新增业务员</el-button>
        </el-col>
      </el-row>

      <!-- ä¸šåŠ¡å‘˜åˆ—表 -->
      <el-table
        :data="filteredList"
        style="width: 100%"
        v-loading="loading"
        border
        stripe
        height="calc(100vh - 22em)"
      >
        <el-table-column prop="id" label="ID" width="80" align="center"/>
        <el-table-column prop="name" label="姓名" width="120" />
        <el-table-column prop="phone" label="联系电话" width="140" />
        <el-table-column prop="email" label="邮箱" width="200" />
        <el-table-column prop="department" label="部门" width="100" />
        <el-table-column prop="position" label="职位" width="100" />
        <el-table-column prop="hireDate" label="入职日期" width="120" />
        <el-table-column prop="status" label="状态" width="80">
          <template #default="scope">
            <el-tag :type="getStatusType(scope.row.status)">
              {{ scope.row.status }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="permissions" label="权限">
          <template #default="scope">
            <el-tag v-for="perm in scope.row.permissions" :key="perm" size="small" style="margin-right: 5px;">
              {{ perm }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200" fixed="right" align="center">
          <template #default="scope">
            <el-button link type="primary" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button link type="primary" @click="handlePermissions(scope.row)">权限</el-button>
            <el-button link type="danger" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- åˆ†é¡µ -->
      <pagination
        :total="pagination.total"
        layout="total, sizes, prev, pager, next, jumper"
        :page="pagination.currentPage"
        :limit="pagination.pageSize"
        @pagination="handleCurrentChange"
      />
    </el-card>

    <!-- æ–°å¢ž/编辑对话框 -->
    <el-dialog v-model="dialogVisible" :title="dialogTitle" width="600px">
      <el-form :model="form" :rules="rules" ref="formRef" label-width="100px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="姓名" prop="name">
              <el-input v-model="form.name" placeholder="请输入姓名"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系电话" prop="phone">
              <el-input v-model="form.phone" placeholder="请输入联系电话"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="form.email" placeholder="请输入邮箱"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="部门" prop="department">
              <el-select v-model="form.department" placeholder="请选择部门" style="width: 100%">
                <el-option label="销售部" value="销售部"></el-option>
                <el-option label="市场部" value="市场部"></el-option>
                <el-option label="客服部" value="客服部"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="职位" prop="position">
              <el-input v-model="form.position" placeholder="请输入职位"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="入职日期" prop="hireDate">
              <el-date-picker
                v-model="form.hireDate"
                type="date"
                placeholder="选择入职日期"
                style="width: 100%"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="状态" prop="status">
              <el-select v-model="form.status" placeholder="请选择状态" style="width: 100%">
                <el-option label="在职" value="在职"></el-option>
                <el-option label="离职" value="离职"></el-option>
                <el-option label="试用期" value="试用期"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取 æ¶ˆ</el-button>
          <el-button type="primary" @click="handleSubmit">ç¡® å®š</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- æƒé™è®¾ç½®å¯¹è¯æ¡† -->
    <el-dialog v-model="permissionDialogVisible" title="权限设置" width="500px">
      <el-form label-width="100px">
        <el-form-item label="业务员姓名">
          <span>{{ currentSalesperson.name }}</span>
        </el-form-item>
        <el-form-item label="权限设置">
          <el-checkbox-group v-model="currentPermissions">
            <el-checkbox label="订单管理">订单管理</el-checkbox>
            <el-checkbox label="客户管理">客户管理</el-checkbox>
            <el-checkbox label="财务管理">财务管理</el-checkbox>
            <el-checkbox label="发货管理">发货管理</el-checkbox>
            <el-checkbox label="报表查看">报表查看</el-checkbox>
            <el-checkbox label="系统设置">系统设置</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="permissionDialogVisible = false">取 æ¶ˆ</el-button>
          <el-button type="primary" @click="savePermissions">ç¡® å®š</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, computed, nextTick } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus, Search } from '@element-plus/icons-vue'
import Pagination from '@/components/PIMTable/Pagination.vue'

// å“åº”式数据
const loading = ref(false)
const searchForm = reactive({
  name: '',
  department: '',
  status: ''
})

const salespersonList = ref([
  {
    id: 1,
    name: '陈志强',
    phone: '13800138001',
    email: 'chenzhiqiang@company.com',
    department: '销售部',
    position: '销售经理',
    hireDate: '2023-01-15',
    status: '在职',
    permissions: ['订单管理', '客户管理', '财务管理']
  },
  {
    id: 2,
    name: '刘雅婷',
    phone: '13800138002',
    email: 'liuyating@company.com',
    department: '市场部',
    position: '市场专员',
    hireDate: '2023-03-20',
    status: '在职',
    permissions: ['客户管理', '报表查看']
  },
  {
    id: 3,
    name: '王建国',
    phone: '13800138003',
    email: 'wangjianguo@company.com',
    department: '客服部',
    position: '客服主管',
    hireDate: '2022-11-10',
    status: '在职',
    permissions: ['客户管理', '发货管理']
  }
])

const pagination = ref({
  total: 3,
  currentPage: 1,
  pageSize: 10
})

const dialogVisible = ref(false)
const dialogTitle = ref('新增业务员')
const form = reactive({
  name: '',
  phone: '',
  email: '',
  department: '',
  position: '',
  hireDate: '',
  status: '在职'
})

const rules = {
  name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
  phone: [{ required: true, message: '请输入联系电话', trigger: 'blur' }],
  email: [{ required: true, message: '请输入邮箱', trigger: 'blur' }],
  department: [{ required: true, message: '请选择部门', trigger: 'change' }],
  position: [{ required: true, message: '请输入职位', trigger: 'blur' }],
  hireDate: [{ required: true, message: '请选择入职日期', trigger: 'change' }],
  status: [{ required: true, message: '请选择状态', trigger: 'change' }]
}

const isEdit = ref(false)
const editId = ref(null)
const permissionDialogVisible = ref(false)
const currentSalesperson = ref({})
const currentPermissions = ref([])
const formRef = ref()

// è®¡ç®—属性
const filteredList = computed(() => {
  let list = salespersonList.value
  if (searchForm.name) {
    list = list.filter(item => item.name.includes(searchForm.name))
  }
  if (searchForm.department) {
    list = list.filter(item => item.department === searchForm.department)
  }
  if (searchForm.status) {
    list = list.filter(item => item.status === searchForm.status)
  }
  return list
})

// æ–¹æ³•
const getStatusType = (status) => {
  const statusMap = {
    '在职': 'success',
    '离职': 'danger',
    '试用期': 'warning'
  }
  return statusMap[status] || 'info'
}

const handleSearch = () => {
  // æœç´¢é€»è¾‘已在computed中处理
}

const resetSearch = () => {
  searchForm.name = ''
  searchForm.department = ''
  searchForm.status = ''
}

const handleAdd = () => {
  dialogTitle.value = '新增业务员'
  isEdit.value = false
  form.name = ''
  form.phone = ''
  form.email = ''
  form.department = ''
  form.position = ''
  form.hireDate = ''
  form.status = '在职'
  dialogVisible.value = true
}

const handleEdit = (row) => {
  dialogTitle.value = '编辑业务员'
  isEdit.value = true
  editId.value = row.id
  Object.assign(form, row)
  dialogVisible.value = true
}

const handleDelete = (row) => {
  ElMessageBox.confirm('确认删除该业务员吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    const index = salespersonList.value.findIndex(item => item.id === row.id)
    if (index > -1) {
      salespersonList.value.splice(index, 1)
      pagination.value.total--
      ElMessage.success('删除成功')
    }
  })
}

const handlePermissions = (row) => {
  currentSalesperson.value = row
  currentPermissions.value = [...row.permissions]
  permissionDialogVisible.value = true
}

const savePermissions = () => {
  const index = salespersonList.value.findIndex(item => item.id === currentSalesperson.value.id)
  if (index > -1) {
    salespersonList.value[index].permissions = [...currentPermissions.value]
    ElMessage.success('权限设置成功')
    permissionDialogVisible.value = false
  }
}

const handleSubmit = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      if (isEdit.value) {
        // ç¼–辑
        const index = salespersonList.value.findIndex(item => item.id === editId.value)
        if (index > -1) {
          salespersonList.value[index] = { ...form, id: editId.value }
          ElMessage.success('编辑成功')
        }
      } else {
        // æ–°å¢ž
        const newId = Math.max(...salespersonList.value.map(item => item.id)) + 1
        salespersonList.value.push({
          ...form,
          id: newId,
          permissions: []
        })
        pagination.value.total++
        ElMessage.success('新增成功')
      }
      dialogVisible.value = false
    }
  })
}

const handleCurrentChange = (val) => {
  pagination.value.currentPage = val.page
  pagination.value.pageSize = val.limit
}
</script>

<style scoped>
.search-row {
  margin-bottom: 20px;
}
</style>

 src/views/tideLogin.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,15 @@
<template>
  <div></div>
</template>
<script setup>
import useUserStore from '@/store/modules/user'
const userStore = useUserStore()
let { proxy } = getCurrentInstance()
function goLogin() {
  userStore.TideLogin({code : proxy.$route.query.code}).then(() => {
    proxy.$router.push({ path: redirect || "/" }).catch(() => { });
  })
}
goLogin()
</script>
<style scoped></style>

 vite.config.js

@@ -9,7 +9,7 @@
  const baseUrl =

    VITE_APP_ENV == "development"

      ? "http://114.132.189.42:8089" // å¼€å‘环境后端接口

      : "http://114.132.189.42:7003"; // ç”Ÿäº§çŽ¯å¢ƒåŽç«¯æŽ¥å£

      : "http://114.132.189.42:1234"; // ç”Ÿäº§çŽ¯å¢ƒåŽç«¯æŽ¥å£



  return {

    // éƒ¨ç½²ç”Ÿäº§çŽ¯å¢ƒå’Œå¼€å‘环境下的URL。