添加相册相片功能

src/api/system/album.js → src/api/system/family/album.js

@@ -3,7 +3,7 @@ import request from '@/utils/request'
 // 查询家族相簿列表
 export function listAlbum(query) {
   return request({
-    url: '/system/album/list',
+    url: '/system/family/album/list',
     method: 'get',
     params: query
   })
@@ -12,7 +12,7 @@ export function listAlbum(query) {
 // 查询家族相簿详细
 export function getAlbum(id) {
   return request({
-    url: '/system/album/' + id,
+    url: '/system/family/album/' + id,
     method: 'get'
   })
 }
@@ -20,7 +20,7 @@ export function getAlbum(id) {
 // 新增家族相簿
 export function addAlbum(data) {
   return request({
-    url: '/system/album',
+    url: '/system/family/album',
     method: 'post',
     data: data
   })
@@ -29,7 +29,7 @@ export function addAlbum(data) {
 // 修改家族相簿
 export function updateAlbum(data) {
   return request({
-    url: '/system/album',
+    url: '/system/family/album',
     method: 'put',
     data: data
   })
@@ -38,7 +38,7 @@ export function updateAlbum(data) {
 // 删除家族相簿
 export function delAlbum(id) {
   return request({
-    url: '/system/album/' + id,
+    url: '/system/family/album/' + id,
     method: 'delete'
   })
 }
@@ -46,7 +46,7 @@ export function delAlbum(id) {
 // 导出家族相簿
 export function exportAlbum(query) {
   return request({
-    url: '/system/album/export',
+    url: '/system/family/album/export',
     method: 'get',
     params: query
   })

src/api/system/family/photo.js

@@ -0,0 +1,53 @@
+import request from '@/utils/request'
+
+// 查询家族相簿照片列表
+export function listPhoto(query) {
+  return request({
+    url: '/system/family/photo/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询家族相簿照片详细
+export function getPhoto(id) {
+  return request({
+    url: '/system/family/photo/' + id,
+    method: 'get'
+  })
+}
+
+// 新增家族相簿照片
+export function addPhoto(data) {
+  return request({
+    url: '/system/family/photo',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改家族相簿照片
+export function updatePhoto(data) {
+  return request({
+    url: '/system/family/photo',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除家族相簿照片
+export function delPhoto(id) {
+  return request({
+    url: '/system/family/photo/' + id,
+    method: 'delete'
+  })
+}
+
+// 导出家族相簿照片
+export function exportPhoto(query) {
+  return request({
+    url: '/system/family/photo/export',
+    method: 'get',
+    params: query
+  })
+}

src/views/system/album/index.vue

@@ -1,369 +0,0 @@
-<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-select v-model="queryParams.familyId" placeholder="请选择家族" clearable size="small">
-          <!-- <el-option label="请选择字典生成" value="" /> -->
-           <el-option
-            v-for="item in familyOptions"
-            :key="'f'+item.id"
-            :label="item.fullName"
-            :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="status">
-        <el-select v-model="queryParams.status" placeholder="请选择状态" clearable size="small">
-          <el-option
-            v-for="dict in statusOptions"
-            :key="dict.dictValue"
-            :label="dict.dictLabel"
-            :value="dict.dictValue"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item>
-        <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-      </el-form-item>
-    </el-form>
-
-    <el-row :gutter="10" class="mb8">
-      <el-col :span="1.5">
-        <el-button
-          type="primary"
-          icon="el-icon-plus"
-          size="mini"
-          @click="handleAdd"
-          v-hasPermi="['system:album:add']"
-        >新增</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="success"
-          icon="el-icon-edit"
-          size="mini"
-          :disabled="single"
-          @click="handleUpdate"
-          v-hasPermi="['system:album:edit']"
-        >修改</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="danger"
-          icon="el-icon-delete"
-          size="mini"
-          :disabled="multiple"
-          @click="handleDelete"
-          v-hasPermi="['system:album:remove']"
-        >删除</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="warning"
-          icon="el-icon-download"
-          size="mini"
-          @click="handleExport"
-          v-hasPermi="['system:album:export']"
-        >导出</el-button>
-      </el-col>
-	  <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
-    </el-row>
-
-    <el-table v-loading="loading" :data="albumList" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="ID" align="center" prop="id" v-if="false"/>
-      <el-table-column label="家族" align="center" prop="familyId" >
-        <template slot-scope="scope">
-          <span>{{scope.row.family.fullName}}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="相簿标题名称" align="center" prop="title" />
-      <el-table-column label="相簿描述" align="center" prop="contents" />
-      <el-table-column label="封面图片" align="center" prop="url" />
-      <el-table-column label="备注" align="center" prop="remark" />
-      <el-table-column label="状态" align="center" prop="status" :formatter="statusFormat" />
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-        <template slot-scope="scope">
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-edit"
-            @click="handleUpdate(scope.row)"
-            v-hasPermi="['system:album:edit']"
-          >修改</el-button>
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-delete"
-            @click="handleDelete(scope.row)"
-            v-hasPermi="['system:album:remove']"
-          >删除</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-    
-    <pagination
-      v-show="total>0"
-      :total="total"
-      :page.sync="queryParams.pageNum"
-      :limit.sync="queryParams.pageSize"
-      @pagination="getList"
-    />
-
-    <!-- 添加或修改家族相簿对话框 -->
-    <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-select v-model="form.familyId" v-if="!familyName" placeholder="请选择家族">
-            <el-option
-            v-for="item in familyOptions"
-            :key="'f'+item.id"
-            :label="item.fullName"
-            :value="item.id"
-          />
-          </el-select>
-          <el-tag v-else>{{familyName}}</el-tag>
-        </el-form-item>
-        <el-form-item label="相簿标题名称" prop="title">
-          <el-input v-model="form.title"  placeholder="请输入内容" />
-        </el-form-item>
-        <el-form-item label="相簿描述" prop="contents">
-          <el-input v-model="form.contents" type="textarea" placeholder="请输入相簿描述" />
-        </el-form-item>
-        <el-form-item label="封面图片" prop="url">
-          <!-- <el-input v-model="form.url" placeholder="请输入默认图片url(应该获取第一张图片作为默认)" /> -->
-        </el-form-item>
-        <el-form-item label="备注" prop="remark">
-          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
-        </el-form-item>
-        <el-form-item label="状态" prop="status">
-          <el-select v-model="form.status" placeholder="请选择状态">
-            <el-option
-              v-for="dict in statusOptions"
-              :key="dict.dictValue"
-              :label="dict.dictLabel"
-              :value="dict.dictValue"
-            ></el-option>
-          </el-select>
-        </el-form-item>
-        
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitForm">确 定</el-button>
-        <el-button @click="cancel">取 消</el-button>
-      </div>
-    </el-dialog>
-  </div>
-</template>
-
-<script>
-import { listAlbum, getAlbum, delAlbum, addAlbum, updateAlbum, exportAlbum } from "@/api/system/album";
-import { listFamily} from "@/api/system/family";
-export default {
-  name: "Album",
-  data() {
-    return {
-      // 遮罩层
-      loading: true,
-      // 选中数组
-      ids: [],
-      // 非单个禁用
-      single: true,
-      // 非多个禁用
-      multiple: true,
-      // 显示搜索条件
-      showSearch: true,
-      // 总条数
-      total: 0,
-      // 家族相簿表格数据
-      albumList: [],
-      // 弹出层标题
-      title: "",
-      // 是否显示弹出层
-      open: false,
-      // 状态字典
-      statusOptions: [],
-      // 查询参数
-      queryParams: {
-        pageNum: 1,
-        pageSize: 10,
-        familyId: null,
-        title: null,
-        status: null,
-      },
-      // 表单参数
-      form: {},
-      // 表单校验
-      rules: {
-      },
-      familyId:undefined,
-      familyName:undefined,
-      familyOptions:[],
-
-    };
-  },
-  activated() {
-    this.init()
-  },
-  mounted () {
-    this.init();
-    this.getDicts("sys_show_hide").then(response => {
-      this.statusOptions = response.data;
-    });
-    this.getFamilyOptions();
-  },
-  methods: {
-
-    init(){
-      this.familyId=this.$route.query.fid;
-      this.familyName=this.$route.query.fname;
-      this.queryParams.familyId = this.familyId 
-      this.getList();
-    },
-
-    //获取家族列表
-    getFamilyOptions(){
-      var _params= {
-        pageNum: 1,
-        pageSize: 10000000,
-        
-      }
-      listFamily(_params).then(res=>{
-       
-        if(res.code == 200){
-          this.familyOptions = res.rows
-        }
-      })
-
-    },
-
-    /** 查询家族相簿列表 */
-    getList() {
-      this.loading = true;
-      listAlbum(this.queryParams).then(response => {
-        this.albumList = response.rows;
-        this.total = response.total;
-        this.loading = false;
-      });
-    },
-    // 状态字典翻译
-    statusFormat(row, column) {
-      return this.selectDictLabel(this.statusOptions, row.status);
-    },
-    // 取消按钮
-    cancel() {
-      this.open = false;
-      this.reset();
-    },
-    // 表单重置
-    reset() {
-      this.form = {
-        id: null,
-        familyId: null,
-        title: null,
-        contents: null,
-        url: null,
-        createBy: null,
-        createTime: null,
-        updateBy: null,
-        updateTime: null,
-        remark: null,
-        status: null,
-        delFlag: null
-      };
-      this.resetForm("form");
-    },
-    /** 搜索按钮操作 */
-    handleQuery() {
-      this.queryParams.pageNum = 1;
-      this.getList();
-    },
-    /** 重置按钮操作 */
-    resetQuery() {
-      this.resetForm("queryForm");
-      this.handleQuery();
-    },
-    // 多选框选中数据
-    handleSelectionChange(selection) {
-      this.ids = selection.map(item => item.id)
-      this.single = selection.length!==1
-      this.multiple = !selection.length
-    },
-    /** 新增按钮操作 */
-    handleAdd() {
-      this.reset();
-      this.open = true;
-      this.title = "添加家族相簿";
-      this.$nextTick(()=>{
-        this.form.familyId =this.familyId
-      })
-      
-    },
-    /** 修改按钮操作 */
-    handleUpdate(row) {
-      this.reset();
-      const id = row.id || this.ids
-      getAlbum(id).then(response => {
-        this.form = response.data;
-        this.open = true;
-        this.title = "修改家族相簿";
-      });
-    },
-    /** 提交按钮 */
-    submitForm() {
-      this.$refs["form"].validate(valid => {
-        if (valid) {
-          if (this.form.id != null) {
-            updateAlbum(this.form).then(response => {
-              if (response.code === 200) {
-                this.msgSuccess("修改成功");
-                this.open = false;
-                this.getList();
-              }
-            });
-          } else {
-            addAlbum(this.form).then(response => {
-              if (response.code === 200) {
-                this.msgSuccess("新增成功");
-                this.open = false;
-                this.getList();
-              }
-            });
-          }
-        }
-      });
-    },
-    /** 删除按钮操作 */
-    handleDelete(row) {
-      const ids = row.id || this.ids;
-      this.$confirm('是否确认删除家族相簿编号为"' + ids + '"的数据项?', "警告", {
-          confirmButtonText: "确定",
-          cancelButtonText: "取消",
-          type: "warning"
-        }).then(function() {
-          return delAlbum(ids);
-        }).then(() => {
-          this.getList();
-          this.msgSuccess("删除成功");
-        }).catch(function() {});
-    },
-    /** 导出按钮操作 */
-    handleExport() {
-      const queryParams = this.queryParams;
-      this.$confirm('是否确认导出所有家族相簿数据项?', "警告", {
-          confirmButtonText: "确定",
-          cancelButtonText: "取消",
-          type: "warning"
-        }).then(function() {
-          return exportAlbum(queryParams);
-        }).then(response => {
-          this.download(response.msg);
-        }).catch(function() {});
-    }
-  }
-};
-</script>

src/views/system/family/album/index.vue

@@ -0,0 +1,549 @@
+<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="familyId == 0">
+        <el-select
+          v-model="queryParams.familyId"
+          placeholder="请选择家族"
+          clearable
+          size="small">
+          <el-option
+            v-for="item in familyOptions"
+            :key="'f' + item.id"
+            :label="item.fullName"
+            :value="item.id"
+          />
+        </el-select>
+      </el-form-item> -->
+      <el-form-item label="家族名称" prop="familyId">
+        <span v-if="family">{{ family.fullName }}</span>
+      </el-form-item>
+      <el-form-item label="状态" prop="status">
+        <el-select
+          v-model="queryParams.status"
+          placeholder="请选择状态"
+          clearable
+          size="small"
+        >
+          <el-option
+            v-for="dict in statusOptions"
+            :key="dict.dictValue"
+            :label="dict.dictLabel"
+            :value="dict.dictValue"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button
+          type="cyan"
+          icon="el-icon-search"
+          size="mini"
+          @click="handleQuery"
+          >搜索</el-button
+        >
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
+          >重置</el-button
+        >
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="primary"
+          icon="el-icon-plus"
+          size="mini"
+          @click="handleAdd"
+          v-hasPermi="['system:album:add']"
+          >新增</el-button
+        >
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="success"
+          icon="el-icon-edit"
+          size="mini"
+          :disabled="single"
+          @click="handleUpdate"
+          v-hasPermi="['system:album:edit']"
+          >修改</el-button
+        >
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="danger"
+          icon="el-icon-delete"
+          size="mini"
+          :disabled="multiple"
+          @click="handleDelete"
+          v-hasPermi="['system:album:remove']"
+          >删除</el-button
+        >
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="warning"
+          icon="el-icon-download"
+          size="mini"
+          @click="handleExport"
+          v-hasPermi="['system:album:export']"
+          >导出</el-button
+        >
+      </el-col>
+      <right-toolbar
+        :showSearch.sync="showSearch"
+        @queryTable="getList"
+      ></right-toolbar>
+    </el-row>
+
+    <el-table
+      v-loading="loading"
+      :data="albumList"
+      @selection-change="handleSelectionChange"
+    >
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="ID" align="center" prop="id" v-if="false" />
+      <el-table-column label="家族" align="center" prop="familyId">
+        <template slot-scope="scope">
+          <span v-if="scope.row.family">{{ scope.row.family.fullName }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="相簿名称" align="center" prop="title">
+        <template slot-scope="scope">
+          <el-link type="primary" @click.native="goPhoto(scope.row)">{{
+            scope.row.title
+          }}</el-link>
+        </template>
+      </el-table-column>
+      <el-table-column label="相簿描述" align="center" prop="contents" />
+      <el-table-column label="封面图片" align="center" prop="url">
+        <template slot-scope="scope">
+          <el-image
+            class="lsw_square"
+            :fit="'contain'"
+            style="max-width: 80px; border-radius: 20%"
+            :src="scope.row.url"
+            :preview-src-list="[scope.row.url]"
+          >
+            <div slot="error" class="image-slot">
+              <i class="el-icon-picture-outline"></i>
+            </div>
+          </el-image>
+        </template>
+      </el-table-column>
+      <el-table-column label="备注" align="center" prop="remark" />
+      <el-table-column
+        label="状态"
+        align="center"
+        prop="status"
+        :formatter="statusFormat"
+      />
+      <el-table-column
+        label="操作"
+        align="center"
+        class-name="small-padding fixed-width"
+      >
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleUpdate(scope.row)"
+            v-hasPermi="['system:album:edit']"
+            >修改</el-button
+          >
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            @click="handleDelete(scope.row)"
+            v-hasPermi="['system:album:remove']"
+            >删除</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+
+    <!-- 添加或修改家族相簿对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
+        <!-- <el-form-item label="家族" prop="familyId">
+          <el-select
+            v-model="form.familyId"
+            v-if="!family"
+            @change="familySelect"
+            placeholder="请选择家族"
+          >
+            <el-option
+              v-for="item in familyOptions"
+              :key="'f' + item.id"
+              :label="item.fullName"
+              :value="item.id"
+            />
+          </el-select>
+          <el-tag v-else
+            ><span v-if="family">{{ family.fullName }}</span></el-tag
+          >
+        </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" placeholder="请输入内容" />
+        </el-form-item>
+        <el-form-item label="相簿描述" prop="contents">
+          <el-input
+            v-model="form.contents"
+            type="textarea"
+            placeholder="请输入相簿描述"
+          />
+        </el-form-item>
+        <el-form-item label="封面图片" prop="url">
+          <!-- <el-input v-model="form.url" placeholder="请输入默认图片url(应该获取第一张图片作为默认)" /> -->
+          <el-button icon="el-icon-scissors" @click="getImg()"
+            >选取图片</el-button
+          >
+          <el-image
+            v-if="form.url"
+            :fit="'contain'"
+            style="
+              max-width: 50%;
+              display: block;
+              margin-top: 10px;
+              border-radius: 20%;
+            "
+            :src="form.url"
+            :preview-src-list="[form.url]"
+          ></el-image>
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input
+            v-model="form.remark"
+            type="textarea"
+            placeholder="请输入内容"
+          />
+        </el-form-item>
+        <el-form-item label="状态" prop="status">
+          <el-select v-model="form.status" placeholder="请选择状态">
+            <el-option
+              v-for="dict in statusOptions"
+              :key="dict.dictValue"
+              :label="dict.dictLabel"
+              :value="dict.dictValue"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+    <!-- 剪裁图片对话框 -->
+    <cropper
+      v-if="showImg"
+      ref="upload"
+      @img="setImg"
+      :fixed_number="fixedNumber"
+      :mod-name="modName"
+    ></cropper>
+  </div>
+</template>
+
+<script>
+import {
+  listAlbum,
+  getAlbum,
+  delAlbum,
+  addAlbum,
+  updateAlbum,
+  exportAlbum,
+} from "@/api/system/family/album";
+import { listFamily, getFamily } from "@/api/system/family";
+import cropper from "@/components/cropper";
+export default {
+  name: "Album",
+  components: {
+    cropper,
+  },
+  data() {
+    var validatefamilyId = (rule, value, callback) => {
+        if (value == '' || value<=0 || value == null || value == undefined) {
+          callback(new Error('家族不能为空'));
+        } else{
+          callback();
+        }
+      };
+    return {
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 家族相簿表格数据
+      albumList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 状态字典
+      statusOptions: [],
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        familyId: null,
+        title: null,
+        status: null,
+      },
+      // 表单参数
+      form: { id: undefined },
+      // 表单校验
+      rules: {
+        title: [{ required: true, message: "标题不能为空", trigger: "blur" }],
+        familyId: [{ validator:validatefamilyId, trigger: "blur" }],
+      },
+      familyId: undefined,
+      family: undefined,
+      familyOptions: [],
+      // 图片裁剪比例
+      fixedNumber: [1, 1],
+      showImg: false,
+      modName: "family",
+    };
+  },
+  activated() {
+    this.init();
+  },
+  mounted() {
+    this.init();
+    this.getDicts("sys_show_hide").then((response) => {
+      this.statusOptions = response.data;
+    });
+    this.getFamilyOptions();
+  },
+  methods: {
+    init() {
+      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 = {
+        pageNum: 1,
+        pageSize: 10000000,
+      };
+      listFamily(_params).then((res) => {
+        if (res.code == 200) {
+          this.familyOptions = res.rows;
+        }
+      });
+    },
+
+    /** 查询家族相簿列表 */
+    getList() {
+      this.loading = true;
+      listAlbum(this.queryParams).then((response) => {
+        this.albumList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+    // 状态字典翻译
+    statusFormat(row, column) {
+      return this.selectDictLabel(this.statusOptions, row.status);
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        id: null,
+        familyId: null,
+        title: null,
+        contents: null,
+        url: null,
+        createBy: null,
+        createTime: null,
+        updateBy: null,
+        updateTime: null,
+        remark: null,
+        status: null,
+        delFlag: null,
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map((item) => item.id);
+      this.single = selection.length !== 1;
+      this.multiple = !selection.length;
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset();
+      this.open = true;
+      this.title = "添加家族相簿";
+      this.$nextTick(() => {
+        if (this.family) {
+          this.form.familyId = this.family.id;
+        }
+      });
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      const id = row.id || this.ids;
+      getAlbum(id).then((response) => {
+        this.form = response.data;
+        this.open = true;
+        this.title = "修改家族相簿";
+      });
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs["form"].validate((valid) => {
+        if (valid) {
+          if (this.form.id != null) {
+            updateAlbum(this.form).then((response) => {
+              if (response.code === 200) {
+                this.msgSuccess("修改成功");
+                this.open = false;
+                this.getList();
+              }
+            });
+          } else {
+            addAlbum(this.form).then((response) => {
+              if (response.code === 200) {
+                this.msgSuccess("新增成功");
+                this.open = false;
+                this.getList();
+              }
+            });
+          }
+        }
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const ids = row.id || this.ids;
+      this.$confirm(
+        '是否确认删除家族相簿编号为"' + ids + '"的数据项?',
+        "警告",
+        {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning",
+        }
+      )
+        .then(function () {
+          return delAlbum(ids);
+        })
+        .then(() => {
+          this.getList();
+          this.msgSuccess("删除成功");
+        })
+        .catch(function () {});
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      const queryParams = this.queryParams;
+      this.$confirm("是否确认导出所有家族相簿数据项?", "警告", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(function () {
+          return exportAlbum(queryParams);
+        })
+        .then((response) => {
+          this.download(response.msg);
+        })
+        .catch(function () {});
+    },
+    //选取图片
+    getImg() {
+      //设置模块id
+      this.modName += "/" + this.family.code;
+
+      this.showImg = true;
+      this.$nextTick(() => {
+        this.$refs.upload.editCropper();
+      });
+    },
+    //设置图片
+    setImg(img) {
+      this.form.url = img;
+    },
+    //新增修改时选择家族后
+    familySelect(nval) {
+      this.familyOptions.forEach((item) => {
+        if (item.id == nval) {
+          this.family = item;
+          return;
+        }
+      });
+      console.log(this.family);
+    },
+    //跳转到相册内容
+    goPhoto(item) {
+      // console.log(item);
+      this.$router.push({
+        path: "/family/photo",
+        query: {
+          fid: item.familyId,
+          albid: item.id,
+        },
+      });
+    },
+  },
+};
+</script>

src/views/system/family/index.vue

@@ -479,8 +479,7 @@ export default {
       this.$router.push({
         path: "/family/album",
         query: {
-          fid: _row.id,
-          fname: _row.fullName
+          fid: _row.id
         }
       });
     }

src/views/system/family/photo/index.vue

@@ -0,0 +1,551 @@
+<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">
+        <!-- <el-select
+          v-model="queryParams.familyId"
+          placeholder="请选择家族"
+          clearable
+          size="small"
+        >
+          <el-option label="请选择字典生成" value="" />
+        </el-select> -->
+        <el-tag v-if="family"
+          ><span>{{ family.fullName }}</span></el-tag
+        >
+      </el-form-item>
+      <el-form-item label="相簿" prop="albumId">
+        <!-- <el-select
+          v-model="queryParams.albumId"
+          placeholder="请选择相簿"
+          clearable
+          size="small"
+        >
+          <el-option label="请选择字典生成" value="" />
+        </el-select> -->
+        <el-tag v-if="album" type="danger"
+          ><span>{{ album.title }}</span></el-tag
+        >
+      </el-form-item>
+
+      <el-form-item label="状态" prop="status">
+        <el-select
+          v-model="queryParams.status"
+          placeholder="请选择状态"
+          clearable
+          size="small"
+        >
+          <el-option
+            v-for="dict in statusOptions"
+            :key="dict.dictValue"
+            :label="dict.dictLabel"
+            :value="dict.dictValue"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button
+          type="cyan"
+          icon="el-icon-search"
+          size="mini"
+          @click="handleQuery"
+          >搜索</el-button
+        >
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
+          >重置</el-button
+        >
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="primary"
+          icon="el-icon-plus"
+          size="mini"
+          @click="handleAdd"
+          v-hasPermi="['system:familyPhoto:add']"
+          >新增</el-button
+        >
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="success"
+          icon="el-icon-edit"
+          size="mini"
+          :disabled="single"
+          @click="handleUpdate"
+          v-hasPermi="['system:familyPhoto:edit']"
+          >修改</el-button
+        >
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="danger"
+          icon="el-icon-delete"
+          size="mini"
+          :disabled="multiple"
+          @click="handleDelete"
+          v-hasPermi="['system:familyPhoto:remove']"
+          >删除</el-button
+        >
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="warning"
+          icon="el-icon-download"
+          size="mini"
+          @click="handleExport"
+          v-hasPermi="['system:familyPhoto:export']"
+          >导出</el-button
+        >
+      </el-col>
+      <right-toolbar
+        :showSearch.sync="showSearch"
+        @queryTable="getList"
+      ></right-toolbar>
+    </el-row>
+
+    <el-table
+      v-loading="loading"
+      :data="photoList"
+      @selection-change="handleSelectionChange"
+    >
+      <el-table-column type="selection" width="55" align="center" />
+      <!-- <el-table-column label="ID" align="center" prop="id" v-if="false" />
+      <el-table-column label="家族" align="center" prop="familyId" />
+      <el-table-column label="相簿" align="center" prop="albumId" /> -->
+      <el-table-column label="url" align="center" prop="url">
+        <template slot-scope="scope">
+          <el-image
+            class="lsw_square"
+            :fit="'contain'"
+            style="max-width: 80px; border-radius: 20%"
+            :src="scope.row.url"
+            :preview-src-list="[scope.row.url]"
+          >
+            <div slot="error" class="image-slot">
+              <i class="el-icon-picture-outline"></i>
+            </div>
+          </el-image>
+        </template>
+      </el-table-column>
+      <el-table-column label="标题" align="center" prop="title" />
+
+      <el-table-column label="备注" align="center" prop="remark" />
+      <el-table-column
+        label="状态"
+        align="center"
+        prop="status"
+        :formatter="statusFormat"
+      />
+      <el-table-column
+        label="操作"
+        align="center"
+        class-name="small-padding fixed-width"
+      >
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleUpdate(scope.row)"
+            v-hasPermi="['system:familyPhoto:edit']"
+            >修改</el-button
+          >
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            @click="handleDelete(scope.row)"
+            v-hasPermi="['system:familyPhoto:remove']"
+            >删除</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+
+    <!-- 添加或修改家族相簿照片对话框 -->
+    <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-select v-model="form.familyId" placeholder="请选择家族">
+            <el-option label="请选择字典生成" value="" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="相簿" prop="albumId">
+          <el-select v-model="form.albumId" placeholder="请选择相簿">
+            <el-option label="请选择字典生成" value="" />
+          </el-select>
+        </el-form-item> -->
+
+        <el-form-item label="图片" prop="url">
+          <!-- <el-input v-model="form.url" placeholder="请输入url" /> -->
+          <el-upload
+            class="avatar-uploader"
+            action="#"
+            :http-request="requestUpload"
+            :show-file-list="false"
+            :before-upload="beforeAvatarUpload"
+          >
+            <img v-if="form.url" :src="form.url" class="avatar" />
+            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+          </el-upload>
+        </el-form-item>
+        <el-form-item label="标题" prop="title">
+          <el-input v-model="form.title" placeholder="请输入内容" />
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input
+            v-model="form.remark"
+            type="textarea"
+            placeholder="请输入内容"
+          />
+        </el-form-item>
+        <el-form-item label="状态" prop="status">
+          <el-select v-model="form.status" placeholder="请选择状态">
+            <el-option
+              v-for="dict in statusOptions"
+              :key="dict.dictValue"
+              :label="dict.dictLabel"
+              :value="dict.dictValue"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <!-- <el-form-item label="删除标志" prop="delFlag">
+          <el-input v-model="form.delFlag" placeholder="请输入删除标志" />
+        </el-form-item> -->
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import {
+  listPhoto,
+  getPhoto,
+  delPhoto,
+  addPhoto,
+  updatePhoto,
+  exportPhoto,
+} from "@/api/system/family/photo";
+import { uploadFile } from "@/api/common/common";
+import { listAlbum, getAlbum } from "@/api/system/family/album";
+export default {
+  name: "Photo",
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 家族相簿照片表格数据
+      photoList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 状态字典
+      statusOptions: [],
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        familyId: null,
+        albumId: null,
+        title: null,
+        url: null,
+        status: null,
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+        familyId: [
+          { required: true, message: "家族不能为空", trigger: "change" },
+        ],
+        albumId: [
+          { required: true, message: "相簿不能为空", trigger: "change" },
+        ],
+        title: [{ required: true, message: "标题不能为空", trigger: "blur" }],
+        url: [{ required: true, message: "url不能为空", trigger: "blur" }],
+      },
+      familyId: undefined,
+      family: undefined,
+      albumId: undefined,
+      album: undefined,
+    };
+  },
+  activated() {
+    this.init();
+  },
+  mounted() {
+    this.init();
+    this.getDicts("sys_show_hide").then((response) => {
+      this.statusOptions = response.data;
+    });
+    //this.getFamilyOptions();
+  },
+  methods: {
+    init() {
+      
+      this.familyId = this.$route.query.fid;
+
+      this.albumId = this.$route.query.albid;
+      if (this.familyId) {
+        this.queryParams.familyId = this.familyId;
+      }
+      if (this.albumId) {
+        this.queryParams.albumId = this.albumId;
+        this.getAlbumById(this.albumId);
+      }
+      this.getList();
+    },
+
+    /**获取单个家族信息 */
+    // getFamilyById(_familyId) {
+    //   getFamily(_familyId).then((res) => {
+    //     this.family = res.data;
+    //   });
+    // },
+
+    //获取家族列表
+    // getFamilyOptions() {
+    //   var _params = {
+    //     pageNum: 1,
+    //     pageSize: 10000000,
+    //   };
+    //   listFamily(_params).then((res) => {
+    //     if (res.code == 200) {
+    //       this.familyOptions = res.rows;
+    //     }
+    //   });
+    // },
+    /**获取单个相册信息 */
+    getAlbumById(_albumId) {
+      getAlbum(_albumId).then((res) => {
+       
+        this.album = res.data;
+        this.family = this.album.family;
+      });
+    },
+
+    /** 查询家族相簿照片列表 */
+    getList() {
+      this.loading = true;
+      listPhoto(this.queryParams).then((response) => {
+        this.photoList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+    // 状态字典翻译
+    statusFormat(row, column) {
+      return this.selectDictLabel(this.statusOptions, row.status);
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        id: null,
+        familyId: null,
+        albumId: null,
+        title: null,
+        url: null,
+        createBy: null,
+        createTime: null,
+        updateBy: null,
+        updateTime: null,
+        remark: null,
+        status: null,
+        delFlag: null,
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map((item) => item.id);
+      this.single = selection.length !== 1;
+      this.multiple = !selection.length;
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset();
+      this.open = true;
+      this.title = "添加家族相簿照片";
+      this.form.familyId = this.familyId;
+      this.form.albumId = this.albumId;
+      this.form.status = "0";
+      this.form.delFlag = 0;
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      const id = row.id || this.ids;
+      getPhoto(id).then((response) => {
+        this.form = response.data;
+        this.open = true;
+        this.title = "修改家族相簿照片";
+      });
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs["form"].validate((valid) => {
+        if (valid) {
+          if (this.form.id != null) {
+            updatePhoto(this.form).then((response) => {
+              if (response.code === 200) {
+                this.msgSuccess("修改成功");
+                this.open = false;
+                this.getList();
+              }
+            });
+          } else {
+            addPhoto(this.form).then((response) => {
+              if (response.code === 200) {
+                this.msgSuccess("新增成功");
+                this.open = false;
+                this.getList();
+              }
+            });
+          }
+        }
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const ids = row.id || this.ids;
+      this.$confirm(
+        '是否确认删除家族相簿照片编号为"' + ids + '"的数据项?',
+        "警告",
+        {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning",
+        }
+      )
+        .then(function () {
+          return delPhoto(ids);
+        })
+        .then(() => {
+          this.getList();
+          this.msgSuccess("删除成功");
+        })
+        .catch(function () {});
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      const queryParams = this.queryParams;
+      this.$confirm("是否确认导出所有家族相簿照片数据项?", "警告", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(function () {
+          return exportPhoto(queryParams);
+        })
+        .then((response) => {
+          this.download(response.msg);
+        })
+        .catch(function () {});
+    },
+    //自定义上传
+    requestUpload(data) {
+      console.log(data);
+      let formData = new FormData();
+      let _title = data.file.name;
+      _title = _title.substring(0, _title.lastIndexOf("."));
+
+      this.form.title = _title;
+      formData.append("file", data.file);
+      formData.append(
+        "modName",
+        "family/" + this.family.code + "/" + this.albumId
+      );
+      uploadFile(formData).then((response) => {
+        if (response.code === 200) {
+          this.form.url = response.fileName;
+        }
+      });
+    },
+    beforeAvatarUpload(file) {
+      const isJPG = file.type.indexOf("image/") == -1;
+      const isLt2M = file.size / 1024 / 1024 < 2;
+
+      if (isJPG) {
+        this.$message.error("只能上传图片");
+      }
+      if (!isLt2M) {
+        this.$message.error("图片大小不能超过 2MB!");
+      }
+      return !isJPG && isLt2M;
+    },
+  },
+};
+</script>
+<style >
+.avatar-uploader .el-upload {
+  border: 1px dashed #d9d9d9;
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  margin: 10px;
+}
+.avatar-uploader .el-upload:hover {
+  border-color: #409eff;
+}
+.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 178px;
+  height: 178px;
+  line-height: 178px;
+  text-align: center;
+}
+.avatar {
+  width: 178px;
+  height: 178px;
+  display: block;
+}
+</style>