From f47f37e5ca8fb4f35f28f404672ea44483eab176 Mon Sep 17 00:00:00 2001
From: lion <120344285@qq.com>
Date: Wed, 28 Feb 2024 16:11:40 +0800
Subject: [PATCH] =?UTF-8?q?=E6=A0=8F=E7=9B=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/PartyshistoryRecoder/pointer.vue    |   2 +-
 src/views/menus/components/create.vue         | 271 ++++++++++++++++++
 src/views/menus/index.vue                     | 244 ++++++++++++++++
 .../party/components/addStudyResource.vue     | 102 ++++++-
 src/views/party/studyResource.vue             |   4 +
 5 files changed, 614 insertions(+), 9 deletions(-)
 create mode 100644 src/views/menus/components/create.vue
 create mode 100644 src/views/menus/index.vue

diff --git a/src/views/PartyshistoryRecoder/pointer.vue b/src/views/PartyshistoryRecoder/pointer.vue
index 813c143..272a170 100644
--- a/src/views/PartyshistoryRecoder/pointer.vue
+++ b/src/views/PartyshistoryRecoder/pointer.vue
@@ -26,7 +26,7 @@
           <Button
             style="margin-left: 10px"
             type="primary"
-            @click="select = { page: 1, keyword: '' }"
+            @click="select = { page: 1, keyword: '',activity_list_id:'' }"
             >重置
           </Button>
           <Button style="margin-left: 10px" type="primary" @click="doSearch"
