gaoluyang
6 天以前 71a9eef518f2f2f1a1eb2fb90f2eb8ab7b155bc8
src/views/collaborativeApproval/knowledgeBase/index.vue
@@ -3,36 +3,46 @@
    <div class="search_form">
      <div>
        <span class="search_title">知识标题:</span>
        <el-input
          v-model="searchForm.title"
        <el-input v-model="searchForm.title"
          style="width: 240px"
          placeholder="请输入知识标题搜索"
          @change="handleQuery"
          clearable
          :prefix-icon="Search"
        />
                  :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="'contract'" />
          <el-option label="审批案例" :value="'approval'" />
          <el-option label="解决方案" :value="'solution'" />
          <el-option label="经验总结" :value="'experience'" />
          <el-option label="操作指南" :value="'guide'" />
        <el-select v-model="searchForm.type"
                   clearable
                   @change="handleQuery"
                   style="width: 240px">
          <el-option label="合同特批"
                     :value="'contract'" />
          <el-option label="审批案例"
                     :value="'approval'" />
          <el-option label="解决方案"
                     :value="'solution'" />
          <el-option label="经验总结"
                     :value="'experience'" />
          <el-option label="操作指南"
                     :value="'guide'" />
        </el-select>
        <el-button type="primary" @click="handleQuery" style="margin-left: 10px">
        <el-button type="primary"
                   @click="handleQuery"
                   style="margin-left: 10px">
          搜索
        </el-button>
      </div>
      <div>
        <el-button @click="handleExport" style="margin-right: 10px">导出</el-button>
        <el-button type="primary" @click="openForm('add')">新增知识</el-button>
        <el-button type="danger" plain @click="handleDelete">删除</el-button>
        <el-button @click="handleExport"
                   style="margin-right: 10px">导出</el-button>
        <el-button type="primary"
                   @click="openForm('add')">新增知识</el-button>
        <el-button type="danger"
                   plain
                   @click="handleDelete">删除</el-button>
      </div>
    </div>
    <div class="table_list">
      <PIMTable
        rowKey="id"
      <PIMTable rowKey="id"
        :column="tableColumn"
        :tableData="tableData"
        :page="page"
