yz3456
2024-05-18 87e28c4bc7fe04eb14629482e97541d183c1d067
ruoyi-ui/src/views/selfeconomy/index.vue
@@ -1,33 +1,14 @@
<template>
    <div class="app-container">
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
        <el-form-item label="" prop="type incomeName timeLimit happenTime " >
          <el-input
            v-model:type="queryParams.type"
            v-model:incomeName="queryParams.incomeName"
            v-model:timeLimit="queryParams.timeLimit"
            v-model:happenTime="queryParams.happenTime"
            placeholder="在“财产”中搜索"
            clearable
            style="width: 240px"
            @keyup.enter.native="handleQuery">
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
          </el-input>
        </el-form-item>
        <el-row>
        <el-form-item label="日期" prop="happenTime">
          <el-date-picker
            v-model="dateRange"
            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);"
            style="width: 240px;
                   height: 35px;
                   border-radius: 16px 16px 16px 16px;
                   opacity: 0.5;"
            value-format="yyyy-MM-dd"
            type="daterange"
            range-separator="-"
@@ -41,35 +22,45 @@
            v-model="queryParams.type"
            placeholder="请输入财产类别"
            clearable
            style="width: 240px"
            style="width: 200px;
                   height: 35px;
                   border-radius: 16px 16px 16px 16px;
                   opacity: 0.5;"
            @keyup.enter.native="handleQuery">
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
          </el-input>
        </el-form-item>
        <el-form-item label="获得方式" prop="incomeName" >
        <el-form-item label="财产名称" prop="incomeName" >
          <el-input
            v-model="queryParams.incomeName"
            placeholder="请输入获得方式"
            placeholder="请输入财产名称"
            clearable
            style="width: 240px"
            style="width: 200px;
                   height: 35px;
                   border-radius: 16px 16px 16px 16px;
                   opacity: 0.5;"
            @keyup.enter.native="handleQuery">
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
          </el-input>
        </el-form-item>
        <el-form-item label="期限" prop="timeLimit">
          <el-input
            v-model="queryParams.timeLimit"
            placeholder="请输入期限"
            clearable
            style="width: 240px"
            @keyup.enter.native="handleQuery">
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
          </el-input>
        </el-form-item>
        <el-cntainer>
          <el-col :span="9" >
          <el-form-item label="期限" prop="timeLimit">
            <el-input
              v-model="queryParams.timeLimit"
              placeholder="请输入期限"
              clearable
              style="width: 200px;
                   height: 35px;
                   border-radius: 16px 16px 16px 16px;
                   opacity: 0.5;"
              @keyup.enter.native="handleQuery">
              <i slot="prefix" class="el-input__icon el-icon-search"></i>
            </el-input>
          </el-form-item>
          <el-col  >
            <el-form-item>
              <el-button size="mini" @click="handleQuery" style=" width: 67px;height: 27px;background: #FFDDE3;
              border-radius: 7px 7px 7px 7px;opacity: 1; " >搜索</el-button>
@@ -77,8 +68,10 @@
              border-radius: 7px 7px 7px 7px;opacity: 1; ">重置</el-button>
            </el-form-item>
          </el-col>
        </el-cntainer>
        </el-row>
      </el-form>
      <div>
        <el-row :gutter="10" class="mb8">
@@ -124,7 +117,7 @@
              v-hasPermi="['family:note:export']"
            >导入模板下载</el-button>
          </el-col>
          <el-col :span="1.2">
          <el-col :span="1.5">
            <el-upload
              action=""
@@ -135,12 +128,13 @@
            >
              <el-button size="mini"   type="primary"
                         plain
                         icon="el-icon-plus" >导入</el-button>
                         icon="el-icon-top" >导入</el-button>
            </el-upload>
          </el-col>
          <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>
      </div>
      <el-table v-loading="loading" :data="selfeconomyList" :row-key="getRowId" ref="multipleTable" @selection-change="handleSelectionChange" :row-class-name="tableRowClassName" style="background: #FFEFF2;  border-radius: 14px 14px 14px 14px;">
        <el-table-column type="selection" :reserve-selection="true" width="55"  align="center" />
        <el-table-column fixed label="序号" sortable type="index" :index="(queryParams.pageNum-1)*queryParams.pageSize+1" width="60"/>