diff --git a/src/views/menus/components/create.vue b/src/views/menus/components/create.vue
new file mode 100644
index 0000000..a13f946
--- /dev/null
+++ b/src/views/menus/components/create.vue
@@ -0,0 +1,271 @@
+<template>
+  <div>
+    <xy-dialog ref="dialog" :is-show.sync="isShow" type="form" :title="type === 'add' ? '新增栏目' : '编辑栏目'"
+      :form="form" :rules="rules" @submit="submit">
+      <template v-slot:activity_list_id>
+        <div class="xy-table-item">
+          <div class="xy-table-item-label">
+            <span style="color: red; font-weight: 600; padding-right: 4px">*</span>
+            项目 ：
+          </div>
+          <div class="xy-table-item-content">
+            <el-select style="width: 300px" v-model="form.activity_list_id" placeholder="请选择">
+              <el-option
+                v-for="item in listActivity"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id">
+              </el-option>
+            </el-select>
+          </div>
+        </div>
+      </template>
+      <template v-slot:pid>
+        <div class="xy-table-item">
+          <div class="xy-table-item-label">
+            <span style="color: red; font-weight: 600; padding-right: 4px">*</span>
+            父栏目 ：
+          </div>
+          <div class="xy-table-item-content">
+            <div v-if="form.pid===0">根目录</div>
+            <el-cascader
+                v-else
+                 style="width: 300px"
+                v-model="form.pid"
+                :options="treeArr"
+                :props="{'label':'title','value':'id',checkStrictly: true }"
+                clearable></el-cascader>
+          </div>
+        </div>
+      </template>
+      <template v-slot:title>
+        <div class="xy-table-item">
+          <div class="xy-table-item-label">
+            <span style="color: red; font-weight: 600; padding-right: 4px">*</span>
+            栏目名称 ：
+          </div>
+          <div class="xy-table-item-content">
+            <el-input v-model="form.title" clearable placeholder="请输入栏目名称" style="width: 300px"></el-input>
+          </div>
+        </div>
+      </template>
+      <template v-slot:cover_id>
+        <div class="xy-table-item">
+          <div class="xy-table-item-label">封面图 ：</div>
+          <div class="xy-table-item-content">
+            <el-upload style="width: 300px" class="upload-demo" :action="action" :on-success="
+                (response, file, fileList) =>
+                  successHandle(response, file, fileList, 'cover_id')
+              " :before-upload="uploadBefore" :file-list="cover_id" :on-remove="
+                (file, fileList) => removeHande(file, fileList, 'cover_id')
+              " :limit="1" list-type="picture-card">
+              <i slot="default" class="el-icon-plus"></i>
+              <div slot="tip" class="el-upload__tip">
+                只能上传jpg/png文件，且不超过500kb
+              </div>
+            </el-upload>
+          </div>
+        </div>
+      </template>
+
+    </xy-dialog>
+  </div>
+</template>
+
+<script>
+  import {
+    show,
+    save
+  } from "@/api/index";
+  export default {
+    components: {
+    },
+    props: {},
+    data() {
+      return {
+        isShow: false,
+        id: "",
+        type: "",
+        action: process.env.VUE_APP_UPLOAD_API,
+        listActivity:[],
+        treeArr:[],
+        cover_id:[],
+        form: {
+          activity_list_id: '',
+          pid:0,
+          title: "",
+          cover_id:''
+        },
+        rules: {
+          name: [{
+            required: true,
+            message: "请填写栏目名称",
+          }],
+        },
+      };
+    },
+    methods: {
+      setOption(val){
+        this.listActivity = val
+      },
+      setTree(val){
+        this.treeArr = val
+      },
+      show() {
+        this.isShow = true;
+      },
+      hidden() {
+        this.isShow = false;
+      },
+      init() {
+        for (let key in this.form) {
+          if (this.form[key] instanceof Array) {
+            this.form[key] = [];
+          } else {
+            this.form[key] = "";
+          }
+        }
+        this.$refs["dialog"].clearValidate();
+      },
+      setId(id) {
+        if (typeof id == "number") {
+          this.id = id;
+        } else {
+          console.error("error typeof id: " + typeof id);
+        }
+      },
+      getId() {
+        return this.id;
+      },
+      setType(type = "add") {
+        let types = ["add", "editor"];
+        if (types.includes(type)) {
+          this.type = type;
+        } else {
+          console.warn("Unknown type: " + type);
+        }
+      },
+      setForm(key = [], value = []) {
+        if (key instanceof Array) {
+          key.forEach((key, index) => {
+            this.form[key] = value[index] ?? "";
+          });
+        }
+        if (typeof key === "string") {
+          this.form[key] = value;
+        }
+        if (!key) {
+          this.init();
+        }
+      },
+
+      //上传
+      successHandle(response, file, fileList, key) {
+        this[key] = fileList;
+      },
+      removeHande(file, fileList, key) {
+        console.log("fileList", fileList)
+        console.log("key", key)
+        this[key] = fileList;
+        this.form[key] = "";
+      },
+      uploadBefore(file) {
+        console.log(file);
+        if (file.size / 1000 > 300 * 1024) {
+          this.$message({
+            type: "warning",
+            message: "上传大小超过300MB！",
+          });
+          return false;
+        }
+      },
+
+      async getDetail() {
+        const res = await show({
+          id: this.id,
+          table_name: "study_columns",
+          with_relations: ['cover']
+        });
+        this.$integrateData(this.form, res);
+        this.cover_id = res.cover ? [{
+          url: res.cover?.url,
+          name: res.cover?.original_name,
+          response: res.cover
+        }] : []
+      },
+
+      submit() {
+
+        if (this.type === "add") {
+          if (this.form.hasOwnProperty("id")) {
+            delete this.form.id;
+          }
+        }
+        if (this.type === "editor") {
+          Object.defineProperty(this.form, "id", {
+            value: this.id,
+            enumerable: true,
+            configurable: true,
+            writable: true,
+          });
+        }
+        this.form.cover_id = this.cover_id.length == 0 ? "" : (this.cover_id[0]?.response?.id);
+        save(Object.assign(this.form, {
+          table_name: "study_columns"
+        })).then(
+          (res) => {
+            this.$message({
+              type: "success",
+              message: this.type === "add" ? "新增栏目" : "编辑栏目" + "成功",
+            });
+            this.isShow = false;
+            this.$emit("refresh");
+          }
+        );
+      },
+    },
+    created(){
+
+    },
+    watch: {
+      isShow(val) {
+        if (val) {
+          console.log("form",this.form.activity_list_id)
+          if (this.type === "editor") {
+            this.getDetail();
+          }
+        } else {
+          this.id = "";
+          this.type = "";
+          this.cover_id = [];
+          this.init();
+          this.$refs["dialog"].clearValidate();
+          delete this.form.id;
+        }
+      },
+    },
+  };
+</script>
+
+<style scoped lang="scss">
+  ::v-deep .el-input__inner {
+    text-align: left;
+  }
+
+  .xy-table-item-price-per {
+    position: relative;
+
+    &::after {
+      position: absolute;
+      right: 10px;
+      top: 0;
+      content: "%";
+    }
+
+    ::v-deep .el-input__clear {
+      position: relative;
+      right: 46px;
+      z-index: 2;
+    }
+  }
+</style>
diff --git a/src/views/menus/index.vue b/src/views/menus/index.vue
new file mode 100644
index 0000000..2043396
--- /dev/null
+++ b/src/views/menus/index.vue
@@ -0,0 +1,244 @@
+<template>
+  <div>
+    <lx-header
+      icon="md-apps"
+      style="margin-bottom: 10px; border: 0px; margin-top: 15px"
+      text="项目栏目管理"
+    >
+      <div slot="content"></div>
+      <slot>
+        <div class="selects">
+          <div>
+            <span style="padding: 0 6px; word-break: keep-all"> 关键字 </span>
+            <Input
+              v-model="select.keyword"
+              placeholder="请输入关键字"
+              style="width: 180px"
+            ></Input>
+          </div>
+          <div>
+            <span style="padding: 0 6px; word-break: keep-all"> 项目 </span>
+            <Select @on-change="changeActive" v-model="select.activity_list_id" style="width:200px">
+                <Option v-for="item in listActivity" :value="item.id" :key="item.id">{{ item.name }}</Option>
+            </Select>
+          </div>
+
+          <Button
+            style="margin-left: 10px"
+            type="primary"
+            @click="select = { page: 1, keyword: '',activity_list_id:'' }"
+            >重置
+          </Button>
+          <Button style="margin-left: 10px" type="primary" @click="doSearch"
+            >查询</Button
+          >
+          <Button
+            style="margin-left: 10px"
+            type="primary"
+            @click="
+              $refs['create'].setForm(['activity_list_id','pid'],[select.activity_list_id||'',0]),
+              $refs['create'].setType('add'),
+              $refs['create'].setOption(listActivity),
+              $refs['create'].setTree(list),
+              $refs['create'].show()
+            "
+            >新增</Button
+          >
+        </div>
+      </slot>
+    </lx-header>
+
+    <xy-table
+      :list="list"
+      :total="total"
+      :table-item="table"
+      :isPage="false"
+      @pageSizeChange="pageSizeChange"
+      @pageIndexChange="pageChange"
+    >
+      <template v-slot:btns>
+        <template>
+          <el-table-column label="操作" width="260" fixed="right">
+           <template #default="{ row }">
+
+              <Button
+                size="small"
+                type="primary"
+                style="margin-right: 4px"
+                @click="
+                $refs['create'].setForm(['activity_list_id','pid'],[row.activity_list_id,row.id]);
+                $refs['create'].setId(row.id);
+                $refs['create'].setType('editor');
+                $refs['create'].setOption(listActivity),
+                 $refs['create'].setTree(list),
+                $refs['create'].show();
+                "
+                >编辑</Button
+              >
+              <Button
+                size="small"
+                type="primary"
+                style="margin-right: 4px"
+                @click="
+                $refs['create'].setForm(['activity_list_id','pid'],[select.activity_list_id||'',row.id||0]),
+                $refs['create'].setType('add'),
+                $refs['create'].setOption(listActivity),
+                 $refs['create'].setTree(list),
+                $refs['create'].show()
+                "
+                >子栏目</Button
+              >
+              <Poptip confirm transfer title="确认删除?" @on-ok="deleteitem(row)">
+                <Button size="small" type="error">删除</Button>
+              </Poptip>
+            </template>
+          </el-table-column>
+        </template>
+      </template>
+    </xy-table>
+    <create ref="create" @refresh="load"></create>
+  </div>
+</template>
+
+<script>
+import { index, destroy, show } from "@/api/index";
+import { index as activityIndex } from "@/api/activity/index"
+import create from "./components/create"
+export default {
+  components: {
+    create
+  },
+  data() {
+    return {
+      select: {
+        page: 1,
+        page_size: 9999,
+        with_relations: ['cover'],
+        table_name: "study_columns",
+        activity_list_id: '',
+        filter: [],
+      },
+      listActivity: [],
+      total: 0,
+      list: [],
+      table: [
+        // {
+        //   prop: "activity_list_id",
+        //   label: "所属项目",
+        //   minWidth: 220,
+        //   align: "left",
+        // },
+        {
+          prop: "title",
+          label: "栏目名称",
+          minWidth: 220,
+          align:'left'
+        },
+
+        {
+          prop: "created_at",
+          label: "创建信息",
+          width: 190,
+          formatter: (v1, v2, value) => {
+            return this.$moment(value).format("YYYY-MM-DD HH:mm:ss");
+          },
+        },
+        {
+          prop: "updated_at",
+          label: "更新时间",
+          align: "left",
+          width: 190,
+          formatter: (v1, v2, value) => {
+            return this.$moment(value).format("YYYY-MM-DD HH:mm:ss");
+          },
+        },
+      ],
+    };
+  },
+  methods: {
+    async loadActivity() {
+      const res = await activityIndex({
+        page: 1,
+        page_size: 999,
+      });
+      this.listActivity = res.data;
+    },
+    doSearch() {
+      this.select.page = 1;
+      this.load();
+    },
+
+    pageSizeChange(e) {
+      this.select.page_size = e;
+      this.select.page = 1;
+      this.load();
+    },
+    changeActive(e){
+      if(e){
+        this.select.activity_list_id = e
+        this.load()
+      }
+    },
+    async load() {
+      if(!this.select.activity_list_id){
+        this.$message({
+          type:'warning',
+          message:'请先选择项目'
+        })
+        return
+      }
+      const res = await index(this.select);
+
+      this.total = res.total;
+      this.list = this.arrayToTree(res.data);
+      console.log("list",this.list)
+    },
+    arrayToTree(arr, pid = 0) {
+      const result = [];
+
+      arr.forEach(item => {
+        if (item.pid === pid) {
+          const children = this.arrayToTree(arr, item.id);
+          if (children.length) {
+            item.children = children;
+          }
+          result.push(item);
+        }
+      });
+
+      return result;
+    },
+    deleteitem(row) {
+      destroy({
+        id: row.id,
+        activity_list_id: row.activity_list_id,
+        table_name: 'study_columns'
+      }).then((res) => {
+        this.load();
+        this.$Message.success("操作成功");
+      });
+    },
+    pageChange(e) {
+      this.select.page = e;
+      this.load();
+    },
+  },
+  mounted() {
+    this.load();
+  },
+  created() {
+    this.loadActivity()
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.selects {
+  display: flex;
+  flex-wrap: wrap;
+
+  & > div {
+    margin-bottom: 6px;
+  }
+}
+</style>
diff --git a/src/views/party/components/addStudyResource.vue b/src/views/party/components/addStudyResource.vue
index 173ecc7..cf27212 100644
--- a/src/views/party/components/addStudyResource.vue
+++ b/src/views/party/components/addStudyResource.vue
@@ -4,7 +4,41 @@
     <xy-dialog :is-show.sync="isShow" width="60%" title="学习资料编辑" type="form" :form="detail" :rules="rules"
       @submit="editor" ref="addActivity">
 
-
+      <template v-slot:activity_list_id>
+        <div class="xy-table-item">
+          <div class="xy-table-item-label">
+            <span style="color: red; font-weight: 600; padding-right: 4px">*</span>
+            项目 ：
+          </div>
+          <div class="xy-table-item-content">
+            <el-select @change="changeActive" style="width: 300px" v-model="detail.activity_list_id" placeholder="请选择">
+              <el-option
+                v-for="item in listActivity"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id">
+              </el-option>
+            </el-select>
+          </div>
+        </div>
+      </template>
+      <template v-slot:study_column_id>
+        <div class="xy-table-item">
+          <div class="xy-table-item-label">
+            <span style="color: red; font-weight: 600; padding-right: 4px">*</span>
+            栏目 ：
+          </div>
+          <div class="xy-table-item-content">
+            <el-cascader
+                @change="changeMenu"
+                 style="width: 300px"
+                v-model="detail.study_column_id"
+                :options="menuList"
+                :props="{'label':'title','value':'id',checkStrictly: true }"
+                clearable></el-cascader>
+          </div>
+        </div>
+      </template>
       <template v-slot:title>
         <div class="xy-table-item">
           <div class="xy-table-item-label">
@@ -122,7 +156,7 @@
     show,
     index
   } from "@/api/party/studyResource";
-
+import { index as menulist} from "@/api/index";
   import tinymce from "@/components/Tinymce"
   export default {
     components: {
@@ -139,9 +173,11 @@
         listParty: [],
         isShow: false,
         id: "",
-        type: "add",
+        type: "add",
+        menuList:[],
         detail: {
-          activity_list_id: "",
+          activity_list_id: "",
+          study_column_id:'',
           title: "",
           text: "",
           myindex: 1,
@@ -165,7 +201,7 @@
           }],
           activity_list_id: [{
             required: true,
-            message: "选择类型"
+            message: "选择所属项目"
           }]
         }
 
@@ -186,7 +222,55 @@
         }
       }
     },
