修改大事件和家族园地模块

src/views/system/events/index.vue

@@ -1,7 +1,13 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
-      <el-form-item label="家族" prop="familyId" v-if="!familyName">
+    <el-form
+      :model="queryParams"
+      ref="queryForm"
+      :inline="true"
+      v-show="showSearch"
+      label-width="68px"
+    >
+      <!-- <el-form-item label="家族" prop="familyId" v-if="!familyName">
         <el-select v-model="queryParams.familyId" placeholder="请选择家族" clearable size="small">
           <el-option
             v-for="item in familyOptions"
@@ -10,9 +16,9 @@
             :value="item.id"
           />
         </el-select>
-      </el-form-item>
-       <el-form-item  v-else label="家族名称">
-      <span>{{familyName}}</span>
+      </el-form-item> -->
+      <el-form-item label="家族名称" prop="familyId">
+        <span v-if="family">{{ family.fullName }}</span>
       </el-form-item>
       <el-form-item>
         <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
@@ -108,7 +114,7 @@
     <!-- 添加或修改家族大事件对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="家族" prop="familyId">
+        <!-- <el-form-item label="家族" prop="familyId">
           <el-select v-model="form.familyId" placeholder="请选择家族">
             <el-option
             v-for="item in familyOptions"
@@ -117,6 +123,9 @@
             :value="item.id"
           />
           </el-select>
+        </el-form-item> -->
+       <el-form-item label="家族" prop="familyId">
+          <el-tag v-model="form.familyId"><span v-if="family">{{ family.fullName }}</span></el-tag>
         </el-form-item>
         <el-form-item label="事件标题" prop="title">
           <el-input v-model="form.title" type="textarea" placeholder="请输入内容" />
@@ -141,11 +150,18 @@
 
 <script>
 import { listEvents, getEvents, delEvents, addEvents, updateEvents, exportEvents } from "@/api/system/events";
-import { listFamily} from "@/api/system/family";
+import { listFamily, getFamily } from "@/api/system/family";
 
 export default {
   name: "Events",
   data() {
+     var validatefamilyId = (rule, value, callback) => {
+        if (value == '' || value<=0 || value == null || value == undefined) {
+          callback(new Error('家族不能为空'));
+        } else{
+          callback();
+        }
+      };
     return {
       // 遮罩层
       loading: true,
@@ -173,13 +189,15 @@ export default {
         title: null,
       },
       // 表单参数
-      form: {},
+      form: { id: undefined },
       // 表单校验
       rules: {
+        title: [{ required: true, message: "标题不能为空", trigger: "blur" }],
+        familyId: [{ validator:validatefamilyId, trigger: "blur" }],
       },
-       familyId:undefined,
-      familyName:undefined,
-      familyOptions:[],
+      familyId: undefined,
+      family: undefined,
+      familyOptions: [],
     };
   },
   activated() {
@@ -191,12 +209,23 @@ export default {
   },
   methods: {
     init(){
-      this.familyId=this.$route.query.fid;
-      this.familyName=this.$route.query.fname;
-      this.queryParams.familyId = this.familyId 
-      this.getList();
+    this.familyId = this.$route.query.fid;
+      if (this.familyId) {
+        this.queryParams.familyId = this.familyId;
+        this.getFamilyById(this.familyId);
+         this.getList();
+      }else{
+        this.loading = false;
+      }
     },
 
+    /**获取单个家族信息 */
+    getFamilyById(_familyId) {
+      getFamily(_familyId).then((res) => {
+        this.family = res.data;
+      });
+    },
+    
     //获取家族列表
     getFamilyOptions(){
       var _params= {

src/views/system/family/index.vue

@@ -158,6 +158,22 @@
           <el-button
             size="mini"
             type="text"
+            icon="el-icon-edit"
+            @click="familyEvents(scope.row)"
+            v-hasPermi="['system:events:list']"
+            >大事件</el-button
+          >
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-menu"
+            @click="familyGarden(scope.row)"
+            v-hasPermi="['system:garden:list']"
+            >家族园地</el-button
+          >
+          <el-button
+            size="mini"
+            type="text"
             icon="el-icon-delete"
             @click="handleDelete(scope.row)"
             v-hasPermi="['system:family:remove']"
@@ -482,7 +498,23 @@ export default {
           fid: _row.id
         }
       });
-    }
+    },
+    familyEvents(_row) {
+      this.$router.push({
+        path: "/family/events",
+        query: {
+          fid: _row.id
+        }
+      });
+    },
+    familyGarden(_row) {
+      this.$router.push({
+        path: "/family/garden",
+        query: {
+          fid: _row.id
+        }
+      });
+    },
   }
 };
 </script>