@@ -150,7 +144,7 @@
        <el-table-column label="财产类别" prop="type" sortable width="120" align="center">
          <template slot-scope="scope">{{scope.row.type? scope.row.type: '————'}}</template>
        </el-table-column>
        <el-table-column label="获得方式" prop="incomeName" sortable :show-overflow-tooltip="true" width="120" align="center" >
        <el-table-column label="财产名称" prop="incomeName" sortable :show-overflow-tooltip="true" width="120" align="center" >
          <template slot-scope="scope">{{scope.row.incomeName? scope.row.incomeName: '————'}}</template>
        </el-table-column>
        <el-table-column label="价值(金额)" prop="price" sortable width="140" align="center" >
@@ -198,8 +192,9 @@
        <el-table-column label="备注" prop="remark" sortable width="90" align="center">
          <template slot-scope="scope">{{scope.row.remark? scope.row.remark: '————'}}</template>
        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" >
        <el-table-column label="操作" align="center" width="250" class-name="small-padding fixed-width">
          <template slot-scope="scope" v-if="scope.row.roleId !== 1">
            <div class="button-container">
            <el-button
              size="mini"
              type="text"
@@ -227,6 +222,7 @@
              >查看详情</el-button>
            </el-dropdown>
            </div>
          </template>
        </el-table-column>
      </el-table>
@@ -247,14 +243,16 @@
          <!--          <el-input v-model="formDat.happenTime" placeholder="请输入获得时间" clearable :style="{width: '100%'}" ></el-input>-->
          <!--        </el-form-item>-->
          <el-form-item label="时间" prop="happenTime">
            <el-input v-model='formDat.happenTime' type='date' placeholder='选择日期'></el-input>
            <el-date-picker v-model="formDat.happenTime" type="date" placeholder="请选择日期"
                            :editable="false" :clearable="false" :style="{width: '100%'}"  value-format="yyyy-MM-dd"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="财产类别" prop="type">
            <el-input v-model="formDat.type" placeholder="请输入财产类别" clearable :style="{width: '100%'}" >
            </el-input>
          </el-form-item>
          <el-form-item label="获得方式" prop="incomeName">
            <el-input v-model="formDat.incomeName" placeholder="请输入获得方式" clearable :style="{width: '100%'}" >
          <el-form-item label="财产名称" prop="incomeName">
            <el-input v-model="formDat.incomeName" placeholder="请输入财产名称" clearable :style="{width: '100%'}" >
            </el-input>
          </el-form-item>
          <el-form-item label="金额" prop="price">
@@ -270,8 +268,10 @@
            </el-input>
          </el-form-item>
          <el-form-item label="变更/注销" prop="isChange">
            <el-input v-model="formDat.isChange" placeholder="请输入变更/注销" clearable :style="{width: '100%'}" >
            </el-input>
            <el-select v-model="formDat.isChange" placeholder="请选择变更/注销" clearable :style="{width: '100%'}"  >
              <el-option v-for="(item, index) in typeOptions1" :key="index" :label="item.label" :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="存放位置" prop="location">
            <el-input v-model="formDat.location" placeholder="请输入存放位置" clearable :style="{width: '100%'}" >
@@ -293,11 +293,13 @@
            action="#"
            list-type="picture-card"
            multiple
            :http-request="requestUpload"
            :file-list="fileList"
          :http-request="requestUpload"
          :file-list="fileList"
          :on-change="handleChange"
          :auto-upload="false"
             ref="upload"
          >
            <div v-if="uploading" class="upload-status">正在上传...</div>
            <i v-if="!uploading" slot="default" class="el-icon-plus"></i>
            <i  slot="default" class="el-icon-plus"></i>
            <div slot="file" slot-scope="{file}">
              <img
                class="el-upload-list__item-thumbnail"
@@ -327,6 +329,13 @@
            </div>
          </el-upload>
        <el-button
                 style="margin-left: 10px"
                 size="small"
                 type="success"
                 @click="picUpload"
               >上传到服务器</el-button>
          <h4 class="form-header">其他附件 </h4>
          <el-upload
            action=""
