123

package.json

@@ -40,6 +40,7 @@
     ]
   },
   "dependencies": {
+    "@element-plus/icons": "^0.0.11",
     "@element-plus/icons-vue": "^2.1.0",
     "@vitejs/plugin-vue": "^4.2.3",
     "@vueuse/core": "^10.1.2",

src/router/index.ts

@@ -21,7 +21,6 @@ export const constantRoutes: RouteRecordRaw[] = [
     component: () => import("@/views/login/index.vue"),
     meta: { hidden: true },
   },
-
   {
     path: "/",
     component: Layout,

src/views/knowledge/knowledge/bb.vue

@@ -0,0 +1,309 @@
+<!--
+@ 作者: 鲁智强
+@ 时间: 2023-08-15 11:34:38
+@ 备注: 
+-->
+<template>
+  <div class="box">
+    <el-button type="danger" @click="handleBatchDelete">批量删除</el-button>
+    <el-button class="new_btn" type="primary" @click="handleNew"
+      >新增</el-button
+    >
+    <el-button type="warning" :icon="Star" circle
+      ><el-icon><RefreshRight /></el-icon
+    ></el-button>
+    <span class="aaa">
+      <el-form-item label="" style="width: 50">
+        <el-select v-model="form.region" placeholder="请选分厂">
+          <el-option label="请选分厂" value="0"></el-option>
+          <el-option label="甲醇分厂" value="1"></el-option>
+          <el-option label="化产分厂" value="2"></el-option>
+          <el-option label="动力分厂" value="3"></el-option>
+          <el-option label="机焦车间" value="4"></el-option>
+          <el-option label="质检中心" value="5"></el-option>
+          <el-option label="安环部" value="6"></el-option>
+          <el-option label="备煤车间" value="7"></el-option>
+          <el-option label="保卫部" value="8"></el-option>
+          <el-option label="企管部" value="9"></el-option>
+          <el-option label="高管" value="10"></el-option>
+          <el-option label="综合办" value="11"></el-option>
+          <el-option label="人力资源部" value="12"></el-option>
+          <el-option label="财务部" value="13"></el-option>
+          <el-option label="营销部" value="14"></el-option>
+          <el-option label="生产部" value="15"></el-option>
+          <el-option label="仓储中心" value="16"></el-option>
+          <el-option label="物流中心" value="17"></el-option>
+          <el-option label="办公室" value="18"></el-option>
+          <el-option label="审计监察部" value="19"></el-option>
+          <el-option label="法律事务部" value="20"></el-option>
+          <el-option label="财务部" value="21"></el-option>
+          <el-option label="供应部" value="22"></el-option>
+          <el-option label="销售部" value="23"></el-option>
+          <el-option label="生产计划部" value="24"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="">
+        <el-select v-model="form.section" placeholder="请选工段"> </el-select>
+      </el-form-item>
+      <el-form-item label="">
+        <el-select v-model="form.position" placeholder="请选职务"> </el-select>
+      </el-form-item>
+      <el-form-item label="">
+        <el-select v-model="form.column" placeholder="请选栏目">
+          <el-option label="请选栏目" value="0"></el-option>
+          <el-option label="流程制度" value="1"></el-option>
+          <el-option label="工艺技术" value="2"></el-option>
+          <el-option label="设备管理" value="3"></el-option>
+          <el-option label="仪控仪表" value="4"></el-option>
+          <el-option label="机电维修" value="5"></el-option>
+          <el-option label="安全生产" value="6"></el-option>
+          <el-option label="质量管理" value="7"></el-option>
+          <el-option label="财务管理" value="8"></el-option>
+          <el-option label="人力资源" value="9"></el-option>
+          <el-option label="仓储物流" value="10"></el-option>
+          <el-option label="营销采购" value="11"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-input
+        v-model="form.name"
+        style="width: 170px"
+        placeholder="请输入题目"
+      ></el-input>
+      <el-button type="primary" style="width: 80px" @click="onSubmit"
+        >查询</el-button
+      >
+    </span>
+    <el-table
+      ref="multipleTableRef"
+      :data="studentInfo"
+      border
+      style="width: 100%"
+      stripe
+      @selection-change="handleSelectionChange"
+    >
+      <el-table-column type="selection" width="55" />
+      <el-table-column prop="name" label="文章标题" />
+      <el-table-column prop="sex" label="所属栏目" />
+      <el-table-column prop="age" label="可见范围" />
+      <el-table-column prop="num" label="访问数据" width="440" />
+      <el-table-column prop="abc" label="状态" width="120">
+        <template #default="row">
+          <el-switch v-model="row.row.status" />
+        </template>
+      </el-table-column>
+      <el-table-column fixed="right" label="操作">
+        <template #default="{ row }">
+          <el-button type="success" size="small" @click="handleEdit(row)"
+            >修改</el-button
+          >
+          <el-button type="danger" size="small" @click="handleDel(row)"
+            >删除</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 新建/编辑弹框 -->
+    <Dialog
+      v-if="dialogShow"
+      v-model:dialogShow="dialogShow"
+      :row-info="rowInfo"
+      :title="title"
+      :array-num="studentInfo.length"
+      @addRow="addRow"
+      @editRow="editRow"
+      @save="handleSave"
+    />
+    <!-- 详情弹窗 -->
+    <Detail v-if="detailShow" :row-info="rowInfo" @closeDetail="closeDetail" />
+  </div>
+</template>
+
+<script>
+import { reactive, ref, toRefs, computed, onMounted } from "vue";
+import { countdownEmits, ElMessageBox, ElTable } from "element-plus";
+import { Timer } from "@element-plus/icons-vue";
+import Dialog from "./dialog.vue";
+import Detail from "./detail.vue";
+export default {
+  // eslint-disable-next-line vue/no-reserved-component-names
+  components: { Dialog, Detail },
+  setup() {
+    const data = reactive({
+      dialogShow: false, // 新增/编辑弹框
+      detailShow: false, // 详情弹窗
+      rowInfo: {}, // 新增/编辑的数据
+      title: "", // 是新建还是修改
+      form: {
+        name: "",
+        region: "",
+        date1: "",
+        date2: "",
+        delivery: false,
+        type: [],
+        resource: "",
+        desc: "",
+        section: "",
+        position: "",
+        column: "",
+      },
+      studentInfo: [
+        {
+          id: 1,
+          name: "办公区域6S及办公用品检查通报",
+          sex: "其他",
+          age: "公开",
+          num: "阅读量：195 评论数：0 收藏数：0点赞数：1 踩：1 综合评分：0",
+          iop: "1",
+          ccc: "",
+          ade: "",
+          ddd: "",
+        },
+        {
+          id: 2,
+          name: "山东恒信高科能源有限公司--管理手册",
+          sex: "流程制度",
+          age: "公开",
+          num: "阅读量：14 评论数：0 收藏数：0点赞数：2 踩：0 综合评分：0",
+          iop: "2",
+          ccc: "",
+          ade: "",
+          ddd: "",
+        },
+        {
+          id: 3,
+          name: "山东恒信高科能源有限公司--程序文件汇编",
+          sex: "流程制度",
+          age: "公开",
+          num: "	阅读量：0 评论数：0 收藏数：0点赞数：3 踩：0 综合评分：0",
+          iop: "1",
+          ccc: "",
+          ade: "",
+          ddd: "",
+        },
+      ],
+    });
+    const searchName = ref(""); // 用于查询的输入值
+    const filterTableData = computed(() =>
+      data.studentInfo.filter(
+        (item) => !searchName.value || item.name.includes(searchName.value)
+      )
+    );
+    const multipleSelection = ref([]);
+    const method = reactive({
+      handleNew() {
+        data.title = "新增";
+        data.rowInfo = {};
+        data.dialogShow = true;
+      },
+      handleDetail(val) {
+        data.detailShow = true;
+        data.rowInfo = val;
+      },
+      handleEdit(val) {
+        data.title = "修改";
+        data.dialogShow = true;
+        data.rowInfo = val;
+      },
+      handleDel(val) {
+        ElMessageBox.confirm("你确定删除这条信息吗?", "提示", {
+          confirmButtonText: "确认",
+          cancelButtonText: "取消",
+          type: "warning",
+        })
+          .then(() => {
+            method.handleSure(val);
+          })
+          .catch(() => {
+            // catch error
+          });
+      },
+      handleSure(val) {
+        this.dialogVisible = false;
+        const index = data.studentInfo.findIndex((item) => item.id === val.id);
+        data.studentInfo.splice(index, 1);
+      },
+      // 添加行
+      addRow(val) {
+        data.studentInfo.push(val);
+      },
+      // 编辑行
+      editRow(val) {
+        let index = data.studentInfo.findIndex(
+          (item, index) => item.id === val.id
+        );
+        data.studentInfo.splice(index, 1, val);
+      },
+      // 关闭详情弹窗
+      closeDetail() {
+        data.detailShow = false;
+      },
+      handleSelectionChange(val) {
+        multipleSelection.value = val;
+      },
+      handleBatchDelete() {
+        if (multipleSelection.value.length === 0) {
+          ElMessageBox.alert("请选择要删除的数据", "提示", {
+            confirmButtonText: "确定",
+          });
+          return;
+        }
+
+        ElMessageBox.confirm("确定要批量删除所选数据吗？", "提示", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning",
+        })
+          .then(() => {
+            data.studentInfo = data.studentInfo.filter(
+              (item) => !multipleSelection.value.includes(item)
+            );
+            multipleSelection.value = []; // Clear selection
+          })
+          .catch(() => {
+            // 用户取消删除
+          });
+      },
+      handleSave(formData) {
+        formData.id = this.studentInfo.length + 1; // Generate a unique ID
+        data.studentInfo.push(formData); // Add the new data to the array
+      },
+      onSubmit() {
+        // 使用查询条件过滤数据
+        const { name, region, section, position, column } = data.form;
+        const filteredData = data.studentInfo.filter((item) => {
+          return (
+            (!name || item.name.includes(name)) &&
+            (!region || item.region === region) &&
+            (!section || item.section === section) &&
+            (!position || item.position === position) &&
+            (!column || item.column === column)
+          );
+        });
+        // 更新过滤后的数据
+        data.filterTableData = filteredData;
+      },
+    });
+    return { ...toRefs(data), ...method, ...filterTableData, searchName };
+  },
+};
+</script>
+<style lang="scss" scoped>
+.aab {
+  display: grid;
+  grid-template-columns: repeat(6, 1fr); /* 五列 */
+  align-items: start; /* 顶格对齐 */
+  float: right;
+  width: 800px;
+  height: 30px;
+  background-color: burlywood;
+}
+
+.aaa {
+  display: grid;
+  grid-template-columns: repeat(6, 1fr); /* 五列 */
+  align-items: start; /* 顶格对齐 */
+  float: right;
+  width: 700px;
+  height: 30px;
+}
+</style>

src/views/knowledge/knowledge/detail.vue

@@ -0,0 +1,57 @@
+<!--
+@ 作者: 鲁智强
+@ 时间: 2023-08-15 11:34:38
+@ 备注: 
+-->
+<template>
+  <el-dialog :model-value="true" title="详情" @close="handleClose">
+    <p>
+      <label for="name">文章标题：</label>
+      <span id="name"> {{ studentInfo.name }} </span>
+    </p>
+    <p>
+      <label for="sex">所属范围：</label>
+      <span id="sex"> {{ studentInfo.sex }} </span>
+    </p>
+    <p>
+      <label for="age">可见范围：</label>
+      <span id="age"> {{ studentInfo.age }} </span>
+    </p>
+    <p>
+      <label for="num">访问数据：</label>
+      <span id="num"> {{ studentInfo.age }} </span>
+    </p>
+    <p>
+      <label for="abc">状态：</label>
+      <span id="abc"> {{ studentInfo.age }} </span>
+    </p>
+  </el-dialog>
+</template>
+
+<script>
+import { computed, toRefs } from "vue";
+export default {
+  props: {
+    rowInfo: {
+      type: Object,
+      default() {
+        return {};
+      },
+    },
+  },
+  emit: ["closeDetail"],
+  setup(props, { emit }) {
+    const data = {
+      studentInfo: computed(() => props.rowInfo).value,
+    };
+    const method = {
+      handleClose() {
+        emit("closeDetail");
+      },
+    };
+    return { ...toRefs(data), ...method };
+  },
+};
+</script>
+
+<style lang="less" scoped></style>

src/views/knowledge/knowledge/dialog.vue

@@ -0,0 +1,269 @@
+<!--
+@ 作者: 鲁智强
+@ 时间: 2023-08-15 11:34:38
+@ 备注: 
+-->
+<template>
+  <el-dialog :model-value="true" :title="title" @close="handleClose">
+    <Editor v-model="editContvalue" style="height: calc(100vh - 124px)" />
+    <el-form
+      ref="ruleFormRef"
+      :model="formData"
+      label-width="120px"
+      class="demo-ruleForm"
+    >
+      <el-form-item label="文章标题:" prop="name" :rules="nameRules">
+        <el-input v-model="formData.name" placeholder="请输入标题"></el-input>
+      </el-form-item>
+      <el-form-item label="所属栏目：" prop="sex">
+        <el-select v-model="formData.sex">
+          <el-option label="工艺技术" value="工艺技术" />
+          <el-option label="流程制度" value="流程制度" />
+          <el-option label="设备管理" value="设备管理" />
+          <el-option label="仪控仪表" value="仪控仪表" />
+          <el-option label="机电维修" value="机电维修" />
+          <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-form-item label="文档来源">
+        <el-radio-group v-model="formData.iop">
+          <el-radio label="1" size="large" border>原创</el-radio>
+          <el-radio label="2" size="large" border>转贴</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="上传封面">
+        <el-upload action="#" list-type="picture-card" :auto-upload="false">
+          <el-icon><Plus /></el-icon>
+          <template #file="{ file }">
+            <div>
+              <img
+                class="el-upload-list__item-thumbnail"
+                :src="file.url"
+                alt=""
+              />
+              <span class="el-upload-list__item-actions">
+                <span
+                  class="el-upload-list__item-preview"
+                  @click="handlePictureCardPreview(file)"
+                >
+                  <el-icon><zoom-in /></el-icon>
+                </span>
+                <span
+                  v-if="!disabled"
+                  class="el-upload-list__item-delete"
+                  @click="handleDownload(file)"
+                >
+                  <el-icon><Download /></el-icon>
+                </span>
+                <span
+                  v-if="!disabled"
+                  class="el-upload-list__item-delete"
+                  @click="handleRemove(file)"
+                >
+                  <el-icon><Delete /></el-icon>
+                </span>
+              </span>
+            </div>
+          </template>
+        </el-upload>
+      </el-form-item>
+      <el-form-item label="文档标签：">
+        <el-input
+          v-model="formData.ccc"
+          placeholder="请输入文本文档，每个标签请用，隔开！"
+        />
+      </el-form-item>
+      <el-form-item label="文档描述：">
+        <el-input
+          v-model="formData.ade"
+          :autosize="{ minRows: 2, maxRows: 4 }"
+          type="textarea"
+          placeholder="对于本次检查发现的问题，望相关责任单位安排专人严格按照时间节点及要求进行整改，整改后及时回复。企管部、综合办进行复查。"
+        />
+      </el-form-item>
+      <el-form-item label="附件下载：">
+        <el-switch v-model="childBorder" />
+      </el-form-item>
+      <el-form-item label="排序：">
+        <el-input
+          v-model="formData.ddd"
+          style="width: 200px"
+          placeholder="请输入文档序号"
+        />
+      </el-form-item>
+      <el-form-item label="评论设置：">
+        <el-switch v-model="parentBorder" placeholder="启用" />
+      </el-form-item>
+      <el-form-item label="访问权限：" prop="age">
+        <el-radio-group v-model="formData.age">
+          <el-radio :label="'公开'">公开</el-radio>
+          <el-radio :label="'分厂'">分厂</el-radio>
+          <el-radio :label="'工段'">工段</el-radio>
+          <el-radio :label="'自定义'">自定义</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="submitForm()">确定</el-button>
+        <el-button @click="resetForm()">重置</el-button>
+      </el-form-item>
+    </el-form>
+  </el-dialog>
+</template>
+<script lang="ts">
+import { reactive, toRefs, ref, onMounted } from "vue";
+import { Delete, Download, Plus, ZoomIn } from "@element-plus/icons-vue";
+import { ElMessage } from "element-plus";
+import type { UploadProps, UploadFile } from "element-plus";
+import Editor from "@/components/WangEditor/index.vue";
+interface FormInfo {
+  id: string;
+  age: string;
+  name: string;
+  sex: string;
+  ccc: string;
+  ade: string;
+  iop: string;
+  ddd: string;
+}
+const childBorder = ref(false);
+const parentBorder = ref(false);
+const editContvalue = ref("初始内容");
+const dialogImageUrl = ref("");
+const dialogVisible = ref(false);
+const disabled = ref(false);
+const imageUrl = ref("");
+const handleRemove = (file: UploadFile) => {
+  console.log(file);
+};
+const handlePictureCardPreview = (file: UploadFile) => {
+  dialogImageUrl.value = file.url!;
+  dialogVisible.value = true;
+};
+const handleDownload = (file: UploadFile) => {
+  console.log(file);
+};
+const nameRules = [
+  { required: true, message: "文章标题不能为空", trigger: "blur" },
+  // Other validation rules for the name field
+];
+const handleAvatarSuccess: UploadProps["onSuccess"] = (
+  response,
+  uploadFile
+) => {
+  imageUrl.value = URL.createObjectURL(uploadFile.raw!);
+};
+export default {
+  props: {
+    title: {
+      type: String,
+      default: "",
+    },
+    dialogShow: {
+      type: Boolean,
+      default: false,
+    },
+    rowInfo: {
+      type: Object as () => FormInfo,
+      default() {
+        return {};
+      },
+    },
+    arrayNum: {
+      type: Number,
+      default: 0,
+    },
+  },
+  setup(props, { emit }) {
+    const data = reactive({
+      dialogFlag: false,
+      formData: {
+        id: props.arrayNum.toString(),
+        age: "'公开'",
+        name: "",
+        sex: "",
+        ccc: "",
+        ade: "",
+        iop: "1",
+        ddd: "",
+      },
+    });
+    const method = reactive({
+      // 关闭弹窗
+      handleClose() {
+        emit("update:dialogShow", false);
+      },
+      // 重置
+      resetForm() {
+        data.formData = Object.assign({}, props.rowInfo);
+      },
+      // 提交表单内容
+      submitForm() {
+        method.handleClose();
+        if (props.rowInfo.name) {
+          // 修改
+          const id = props.rowInfo;
+          emit("editRow", data.formData);
+        } else {
+          // 新增
+          data.formData["id"] = (props.arrayNum + 1).toString();
+          emit("addRow", data.formData);
+        }
+      },
+    });
+    onMounted(() => {
+      data.formData = Object.assign({}, props.rowInfo);
+    });
+    const handlePictureCardPreview = (file: UploadFile) => {};
+    const disabled = ref(false);
+    const handleRemove = (file: UploadFile) => {};
+    const handleDownload = (file: UploadFile) => {};
+    return {
+      ...toRefs(data),
+      ...method,
+      disabled,
+      handleRemove,
+      handlePictureCardPreview,
+      handleDownload,
+      editContvalue,
+      nameRules,
+      parentBorder,
+      childBorder,
+    };
+  },
+};
+</script>
+
+<style scoped>
+.avatar-uploader .avatar {
+  display: block;
+  width: 178px;
+  height: 178px;
+}
+</style>
+
+<style lang="scss">
+.avatar-uploader .el-upload {
+  position: relative;
+  overflow: hidden;
+  cursor: pointer;
+  border: 1px dashed var(--el-border-color);
+  border-radius: 6px;
+  transition: var(--el-transition-duration-fast);
+}
+
+.avatar-uploader .el-upload:hover {
+  border-color: var(--el-color-primary);
+}
+
+.el-icon.avatar-uploader-icon {
+  width: 178px;
+  height: 178px;
+  font-size: 28px;
+  color: #8c939d;
+  text-align: center;
+}
+</style>

src/views/knowledge/knowledge/index.vue

@@ -0,0 +1,34 @@
+<!--
+@ 作者: 鲁智强
+@ 时间: 2023-08-15 11:34:38
+@ 备注: 
+-->
+<script lang="ts" setup>
+import { ref } from "vue";
+import { ElButton, ElDialog /* ...其他引入的组件 */ } from "element-plus";
+import aaComponent from "./aa.vue";
+import bbComponent from "./bb.vue";
+</script>
+<template>
+  <div class="ccc">
+    <bb-component></bb-component>
+  </div>
+</template>
+<style lang="scss" scoped>
+* {
+  background-color: #fff;
+}
+
+.oba {
+  position: absolute;
+  top: -9px;
+}
+
+.oaa {
+  position: absolute;
+  top: 5px;
+  left: 970px;
+  width: 700px;
+  margin-top: 3.5px;
+}
+</style>

vite.config.ts

@@ -43,7 +43,7 @@ export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
       proxy: {
         // 反向代理解决跨域
         [env.VITE_APP_BASE_API]: {
-					target: env.VITE_APP_BASE_URL, // 线上接口地址
+          target: env.VITE_APP_BASE_URL, // 线上接口地址
           // target: "http://vapi.youlai.tech", // 线上接口地址
           // target: 'http://localhost:8989',  // 本地接口地址 , 后端工程仓库地址：https://gitee.com/youlaiorg/youlai-boot
           changeOrigin: true,
@@ -60,7 +60,7 @@ export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
       AutoImport({
         // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
         imports: ["vue", "@vueuse/core"],
-				//ignore: ['h'], // 自动添加 import { h } from '/node_modules/.vite/deps/vue.js 代码问题处理
+        //ignore: ['h'], // 自动添加 import { h } from '/node_modules/.vite/deps/vue.js 代码问题处理
         eslintrc: {
           enabled: false, //  Default `false`
           filepath: "./.eslintrc-auto-import.json", // Default `./.eslintrc-auto-import.json`