linwenling
2023-04-06 885aaba80bce1201fc2a9df76f6837b0495bd963
ruoyi-ui/src/views/bignote/index.vue
@@ -1,23 +1,35 @@
<template>
    <div class="app-container">
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
    <div class="app-container" style="opacity: 1;">
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" >
          <el-form-item label="大事标题" prop="title">
            <el-input
              v-model="queryParams.title"
              placeholder="请输入标题"
              clearable
              style="width: 240px"
              style="
              width: 197px;
              height: 30px;
              background: #FFFFFF;
              border-radius: 14px 14px 14px 14px;
              opacity: 0.5;
              border: 1px solid rgba(0,0,0,0.25);"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="人物" prop="people">
            <el-input
              v-model="queryParams.people"
              placeholder="请输入人物"
              clearable
              style="width: 240px"
              style="width: 197px;
              height: 30px;
background: #FFFFFF;
border-radius: 14px 14px 14px 14px;
opacity: 0.5;
border: 1px solid rgba(0,0,0,0.25);"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
@@ -26,15 +38,25 @@
              v-model="queryParams.address"
              placeholder="请输入地点"
              clearable
              style="width: 240px"
              style="width: width: 197px;
height: 30px;
background: #FFFFFF;
border-radius: 14px 14px 14px 14px;
opacity: 0.5;
border: 1px solid rgba(0,0,0,0.25);"
              @keyup.enter.native="handleQuery"
            />
        </el-form-item>
        <el-form-item label="时间">
          <el-date-picker
            v-model="dateRange"
            style="width: 240px"
            style="width: width: 197px;
height: 30px;
background: #FFFFFF;
border-radius: 14px 14px 14px 14px;
opacity: 0.5;
border: 1px solid rgba(0,0,0,0.25);"
            value-format="yyyy-MM-dd HH-MM"
            type="daterange"
            range-separator="-"
@@ -47,7 +69,15 @@
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
     <div style="width: 72px;
height: 24px;
font-size: 18px;
font-family: Microsoft YaHei-Regular, Microsoft YaHei;
font-weight: 400;
color: #000000;
line-height: 21px;
">家大事记</div>
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
@@ -59,7 +89,7 @@
            v-hasPermi="['system:role:add']"
          >新增</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="danger"
@@ -70,6 +100,7 @@
            @click="handleDelete"
            v-hasPermi="['system:role:remove']"
          >删除</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
@@ -85,7 +116,7 @@
      </el-row>
      <!-- 序号、时间、人物、地点、大事标题、电子文件、备注 -->
      <!-- 这里有个familyList数组 是在data()中定义的 -->
      <el-table v-loading="loading" :data="familyList" @selection-change="handleSelectionChange">
      <el-table v-loading="loading"  :data="familyList" @selection-change="handleSelectionChange" >
        <el-table-column type="selection" width="55"  align="center" />
        <el-table-column label="序号" prop="id" sortable width="120" />
@@ -97,7 +128,7 @@
        <el-table-column label="人物" prop="people" sortable width="100" />
        <el-table-column label="地点" prop="address" sortable width="100" />
        <el-table-column label="大事标题" prop="title" sortable :show-overflow-tooltip="true" width="150" />
        <el-table-column label="备注" prop="remark" sortable width="100" />
        <el-table-colum label="电子文件" prop="fujian" sortable width="100"/>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
@@ -117,13 +148,13 @@
              v-hasPermi="['system:role:remove']"
            >删除</el-button>
            <el-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)" v-hasPermi="['system:role:edit']">
              <el-button size="mini" type="text" icon="el-icon-d-arrow-right"  @click="handleCheck(scope.row)">查看详情</el-button>
            <el-button size="mini" type="text" icon="el-icon-d-arrow-right"  @click="handleCheck(scope.row)">查看详情</el-button>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total>0"
        :total="total"
@@ -131,18 +162,18 @@
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
      <!-- 添加或修改资产信息配置对话框 -->
      <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
        <el-form ref="elForm" :model="formDat" :rules="rules" size="medium" label-width="100px">
          <el-form-item label="大事标题" prop="title">
            <el-input v-model="formDat.title" placeholder="请输入大事标题" clearable :style="{width: '100%'}" ></el-input>
          </el-form-item>
          <el-form-item label="人物" prop="people">
            <el-input v-model="formDat.holder" placeholder="请输入人物" clearable :style="{width: '100%'}" >
            <el-input v-model="formDat.people" placeholder="请输入人物" clearable :style="{width: '100%'}" >
            </el-input>
          </el-form-item>
          <el-form-item label="地点" prop="address">
@@ -152,7 +183,7 @@
          <el-form-item label="备注" prop="remark">
            <el-input v-model="formDat.remark" placeholder="请输入备注" clearable :style="{width: '100%'}" ></el-input>
          </el-form-item>
          <h4 class="form-header">相关图片 </h4>
          <el-upload
            action="#"