@@ -335,18 +344,68 @@
            multiple
            :on-remove="handleRemoveFile"
            :http-request="requestUpload"
            :show-file-list="true"
         ref="upload1"
         :on-change="handleChange1"
         :auto-upload="false"
         list-type="picture-card"
           :http-request="requestUpload1"
           :show-file-list="true"
          >
            <el-button type="primary">点击上传</el-button>
            <template #tip>
              <div class="el-upload__tip">
              </div>
            </template>
         <i slot="default" class="el-icon-plus"></i>
                 <div slot="file" slot-scope="{file}">
                   <!-- 添加video元素用于显示视频 -->
                   <video
                     v-if="file.url.includes('.mp4')"
                     class="el-upload-list__item-thumbnail"
                     :src="file.url"
                     style="width: 147px; height: 147px"
                     fit="cover"
                   ></video>
                   <img v-else
                        class="el-upload-list__item-thumbnail"
                        src="../../assets/images/deviceLis.png"
                        alt=""
                        style="width: 100%; height: 100%"
                        fit="cover"></img>
                   <span class="el-upload-list__item-actions">
                        <span class="el-upload-list__item-name">{{ file.name }}</span>
                             <span
                               class="el-upload-list__item-preview"
                               @click="handleFileCardPreview(file)"
                             >
                               <i class="el-icon-zoom-in"></i>
                             </span>
                             <span
                               class="el-upload-list__item-delete"
                               @click="handleRemoveFile(file)"
                             >
                               <i class="el-icon-delete"></i>
                             </span>
                       </span>
                 </div>
               </el-upload>
          </el-upload>
        </el-form>
        <h4 class="form-header"> </h4>
      <el-button
                      style="margin-left: 10px"
                      size="small"
                      type="success"
                      @click="fileUpload"
                    >上传到服务器</el-button>
       </el-form>
       <h4 class="form-header"> </h4>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitDataScope">保 存</el-button>
@@ -408,12 +467,16 @@
        // 日期范围
        dateRange: [],
        // 数据范围选项
        fot:[".jpg",".jif"],
    // 数据范围选项
    fot:['.bmp','.jpg','.jpeg','.png','.tif','.gif','.pcx','.tga','.exif','.fpx',
      '.svg','.psd','.cdr','.pcd','.dxf','.ufo','.eps','.ai','.aw','.WMF','.webp','.apng'],
        fileList:[
        ],
        fileListOther:[
        ],
        fileList1:[],
             uploadFileList: [],
              uploadFileList1: [],
        fileListOther:[],
        dsb:true,
        btn:false,
        fit:['fill'],
@@ -431,7 +494,7 @@
          propertyRight:undefined,
          location:undefined,
          remark:undefined,
          url: undefined,
          url: "",
        },
        // 菜单列表
@@ -486,7 +549,7 @@
          }],
          incomeName: [{
            required: true,
            message: '请输入获得方式',
            message: '请输入财产名称',
            trigger: 'blur'
          }],
          timeLimit: [{
@@ -518,6 +581,14 @@
          {
            value: '0',
            label: '否',
          }],
        typeOptions1: [{
          value: '变更',
          label: '变更',
        },
          {
            value: '注销',
            label: '注销',
          }],
      };
    },
@@ -578,14 +649,20 @@
        for(let i = 0; i < this.fileList.length; i++)
        {
          if(this.fileList[i].url==file.url)
          {
            this.$delete(this.fileList,i);
                 this.$delete(this.uploadFileList,i);
                 }
        }
      },
      handleRemoveFile(file) {
        for(let i = 0; i < this.fileListOther.length; i++)
        {
          if(this.fileListOther[i].url==file.url)
          {
            this.$delete(this.fileListOther,i);
            this.$delete(this.uploadFileList1,i);
            }
        }
      },
      // 取消按钮