src/views/system/garden/index.vue

@@ -1,7 +1,13 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
-       <el-form-item label="家族" prop="familyId" v-if="!familyName">
+    <el-form
+      :model="queryParams"
+      ref="queryForm"
+      :inline="true"
+      v-show="showSearch"
+      label-width="68px"
+    >
+       <!-- <el-form-item label="家族" prop="familyId" v-if="!familyName">
         <el-select v-model="queryParams.familyId" placeholder="请选择家族" clearable size="small">
           <el-option
             v-for="item in familyOptions"
@@ -10,9 +16,9 @@
             :value="item.id"
           />
         </el-select>
-      </el-form-item>
-       <el-form-item  v-else label="家族名称">
-      <span>{{familyName}}</span>
+      </el-form-item> -->
+       <el-form-item label="家族名称" prop="familyId">
+        <span v-if="family">{{ family.fullName }}</span>
       </el-form-item>
       <el-form-item>
         <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
@@ -104,7 +110,7 @@
     <!-- 添加或修改家族园地对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="家族" prop="familyId">
+        <!-- <el-form-item label="家族" prop="familyId">
           <el-select v-model="form.familyId" placeholder="请选择家族">
             <el-option
             v-for="item in familyOptions"
@@ -113,12 +119,15 @@
             :value="item.id"
           />
           </el-select>
+        </el-form-item> -->
+        <el-form-item label="家族" prop="familyId">
+          <el-tag v-model="form.familyId"><span v-if="family">{{ family.fullName }}</span></el-tag>
         </el-form-item>
         <el-form-item label="园地标题" prop="title">
           <el-input v-model="form.title" type="textarea" placeholder="请输入内容" />
         </el-form-item>
         <el-form-item label="园地内容" prop="contents">
-          <el-input v-model="form.contents" type="textarea" placeholder="请输入内容" />
+          <editor v-model="form.contents" :min-height="192"/>
         </el-form-item>
         <el-form-item label="排序号" prop="sort">
           <el-input v-model="form.sort" placeholder="请输入排序号" />
@@ -137,11 +146,20 @@
 
 <script>
 import { listGarden, getGarden, delGarden, addGarden, updateGarden, exportGarden } from "@/api/system/garden";
-import { listFamily} from "@/api/system/family";
+import { listFamily, getFamily } from "@/api/system/family";
+import Editor from '@/components/Editor';
 
 export default {
   name: "Garden",
+  components: { Editor },
   data() {
+    var validatefamilyId = (rule, value, callback) => {
+        if (value == '' || value<=0 || value == null || value == undefined) {
+          callback(new Error('家族不能为空'));
+        } else{
+          callback();
+        }
+      };
     return {
       // 遮罩层
       loading: true,
@@ -169,9 +187,11 @@ export default {
         title: null,
       },
       // 表单参数
-      form: {},
+      form: { id: undefined },
       // 表单校验
       rules: {
+        title: [{ required: true, message: "标题不能为空", trigger: "blur" }],
+        familyId: [{ validator:validatefamilyId, trigger: "blur" }],
       },
        familyId:undefined,
       familyName:undefined,
@@ -188,10 +208,21 @@ export default {
   methods: {
 
     init(){
-      this.familyId=this.$route.query.fid;
-      this.familyName=this.$route.query.fname;
-      this.queryParams.familyId = this.familyId 
-      this.getList();
+     this.familyId = this.$route.query.fid;
+      if (this.familyId) {
+        this.queryParams.familyId = this.familyId;
+        this.getFamilyById(this.familyId);
+         this.getList();
+      }else{
+        this.loading = false;
+      }
+    },
+
+    /**获取单个家族信息 */
+    getFamilyById(_familyId) {
+      getFamily(_familyId).then((res) => {
+        this.family = res.data;
+      });
     },
 
     //获取家族列表