@@ -40,107 +50,126 @@
        @selection-change="handleSelectionChange"
        :tableLoading="tableLoading"
        @pagination="pagination"
        :total="page.total"
      ></PIMTable>
                :total="page.total"></PIMTable>
    </div>
    <!-- 新增/编辑知识弹窗 -->
    <el-dialog
      v-model="dialogVisible"
    <el-dialog v-model="dialogVisible"
      :title="dialogTitle"
      width="800px"
      :close-on-click-modal="false"
    >
      <el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
               :close-on-click-modal="false">
      <el-form ref="formRef"
               :model="form"
               :rules="rules"
               label-width="120px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="知识标题" prop="title">
              <el-input v-model="form.title" placeholder="请输入知识标题" />
            <el-form-item label="知识标题"
                          prop="title">
              <el-input v-model="form.title"
                        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="contract" />
                <el-option label="审批案例" value="approval" />
                <el-option label="解决方案" value="solution" />
                <el-option label="经验总结" value="experience" />
                <el-option label="操作指南" value="guide" />
            <el-form-item label="知识类型"
                          prop="type">
              <el-select v-model="form.type"
                         placeholder="请选择知识类型"
                         style="width: 100%">
                <el-option label="合同特批"
                           value="contract" />
                <el-option label="审批案例"
                           value="approval" />
                <el-option label="解决方案"
                           value="solution" />
                <el-option label="经验总结"
                           value="experience" />
                <el-option label="操作指南"
                           value="guide" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="适用场景" prop="scenario">
              <el-input v-model="form.scenario" placeholder="请输入适用场景" />
            <el-form-item label="适用场景"
                          prop="scenario">
              <el-input v-model="form.scenario"
                        placeholder="请输入适用场景" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="解决效率" prop="efficiency">
              <el-select v-model="form.efficiency" placeholder="请选择解决效率" style="width: 100%">
                <el-option label="显著提升" value="high" />
                <el-option label="一般提升" value="medium" />
                <el-option label="轻微提升" value="low" />
            <el-form-item label="解决效率"
                          prop="efficiency">
              <el-select v-model="form.efficiency"
                         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-col>
        </el-row>
        <el-form-item label="问题描述" prop="problem">
          <el-input
            v-model="form.problem"
        <el-form-item label="问题描述"
                      prop="problem">
          <el-input v-model="form.problem"
            type="textarea"
            :rows="3"
            placeholder="请描述遇到的问题"
          />
                    placeholder="请描述遇到的问题" />
        </el-form-item>
        <el-form-item label="解决方案" prop="solution">
          <el-input
            v-model="form.solution"
        <el-form-item label="解决方案"
                      prop="solution">
          <el-input v-model="form.solution"
            type="textarea"
            :rows="4"
            placeholder="请详细描述解决方案"
          />
                    placeholder="请详细描述解决方案" />
        </el-form-item>
        <el-form-item label="关键要点" prop="keyPoints">
          <el-input
            v-model="form.keyPoints"
        <el-form-item label="关键要点"
                      prop="keyPoints">
          <el-input v-model="form.keyPoints"
            type="textarea"
            :rows="3"
            placeholder="请输入关键要点,用逗号分隔"
          />
                    placeholder="请输入关键要点,用逗号分隔" />
        </el-form-item>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="创建人" prop="creator">
              <el-input v-model="form.creator" placeholder="请输入创建人" />
            <el-form-item label="创建人"
                          prop="creator">
              <el-input v-model="form.creator"
                        placeholder="请输入创建人" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="使用次数" prop="usageCount">
              <el-input-number v-model="form.usageCount" :min="0" style="width: 100%" />
            <el-form-item label="使用次数"
                          prop="usageCount">
              <el-input-number v-model="form.usageCount"
                               :min="0"
                               style="width: 100%" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary"
                     @click="submitForm">确定</el-button>
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitForm">确定</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 查看知识详情弹窗 -->
    <el-dialog
      v-model="viewDialogVisible"
    <el-dialog v-model="viewDialogVisible"
      title="知识详情"
      width="900px"
      :close-on-click-modal="false"
    >
               :close-on-click-modal="false">
      <div class="knowledge-detail">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="知识标题" :span="2">
        <el-descriptions :column="2"
                         border>
          <el-descriptions-item label="知识标题"
                                :span="2">
            <span class="detail-title">{{ currentKnowledge.title }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="知识类型">
@@ -166,31 +195,25 @@
            {{ currentKnowledge.createTime }}
          </el-descriptions-item>
        </el-descriptions>
        <div class="detail-section">
          <h4>问题描述</h4>
          <div class="detail-content">{{ currentKnowledge.problem }}</div>
        </div>
        <div class="detail-section">
          <h4>解决方案</h4>
          <div class="detail-content">{{ currentKnowledge.solution }}</div>
        </div>
        <div class="detail-section">
          <h4>关键要点</h4>
          <div class="key-points">
            <el-tag
              v-for="(point, index) in currentKnowledge.keyPoints.split(',')"
            <el-tag v-for="(point, index) in currentKnowledge.keyPoints.split(',')"
              :key="index"
              type="success"
              style="margin-right: 8px; margin-bottom: 8px;"
            >
                    style="margin-right: 8px; margin-bottom: 8px;">
              {{ point.trim() }}
            </el-tag>
          </div>
        </div>
        <div class="detail-section">
          <h4>使用统计</h4>
          <div class="usage-stats">
@@ -217,11 +240,11 @@
          </div>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary"
                     @click="copyKnowledge">复制知识</el-button>
          <el-button @click="viewDialogVisible = false">关闭</el-button>
          <el-button type="primary" @click="copyKnowledge">复制知识</el-button>
          <!-- <el-button type="success" @click="markAsFavorite">收藏@</el-button> -->
        </span>
      </template>
@@ -234,22 +257,21 @@
import { onMounted, ref, reactive, toRefs, getCurrentInstance } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import PIMTable from "@/components/PIMTable/PIMTable.vue";
import { listKnowledgeBase, delKnowledgeBase,addKnowledgeBase,updateKnowledgeBase } from "@/api/collaborativeApproval/knowledgeBase.js";
  import {
    listKnowledgeBase,
    delKnowledgeBase,
    addKnowledgeBase,
    updateKnowledgeBase,
  } from "@/api/collaborativeApproval/knowledgeBase.js";
// 表单验证规则
const rules = {
  title: [
    { required: true, message: "请输入知识标题", trigger: "blur" }
  ],
  type: [
    { required: true, message: "请选择知识类型", trigger: "change" }
  ],
  problem: [
    { required: true, message: "请描述遇到的问题", trigger: "blur" }
  ],
    title: [{ required: true, message: "请输入知识标题", trigger: "blur" }],
    type: [{ required: true, message: "请选择知识类型", trigger: "change" }],
    problem: [{ required: true, message: "请描述遇到的问题", trigger: "blur" }],
  solution: [
    { required: true, message: "请详细描述解决方案", trigger: "blur" }
  ]
      { required: true, message: "请详细描述解决方案", trigger: "blur" },
    ],
};
// 响应式数据
@@ -275,13 +297,13 @@
    solution: "",
    keyPoints: "",
    creator: "",
    usageCount: 0
      usageCount: 0,
  },
  dialogVisible: false,
  dialogTitle: "",
  dialogType: "add",
  viewDialogVisible: false,
  currentKnowledge: {}
    currentKnowledge: {},
});
const {
@@ -295,7 +317,7 @@
  dialogTitle,
  dialogType,
  viewDialogVisible,
  currentKnowledge
    currentKnowledge,
} = toRefs(data);
// 表单引用
@@ -312,26 +334,26 @@
    label: "知识类型",
    prop: "type",
    dataType: "tag",
    formatData: (params) => {
      formatData: params => {
      const typeMap = {
        contract: "合同特批",
        approval: "审批案例",
        solution: "解决方案",
        experience: "经验总结",
        guide: "操作指南"
          guide: "操作指南",
      };
      return typeMap[params] || params;
    },
    formatType: (params) => {
      formatType: params => {
      const typeMap = {
        contract: "success",
        approval: "warning",
        solution: "primary",
        experience: "info",
        guide: "danger"
          guide: "danger",
      };
      return typeMap[params] || "info";
    }
      },
  },
  {
    label: "适用场景",
@@ -343,28 +365,28 @@
    label: "解决效率",
    prop: "efficiency",
    dataType: "tag",
    formatData: (params) => {
      formatData: params => {
      const efficiencyMap = {
        high: "显著提升",
        medium: "一般提升",
        low: "轻微提升"
          low: "轻微提升",
      };
      return efficiencyMap[params] || params;
    },
    formatType: (params) => {
      formatType: params => {
      const typeMap = {
        high: "success",
        medium: "warning",
        low: "info"
          low: "info",
      };
      return typeMap[params] || "info";
    }
      },
  },
  {
    label: "使用次数",
    prop: "usageCount",
    width: 100,
    align: "center"
      align: "center",
  },
  {
    label: "创建人",
@@ -386,19 +408,19 @@
      {
        name: "编辑",
        type: "text",
        clickFun: (row) => {
          clickFun: row => {
          openForm("edit", row);
        }
          },
      },
      {
        name: "查看",
        type: "text",
        clickFun: (row) => {
          clickFun: row => {
          viewKnowledge(row);
        }
      }
    ]
  }
          },
        },
      ],
    },
]);
// 模拟数据
@@ -453,7 +475,7 @@
  "{type}标准化操作流程",
  "{scenario}问题解决方案",
  "{type}最佳实践总结",
  "{scenario}效率提升方案"
    "{scenario}效率提升方案",
];
// 知识类型配置
@@ -462,24 +484,35 @@
  { type: "approval", label: "审批案例", efficiency: "medium" },
  { type: "solution", label: "解决方案", efficiency: "high" },
  { type: "experience", label: "经验总结", efficiency: "medium" },
  { type: "guide", label: "操作指南", efficiency: "low" }
    { type: "guide", label: "操作指南", efficiency: "low" },
];
// 场景列表
const scenarios = ["大额合同审批", "跨部门协作", "紧急采购", "特殊申请", "流程优化", "问题处理", "标准化建设", "效率提升"];
  const scenarios = [
    "大额合同审批",
    "跨部门协作",
    "紧急采购",
    "特殊申请",
    "流程优化",
    "问题处理",
    "标准化建设",
    "效率提升",
  ];