@@ -619,7 +696,7 @@
            deptCheckStrictly: true,
            remark: undefined
          };
        this.resetForm("form");
        this.resetForm("elForm");
      },
      /** 搜索按钮操作 */
      handleQuery() {
@@ -658,7 +735,6 @@
      handleCheck(row){
        const id = row.id;
        this.$router.push("/self/selfeconomy/selfeconomyInfo/" + id);
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
@@ -681,13 +757,13 @@
      /** 提交按钮(数据权限) */
      submitDataScope: function() {
        let ul = this.fileList.map(function (elem){
          return elem.url.replace(process.env.VUE_APP_BASE_TRUE_API,"")
        }).join(",")
        let uls = this.fileListOther.map(function (elem){
          return elem.url.replace(process.env.VUE_APP_BASE_TRUE_API,"")
        }).join(",")
        this.formDat.url = ul+","+uls
        // let ul = this.fileList.map(function (elem){
        //   return elem.url.replace(process.env.VUE_APP_BASE_TRUE_API,"")
        // }).join(",")
        // let uls = this.fileListOther.map(function (elem){
        //   return elem.url.replace(process.env.VUE_APP_BASE_TRUE_API,"")
        // }).join(",")
        // this.formDat.url = ul+","+uls
        this.$refs["elForm"].validate(valid => {
          if (valid) {
@@ -710,30 +786,88 @@
          this.handleRemoveFile(this.fileListOther[0]);
        }
      },
      requestUpload(params)
      {
        var file = params.file;
        var formData = new FormData();
        formData.append('uploadFile', file);
        let _this = this
        this.uploading = true;
        uploadPic(formData).then(response => {
          let pth = response.data.originalFilename.substr(response.data.originalFilename.length-4, response.data.originalFilename.length)
          this.uploading = false;
          this.$modal.msgSuccess("上传成功");
          if(_this.fot.includes(pth) === true)
          {
            _this.fileList.push({name:response.data.fileName, "url":response.data.url})
    handleChange(file, fileList1) {
          //定义一个全局数组uploadFileList来做存储
          }
        // this.uploadFileList.push(file.raw);
         console.log("=========5555=========")
         console.log(file)
       //  console.log(this.uploadFileList)
       //  this.fileList = fileList
       //alert(file)
           this.uploadFileList.push(file.raw);
            this.fileList.push({name:file.name,url:file.url})
       //alert(fileList1.length)
       },
       handleChange1(file, fileOtherList1) {
          //定义一个全局数组uploadFileList来做存储
       this.uploadFileList1.push(file.raw);
        this.fileListOther.push({name:file.name,url:file.url})
        // this.uploadFileList.push(file.raw);
         console.log("=========5555=========")
         //console.log(file)
       //  console.log(this.uploadFileList)
       //  this.fileList = fileList
       },
       fileUpload(){
       //   var file = params.file;
          else{
            _this.fileListOther.push({name:response.data.fileName, url:response.data.url})
          var formData = new FormData();
          this.$refs.upload1.submit();
          // formData.append('uploadFile', file);
          if(this.uploadFileList1.length==0){
               this.$modal.msgSuccess("文档上传列表不能为空!");
               return
          }
          this.uploadFileList1.forEach((elem)=>{
             formData.append("files", elem)
          }
        })
          })
      },
          let _this = this
          this.uploading = true;
          uploadPic(formData).then(response => {
          _this.uploadFileList1 = []
          _this.formDat.url = _this.formDat.url+","+response.fileNames
          _this.$modal.msgSuccess("文件上传成功!");
            })
       },
       picUpload()
       {
          var formData = new FormData();
          //alert(976)
          //this.$refs.upload.submit();
          //alert(8)
          //alert(this.uploadFileList.length)
       if(this.uploadFileList.length==0){
            this.$modal.msgSuccess("图片上传列表不能为空!");
            return}
       //console.log(this.uploadFileList)
          this.uploadFileList.forEach((elem)=>{
             formData.append("files", elem)
          })
          //alert(90)
          let _this = this
          //alert(9)
           uploadPic(formData).then(response => {
          //   alert("dds")
             _this.formDat.url = _this.formDat.url+","+response.fileNames
            _this.uploadFileList = []
            _this.$modal.msgSuccess("图片上传成功");
         });
       },
        requestUpload(params) {
    //alert(98)
     //    this.uploadFileList.push(params.file);
        },
        requestUpload1(params)
        {
          //     this.uploadFileList1.push(params.file);
        },
      /** 删除按钮操作 */
      handleDelete(row) {
        const Ids = row.id || this.ids;
@@ -783,7 +917,7 @@
    }
  };
  </script>
  <style>
  <style scoped="">
  .app-container{
    background-color: #FEF7FC;
  }
@@ -797,5 +931,10 @@
  }
  .el-table__cell {
    font-size: 14px; /* 设置字体大小 */
  }
  .button-container {
    display: inline-flex; /* 设置按钮容器为行内元素 */
  }
  </style>