-    methods: {
+    methods: {
+      // 获取栏目
+      changeMenu(e){
+        console.log(e,e.at(-1))
+        if(e){
+          this.detail.study_column_id = e.at(-1)
+        }
+      },
+      changeActive(e){
+        if(e){
+          this.detail.activity_list_id = e
+          this.loadMenu()
+        }
+      },
+      async loadMenu() {
+        if(!this.detail.activity_list_id){
+          this.$message({
+            type:'warning',
+            message:'请先选择项目'
+          })
+          return
+        }
+        const res = await menulist({
+          page: 1,
+          page_size: 999,
+          with_relations: ['cover'],
+          table_name: "study_columns",
+          activity_list_id: this.detail.activity_list_id,
+          filter: [],
+        });
+
+        this.menuList = this.arrayToTree(res.data);
+        console.log("list",this.menuList)
+      },
+      arrayToTree(arr, pid = 0) {
+        const result = [];
+
+        arr.forEach(item => {
+          if (item.pid === pid) {
+            const children = this.arrayToTree(arr, item.id);
+            if (children.length) {
+              item.children = children;
+            }
+            result.push(item);
+          }
+        });
+
+        return result;
+      },
       //上传
       uploadFailAuto(err) {
         console.log(err)
@@ -236,10 +320,12 @@
           id: this.id
         })
         Object.assign(this.detail, res);
-
+        this.loadMenu()
         this.$refs['tinymce'].setContent(res.text ?? ' ')
       },
-      editor() {
+      editor() {
+        console.log("this.detail",this.detail)
+        // return
         save(this.detail).then(res => {
           this.isShow = false
           this.$Message.success("操作成功");
diff --git a/src/views/party/studyResource.vue b/src/views/party/studyResource.vue
index c15b10d..7a5d8ab 100644
--- a/src/views/party/studyResource.vue
+++ b/src/views/party/studyResource.vue
@@ -68,6 +68,10 @@
         total: 0,
         list: [],
         table: [{
+            prop: 'activity_list.name',
+            label: '项目',
+            align: 'left',
+          },{
             prop: 'title',
             label: '标题',
             align: 'left',