// 自动生成新数据
const generateNewData = () => {
  const newId = (mockData.length + 1).toString();
  const now = new Date();
  const randomType = knowledgeTypes[Math.floor(Math.random() * knowledgeTypes.length)];
  const randomScenario = scenarios[Math.floor(Math.random() * scenarios.length)];
    const randomType =
      knowledgeTypes[Math.floor(Math.random() * knowledgeTypes.length)];
    const randomScenario =
      scenarios[Math.floor(Math.random() * scenarios.length)];
  // 生成随机标题
  let title = titleTemplates[Math.floor(Math.random() * titleTemplates.length)];
  title = title
    .replace('{type}', randomType.label)
    .replace('{scenario}', randomScenario);
      .replace("{type}", randomType.label)
      .replace("{scenario}", randomScenario);
  const newKnowledge = {
    id: newId,
@@ -490,9 +523,11 @@
    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()
      createTime: now.toLocaleString(),
  };
  // 添加到数据开头
@@ -531,22 +566,23 @@
  listKnowledgeBase({...page.value, ...searchForm.value})
  .then(res => {
    tableLoading.value = false;
    tableData.value = res.data.records
        tableData.value = res.data.records;
    page.total = res.data.total;
  }).catch(err => {
    tableLoading.value = false;
  })
      .catch(err => {
        tableLoading.value = false;
      });
};
// 分页处理
const pagination = (obj) => {
  const pagination = obj => {
  page.value.current = obj.page;
  page.value.size = obj.limit;
  handleQuery();
};
// 选择变化处理
const handleSelectionChange = (selection) => {
  const handleSelectionChange = selection => {
  selectedIds.value = selection.map(item => item.id);
};
@@ -565,7 +601,7 @@
      solution: "",
      keyPoints: "",
      creator: "",
      usageCount: 0
        usageCount: 0,
    });
  } else if (type === "edit" && row) {
    dialogTitle.value = "编辑知识";
@@ -579,78 +615,78 @@
      solution: row.solution,
      keyPoints: row.keyPoints,
      creator: row.creator,
      usageCount: row.usageCount
        usageCount: row.usageCount,
    });
  }
  dialogVisible.value = true;
};
// 查看知识详情
const viewKnowledge = (row) => {
  const viewKnowledge = row => {
  currentKnowledge.value = { ...row };
  viewDialogVisible.value = true;
};
// 获取类型标签类型
const getTypeTagType = (type) => {
  const getTypeTagType = type => {
  const typeMap = {
    contract: "success",
    approval: "warning",
    solution: "primary",
    experience: "info",
    guide: "danger"
      guide: "danger",
  };
  return typeMap[type] || "info";
};
// 获取类型标签文本
const getTypeLabel = (type) => {
  const getTypeLabel = type => {
  const typeMap = {
    contract: "合同特批",
    approval: "审批案例",
    solution: "解决方案",
    experience: "经验总结",
    guide: "操作指南"
      guide: "操作指南",
  };
  return typeMap[type] || type;
};
// 获取效率标签类型
const getEfficiencyTagType = (efficiency) => {
  const getEfficiencyTagType = efficiency => {
  const typeMap = {
    high: "success",
    medium: "warning",
    low: "info"
      low: "info",
  };
  return typeMap[efficiency] || "info";
};
// 获取效率标签文本
const getEfficiencyLabel = (efficiency) => {
  const getEfficiencyLabel = efficiency => {
  const efficiencyMap = {
    high: "显著提升",
    medium: "一般提升",
    low: "轻微提升"
      low: "轻微提升",
  };
  return efficiencyMap[efficiency] || efficiency;
};
// 获取效率提升百分比
const getEfficiencyScore = (efficiency) => {
  const getEfficiencyScore = efficiency => {
  const scoreMap = {
    high: 40,
    medium: 25,
    low: 15
      low: 15,
  };
  return scoreMap[efficiency] || 0;
};
// 获取平均节省时间
const getTimeSaved = (efficiency) => {
  const getTimeSaved = efficiency => {
  const timeMap = {
    high: "2-3天",
    medium: "1-2天",
    low: "0.5-1天"
      low: "0.5-1天",
  };
  return timeMap[efficiency] || "未知";
};
@@ -668,9 +704,12 @@
  `.trim();
  // 复制到剪贴板
  navigator.clipboard.writeText(knowledgeText).then(() => {
    navigator.clipboard
      .writeText(knowledgeText)
      .then(() => {
    ElMessage.success("知识内容已复制到剪贴板");
  }).catch(() => {
      })
      .catch(() => {
    ElMessage.error("复制失败,请手动复制");
  });
};
@@ -678,7 +717,9 @@
// 收藏知识
const markAsFavorite = () => {
  // 增加使用次数
  const index = mockData.findIndex(item => item.id === currentKnowledge.value.id);
    const index = mockData.findIndex(
      item => item.id === currentKnowledge.value.id
    );
  if (index !== -1) {
    mockData[index].usageCount += 1;
    currentKnowledge.value.usageCount += 1;
@@ -693,25 +734,29 @@
    await formRef.value.validate();
    if (dialogType.value === "add") {
      // 新增知识
      addKnowledgeBase({...form.value}).then(res => {
        addKnowledgeBase({ ...form.value })
          .then(res => {
        if(res.code == 200){
          ElMessage.success("添加成功");
          dialogVisible.value = false;
          getList();
        }
      }).catch(err => {
        ElMessage.error(err.msg);
      })
          .catch(err => {
            ElMessage.error(err.msg);
          });
    } else {
      updateKnowledgeBase({...form.value}).then(res => {
        updateKnowledgeBase({ ...form.value })
          .then(res => {
        if(res.code == 200){
          ElMessage.success("更新成功");
          dialogVisible.value = false;
          getList();
        }
      }).catch(err => {
        ElMessage.error(err.msg);
      })
          .catch(err => {
            ElMessage.error(err.msg);
          });
    }
  } catch (error) {
    console.error("表单验证失败:", error);
@@ -729,7 +774,8 @@
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    })
      .then(() => {
    // console.log(selectedIds.value);
    delKnowledgeBase(selectedIds.value).then(res => {
      if(res.code == 200){
@@ -737,17 +783,22 @@
        selectedIds.value = [];
        getList();
      }
        });
    })
  }).catch(() => {
      .catch(() => {
    // 用户取消
  });
};
// 导出
const { proxy } = getCurrentInstance()
  const { proxy } = getCurrentInstance();
const handleExport = () => {
  proxy.download('/knowledgeBase/export', { ...searchForm.value }, '知识库.xlsx')
}
    proxy.download(
      "/knowledgeBase/export",
      { ...searchForm.value },
      "知识库.xlsx"
    );
  };
</script>
<style scoped>