@@ -178,7 +209,7 @@
          >
            <i class="el-icon-zoom-in"></i>
          </span>
          <span
            v-if="!disabled"
            class="el-upload-list__item-delete"
@@ -187,8 +218,8 @@
            <i class="el-icon-delete"></i>
          </span>
        </span>
            </div>
          </el-upload>
          <h4 class="form-header">其他附件 </h4>
@@ -197,7 +228,7 @@
            :file-list="fileListOther"
            class="upload-demo"
            multiple
            :on-remove="handleRemove"
            :http-request="requestUpload"
            :show-file-list="true"
@@ -208,30 +239,32 @@
              </div>
            </template>
          </el-upload>
        </el-form>
        <h4 class="form-header"> </h4>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitDataScope">确 定</el-button>
          <el-button @click="cancelData">取 消</el-button>
        </div>
      </el-dialog>
      <!-- 分配角色数据权限对话框 -->
      <el-dialog :title="title" :visible.sync="openDataScope" width="500px" append-to-body>
      </el-dialog>
    </div>
  </template>
  <script>
  import { listRole, getRole, delRole, addRole, updateRole, dataScope, changeRoleStatus, deptTreeSelect } from "@/api/system/role";
  import { treeselect as menuTreeselect, roleMenuTreeselect } from "@/api/system/menu";
  //在system/note/index.js中导入接口函数  --接好了
  import {listFamilyevent , getFamilyeventInfo , delFamilyevent  , addFamilyevent , uploadPic} from "@/api/bignote/index";
  export default {
@@ -241,7 +274,7 @@
      return {
        // 遮罩层
        disabled: false,
        loading: true,
        formData:[],
        // 选中数组
@@ -273,7 +306,7 @@
        fileList:[
        ],
        fileListOther:[
        ],
        dsb:true,
        btn:false,
@@ -312,7 +345,7 @@
            message: '请输入大事标题',
            trigger: 'blur'
          }],
          people: [{
            required: true,
            message: '请输入人物',
@@ -323,11 +356,11 @@
            message: '请输入地点',
            trigger: 'blur'
          }],
          remark: [{
            required: true,
            message: '请输入备注',
            trigger: 'blur'
          }],
          // remark: [{
          //   required: true,
          //   message: '请输入备注',
          //   trigger: 'blur'
          // }],
          createTime: [{
            required: true,
            message: '请选择日期选择',
@@ -340,7 +373,7 @@
    created() {
      this.getList();
    //   this.getCateInfor()
    },
    methods: {
      // 取消按钮
@@ -349,7 +382,21 @@
        this.reset();
      },
      /** 查询角色列表 */
      //隔行变色
      methods: {
      tableRowClassName({row, rowIndex}) {
        if (rowIndex === 1)  //=>这里可以改成 rowIndex%2=== 1,后面直接else即可达到隔行变色效果。
        {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      }
    },
      /** 查询角色列表 */
      //列表显示家大事记
      getList() {
@@ -360,7 +407,7 @@
            //  alert(123)
            //   console.log(response.data)
            this.familyList = response.data.data;
            this.total = response.data.total;
            this.loading = false;
          }
@@ -418,7 +465,7 @@
        this.single = selection.length!=1
        this.multiple = !selection.length
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.reset();
@@ -436,7 +483,7 @@
      handleUpdate(row) {
        const id = row.id;
        let jd = true
        this.$router.push({
          path:"/family1/bignote/familyeventInfo/" + id,
          query:{
@@ -444,15 +491,15 @@
          }
        });
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      /** 提交按钮(数据权限) */
      submitDataScope: function() {
        let ul = this.fileList.map(function (elem){
          return elem.url.replace(process.env.VUE_APP_BASE_TRUE_API,"")
        }).join(",")
@@ -462,7 +509,7 @@
        this.formDat.url = ul+","+uls
        this.$refs["elForm"].validate(valid => {
          if (valid) {
            addFamilyevent(this.formDat).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
@@ -477,22 +524,22 @@
        var formData = new FormData();
        formData.append('uploadFile', file);
        let _this = this
        uploadPic(formData).then(response => {
          let pth = response.data.originalFilename.substr(response.data.originalFilename.length-4, response.data.originalFilename.length)
          if(_this.fot.includes(pth) === true)
          {
            _this.fileList.push({name:response.data.fileName, "url":response.data.url})
          }
          else{
            _this.fileListOther.push({name:response.data.fileName, url:response.data.url})
          }
        })
      },
      /** 删除按钮操作 */
      handleDelete(row) {
@@ -500,7 +547,7 @@
        this.$modal.confirm('是否确认删除序号为"' + Ids + '"的数据项?').then(function() {
          return delFamilyevent(Ids);
        }).then(() => {
          this.getList1();
          this.getList();
          this.$modal.msgSuccess("删除成功");
        }).catch(() => {});
      },
@@ -513,3 +560,4 @@
    }
  };
  </script>