新增个人财产

linwenling

2023-06-12 90fd5c29248f2f71c877b2f99fed2c375457e95b

新增个人财产

 ruoyi-ui/src/api/selfeconomy/index.js

New file
@@ -0,0 +1,67 @@
import request from '@/utils/request'

//SelfEconomy

// 查询所有个人财产
export function listSelfEconomy(query) {
  return request({
    url: '/zProperty/all',
    method: 'get',
    params: query
  })
}


// 根据id查询所有个人财产信息
export function getSelfEconomyInfo(id) {
  return request({
    url: '/zProperty/'+ id,
    method: 'get',
    params: query
  })
}
//新增
export function addSelfEconomy(data)
{
  return request({
    url: '/zProperty',
    method: 'post',
    data: data
  })
}

// 删除
export function delSelfEconomy(Ids) {
  return request({
    url: '/zProperty/' + Ids,
    method: 'delete'
  })
}

//修改
export function updateSelfEconomy(data) {
  return request({
    url: '/zProperty',
    method: 'put',
    data: data
  })
}
//上传文件
export function uploadPic(data) {
  return request({
    url: '/common/upload',
    method: 'post',
    data: data
  })
}
//下载文件
export function download(data) {
  return request({
    url: '/common/downLoadFile',
    method: 'get',
    params: data,
    responseType: 'blob'
  })
}



 ruoyi-ui/src/views/selfeconomy/index.js

New file
@@ -0,0 +1,67 @@
import request from '@/utils/request'

//SelfEconomy

// 查询所有个人财产
export function listSelfEconomy(query) {
  return request({
    url: '/zProperty/all',
    method: 'get',
    params: query
  })
}


// 根据id查询所有个人财产信息
export function getSelfEconomyInfo(id) {
  return request({
    url: '/zProperty/'+ id,
    method: 'get',
    params: query
  })
}
//新增
export function addSelfEconomy(data)
{
  return request({
    url: '/zProperty',
    method: 'post',
    data: data
  })
}

// 删除
export function delSelfEconomy(Ids) {
  return request({
    url: '/zProperty/' + Ids,
    method: 'delete'
  })
}

//修改
export function updateSelfEconomy(data) {
  return request({
    url: '/zProperty',
    method: 'put',
    data: data
  })
}
//上传文件
export function uploadPic(data) {
  return request({
    url: '/common/upload',
    method: 'post',
    data: data
  })
}
//下载文件
export function download(data) {
  return request({
    url: '/common/downLoadFile',
    method: 'get',
    params: data,
    responseType: 'blob'
  })
}



 ruoyi-ui/src/views/selfeconomy/index.vue

New file
@@ -0,0 +1,777 @@
<template>
    <div class="app-container">
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
        <el-form-item label="" prop="phone wx qq twitter isAlways remark" >
          <el-input
            v-model:phone="queryParams.phone"
            v-model:wx="queryParams.wx"
            v-model:qq="queryParams.qq"
            v-model:twitter="queryParams.twitter"
            v-model:isAlways="queryParams.isAlways"
            v-model:remark="queryParams.remark"
            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-form-item label="日期">
          <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);"
            value-format="yyyy-MM-dd"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>
  
        <el-form-item label="财产类别" prop="type">
          <el-input
            v-model="queryParams.type"
            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-form-item label="收支名称" prop="incomeName" >
          <el-input
            v-model="queryParams.incomeName"
            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-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>
              <el-button size="mini" @click="handleQuery" style=" width: 67px;height: 27px;background: #FFDDE3;
              border-radius: 7px 7px 7px 7px;opacity: 1; " >搜索</el-button>
              <el-button  size="mini" @click="resetQuery" style=" width: 67px;height: 27px;background: #FFDDE3;
              border-radius: 7px 7px 7px 7px;opacity: 1; ">重置</el-button>
            </el-form-item>
          </el-col>
        </el-cntainer>
      </el-form>
      <div>

        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button
              type="primary"
              plain
              icon="el-icon-plus"
              size="mini"
              @click="handleAdd"
              v-hasPermi="['system:role:add']"
            >新增</el-button>
          </el-col>
  
          <el-col :span="1.5">
            <el-button
              type="danger"
              plain
              icon="el-icon-delete"
              size="mini"
              :disabled="multiple"
              @click="handleDelete"
              v-hasPermi="['system:role:remove']"
            >删除</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="warning"
              plain
              icon="el-icon-download"
              size="mini"
              @click="handleExport"
              v-hasPermi="['family:note:export']"
            >导出</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="warning"
              plain
              icon="el-icon-download"
              size="mini"
              @click="handleExportModel"
              v-hasPermi="['family:note:export']"
            >导入模板下载</el-button>
          </el-col>
          <el-col :span="1.2">
  
            <el-upload
              action=""
  
              class="upload-demo"
              :show-file-list="false"
              :http-request="handleEnport"
            >
              <el-button size="mini"   type="primary"
                         plain
                         icon="el-icon-plus" >导入</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="25"  align="center" />
        <el-table-column fixed label="序号" sortable type="index" :index="(queryParams.pageNum-1)*queryParams.pageSize+1" width="60"/>
        <el-table-column label="日期" prop="happenTime" sortable width="100" align="center">
          <template slot-scope="scope">{{scope.row.happenTime? scope.row.happenTime: '————'}}</template>
        </el-table-column>
        <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" >
          <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" >
          <template slot-scope="scope">{{scope.row.price? scope.row.price: '————'}}</template>
        </el-table-column>
        <el-table-column label="期限" prop="timeLimit" sortable width="110" align="center">
          <template slot-scope="scope">{{scope.row.timeLimit? scope.row.timeLimit: '————'}}</template>
        </el-table-column>
        <el-table-column label="变更/注销" prop="isChange" sortable width="140" align="center">
          <template slot-scope="scope">{{scope.row.isChange? scope.row.isChange: '————'}}</template>
        </el-table-column>
        <el-table-column label="产权" prop="propertyRight" sortable width="110" align="center">
          <template slot-scope="scope">{{scope.row.propertyRight? scope.row.propertyRight: '————'}}</template>
        </el-table-column>
        <el-table-column label="存放位置" prop="location" sortable width="110" align="center">
          <template slot-scope="scope">{{scope.row.location? scope.row.location: '————'}}</template>
        </el-table-column>
        <el-table-column label="是否注销" prop="status" sortable width="100" align="center">
            <template slot-scope="scope">{{scope.row.status===1? '是': '否'}}</template>
        </el-table-column>
  
        <el-table-column label="电子文件" prop="url" width="80" align="center">
  
          <template slot-scope="scope" >
            <img
              class="el-upload-list__item-thumbnail"
              src="../../assets/images/deviceLis.png"
              alt=""
              style="width: 35px; height: 35px;"
              fit="cover"
              v-if="scope.row.url !== ',' "
            >
            <img
              class="el-upload-list__item-thumbnail"
              src="../../assets/images/deviceA.png"
              alt=""
              style="width: 35px; height: 35px;"
              fit="cover"
              v-if="scope.row.url === ','"
            >
          </template>
        </el-table-column>
        <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" >
          <template slot-scope="scope" v-if="scope.row.roleId !== 1">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleUpdate(scope.row)"
              v-hasPermi="['system:role:edit']"
            >修改</el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDelete(scope.row)"
              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-dropdown>
          </template>
        </el-table-column>
      </el-table>
  
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        style="background: #FEF7FC;"
        @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="happenTime">-->
          <!--          <el-input v-model="formDat.happenTime" placeholder="请输入获得时间" clearable :style="{width: '100%'}" ></el-input>-->
          <!--        </el-form-item>-->
          <el-form-item label="时间" prop="happenTime">
            <el-date-picker v-model='formDat.happenTime' type='date' placeholder='选择日期'></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-input>
          </el-form-item>
          <el-form-item label="金额" prop="price">
            <el-input v-model="formDat.price" placeholder="请输入金额" clearable :style="{width: '100%'}" >
            </el-input>
          </el-form-item>
          <el-form-item label="期限" prop="timeLimit">
            <el-input v-model="formDat.timeLimit" placeholder="请输入期限" clearable :style="{width: '100%'}" >
            </el-input>
          </el-form-item>
          <el-form-item label="产权" prop="propertyRight">
            <el-input v-model="formDat.propertyRight" placeholder="请输入产权" clearable :style="{width: '100%'}" >
            </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-form-item>
          <el-form-item label="存放位置" prop="location">
            <el-input v-model="formDat.location" placeholder="请输入存放位置" clearable :style="{width: '100%'}" >
            </el-input>
          </el-form-item>
          <el-form-item label="是否注销" prop="status">
            <el-select v-model="formDat.status" placeholder="请选择是否依旧有效" clearable :style="{width: '100%'}"  >
              <el-option v-for="(item, index) in typeOptions" :key="index" :label="item.label" :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
  
          <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="#"
            list-type="picture-card"
            multiple
            :http-request="requestUpload"
            :file-list="fileList"
          >
            <i slot="default" class="el-icon-plus"></i>
            <div slot="file" slot-scope="{file}">
              <img
                class="el-upload-list__item-thumbnail"
                :src="file.url"
                alt=""
                style="width: 126px; height: 126px"
                fit="cover"
                :preview-src-list="[file.url]"
              >
              <span class="el-upload-list__item-actions">
          <span
            class="el-upload-list__item-preview"
            @click="handlePictureCardPreview(file)"
          >
            <i class="el-icon-zoom-in"></i>
          </span>
  
          <span
            v-if="!disabled"
            class="el-upload-list__item-delete"
            @click="handleRemove(file)"
          >
            <i class="el-icon-delete"></i>
          </span>
        </span>
  
  
            </div>
          </el-upload>
          <h4 class="form-header">其他附件 </h4>
          <el-upload
            action=""
            :file-list="fileListOther"
            class="upload-demo"
            multiple
  
            :on-remove="handleRemove"
            :http-request="requestUpload"
            :show-file-list="true"
          >
            <el-button type="primary">点击上传</el-button>
            <template #tip>
              <div class="el-upload__tip">
              </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";
  
  
  
  //导入接口函数
  import {listSelfEconomy, getSelfEconomyInfo, addSelfEconomy,delSelfEconomy, updateSelfEconomy,uploadPic,downloadModel} from "@/api/selfeconomy/index";
//   import {enload} from "@/api/doctor";
  import {Message} from "element-ui";
  
  
  export default {
    name: "index",
    dicts: ['sys_normal_disable'],
    data() {
      return {
        // 遮罩层
        disabled: false,
  
        loading: true,
        formData:[],
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 百年心愿表格数据
        wishList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 是否显示弹出层（数据权限）
        openDataScope: false,
        menuExpand: false,
        menuNodeAll: false,
        deptExpand: true,
        deptNodeAll: false,
        // 日期范围
        dateRange: [],
        // 数据范围选项
        fot:[".jpg",".jif"],
        fileList:[
        ],
        fileListOther:[
  
        ],
        dsb:true,
        btn:false,
        fit:['fill'],
  
        formDat: {
          //百年心愿记录
          id:undefined,
          happenTime:undefined,
          type:undefined,
          status:undefined,
          isChange:undefined,
          incomeName:undefined,
          price:undefined,
          timeLimit:undefined,
          propertyRight:undefined,
          location:undefined,
          remark:undefined,
          url: undefined,
  
        },
        // 菜单列表
        menuOptions: [],
        // 部门列表
        deptOptions: [],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          type:undefined,
          incomeName:undefined,
          beneficiary:undefined,
          // happenTime:undefined,
        },
        // searchVal:"",
  
        // 表单参数
        form: {},
        defaultProps: {
          children: "children",
          label: "label"
        },
        // 表单校验
        rules: {
  
          type: [{
            required: true,
            message: '请输入财产类别',
            trigger: 'blur'
          }],
          happenTime: [{
            required: true,
            message: '请选择时间',
            trigger: 'blur'
          }],
          status: [{
            // required: true,
            message: '请输入是否注销',
            trigger: 'blur'
          }],
          isChange: [{
            required: true,
            message: '请输入变更/注销',
            trigger: 'blur'
          }],
          price: [{
            required: true,
            message: '请输入金额',
            trigger: 'blur'
          }],
          incomeName: [{
            required: true,
            message: '请输入收支类别',
            trigger: 'blur'
          }],
          timeLimit: [{
            required: true,
            message: '请输入期限',
            trigger: 'blur'
          }],
          location: [{
            required: true,
            message: '请输入存放位置',
            trigger: 'blur'
          }],
          propertyRight: [{
            required: true,
            message: '请输入实现难度',
            trigger: 'blur'
          }],
  
          remark: [{
            // required: true,
            message: '请输入备注',
            trigger: 'blur'
          }],
        },
        typeOptions: [{
          value: '1',
          label: '是',
        },
          {
            value: '0',
            label: '否',
          }],
      };
    },
    created() {
      this.getList();
      this.getCateInfor()
      // for (let i = 0; i < this.contactList.length; i++) {
      //   this.formDat[i] = this.contactList[i];
      // }
    },
    methods: {
  
    //   getSrc1(status) {
    //     if (status === 1) {
    //       return '是'
    //     }else {
    //       return '否'
    //     }
    //   },
  
      // 取消按钮
      cancelData() {
        this.open = false;
        this.reset();
      },
      getRowId(row)
      {
        return row.id
      },
      //隔行变色
      tableRowClassName({ row, rowIndex }) {
        if (rowIndex % 2 == 0) {
          return "statistics-warning-row1";
        } else {
          return "statistics-warning-row";
        }
      },
      /** 查询记录列表 */
      getList() {
        this.loading = true;
        console.log(this.queryParams)
        this.queryParams.happenStartTime = this.dateRange.length > 0 && this.dateRange[0]
        this.queryParams.happenEndTime = this.dateRange.length > 0 && this.dateRange[1]
  
        //  listProperty(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
        listSelfEconomy(this.queryParams).then(response => {
            //  alert(123)
            //   console.log(response.data)
            this.selfeconomyList = response.data.data;
  
            this.total = response.data.total;
            this.loading = false;
          }
        );
      },

      handleRemove(file) {
        alert(323)
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      // 取消按钮（数据权限）
      cancelDataScope() {
        this.openDataScope = false;
        this.reset();
      },
      // 表单重置
      reset() {
        if (this.$refs.menu != undefined) {
          this.$refs.menu.setCheckedKeys([]);
        }
        this.menuExpand = false,
          this.menuNodeAll = false,
          this.deptExpand = true,
          this.deptNodeAll = false,
          this.form = {
            roleId: undefined,
            roleName: undefined,
            roleKey: undefined,
            roleSort: 0,
            status: "0",
            menuIds: [],
            deptIds: [],
            menuCheckStrictly: true,
            deptCheckStrictly: true,
            remark: undefined
          };
        this.resetForm("form");
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.dateRange = [];
        this.resetForm("queryForm");
        this.handleQuery();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.id)
        console.log(this.ids)
        this.single = selection.length!=1
        this.multiple = !selection.length
      },
      // //每次改变input框值时就改变this.myTableData的值
      // inputChange() { //循环每一项 只要content的值含有输入的searchVal值，就加进newList；反之，就无东西加进newList
      //   let newlist = this.formDat.filter(
      //     (item) => item.content.indexOf(this.searchVal) > -1
      //   );
      //   this.contactList = newlist;
      // },
  
  
      /** 新增按钮操作 */
      handleAdd() {
        this.reset();
        this.open = true;
        this.title = "新增个人财产详细信息";
      },
      /** 查看详细信息 */
      handleCheck(row){
        const id = row.id;
        this.$router.push("/self/selfeconomy/selfeconomyInfo/" + id);
  
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        const id = row.id;
        let jd = true
  
        this.$router.push({
          path:"/self/selfeconomy/selfeconomyInfo/" + id,
          query:{
            detail:jd
          }
        });
      },
  
  
      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(",")
        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) {
  
            addSelfEconomy(this.formDat).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        });
      },
      requestUpload(params)
      {
        var file = params.file;
        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) {
        const Ids = row.id || this.ids;
        this.$modal.confirm('是否确认删除数据项？').then(function() {
          return delSelfEconomy(Ids);
        }).then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        }).catch(() => {});
      },
      /** 导出按钮操作 */
      handleExport() {
        const Ids = this.ids;
  
        if(Ids.length==0)
        {
          this.download('zIdea/export', {
            ...this.queryParams
          }, `zIdea_${new Date().getTime()}.xlsx`)
        }else{
          this.download('zIdea/export1/'+Ids, {
          }, `zIdea_${new Date().getTime()}.xlsx`)
        }
      },
  
      /** 导入模板下载按钮操作 */
      handleExportModel() {
  
        this.download('/zIdea/model', {
        }, `zIdea_model_${new Date().getTime()}.xlsx`)
      },
  
      /** 导入操作*/
      handleEnport(params){
        var file = params.file;
        var formData = new FormData();
        formData.append('excelImport', file);
        let _this = this
  
        enload(formData).then(response => {
          _this.getList();
          Message({ message: "导入成功", type: 'warning' })
  
        }).catch(() => { Message({ message: "导入失败", type: 'error' })});
  
      }
    }
  };
  </script>
  <style>
  .app-container{
    background-color: #FEF7FC;
  }
  
  .el-table__row.statistics-warning-row {
    background: #E0EEFE;
  
  }
  .el-table__row.statistics-warning-row1 {
    background: #FFEFF2;
  
  }
  
  
  </style>
  

 ruoyi-ui/src/views/selfeconomy/selfeconomyInfo.vue

New file
@@ -0,0 +1,524 @@
<template>
    <div class="app-container">
      <div class="form-header mt">
        <h4 class="dt h4">个人财产详细信息 </h4>
      
      </div>
      <div style="padding-left:15px">
        <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-position="left" label-width="120px">

          <el-container>
            <el-row :span="12">
              <el-cow >
                <el-form-item label="日期" prop="happenTime" label-width="70px" style="background: #FAD1E0;border-radius: 7px 7px 7px 7px;opacity: 1;">
                  <el-input v-model="formData.happenTime" placeholder="请输入时间" clearable :style="{width: '100%'}" :disabled="dsb">
                  </el-input>
                </el-form-item>
              </el-cow>
              <el-cow >
                <el-form-item label="财产类别" prop="type" label-width="100px" style="background: #FAD1E0;border-radius: 7px 7px 7px 7px;opacity: 1;">
                  <el-input v-model="formData.type" placeholder="请输入财产类别" clearable :style="{width: '100%'}" :disabled="dsb">
                  </el-input>
                </el-form-item>
              </el-cow>
  
              <el-cow >
                <el-form-item label="收支名称" prop="incomeName" label-width="100px" style="background: #FAD1E0;border-radius: 7px 7px 7px 7px;opacity: 1;">
                  <el-input v-model="formData.incomeName" placeholder="请输入收支名称" clearable :style="{width: '100%'}" :disabled="dsb">
                  </el-input>
                </el-form-item>
              </el-cow>
              <el-cow >
                <el-form-item label="金额" prop="price" label-width="100px" style="background: #FAD1E0;border-radius: 7px 7px 7px 7px;opacity: 1;">
                  <el-input v-model="formData.price" placeholder="请输入金额" clearable :style="{width: '100%'}" :disabled="dsb">
                  </el-input>
                </el-form-item>
              </el-cow>
              <el-cow >
                <el-form-item label="期限" prop="timeLimit" label-width="100px" style="background: #FAD1E0;border-radius: 7px 7px 7px 7px;opacity: 1;">
                  <el-input v-model="formData.timeLimit" placeholder="请输入期限" clearable :style="{width: '100%'}" :disabled="dsb">
                  </el-input>
                </el-form-item>
              </el-cow>
              <el-cow >
                <el-form-item label="变更/注销" prop="isChange" label-width="80px" style="background: #FAD1E0;border-radius: 7px 7px 7px 7px;opacity: 1;">
                  <el-input v-model="formData.isChange" placeholder="请输入变更/注销" clearable :style="{width: '100%'}" :disabled="dsb">
                  </el-input>
                </el-form-item>
              </el-cow>
              <el-cow >
                <el-form-item label="产权" prop="propertyRight" label-width="80px" style="background: #FAD1E0;border-radius: 7px 7px 7px 7px;opacity: 1;">
                  <el-input v-model="formData.propertyRight" placeholder="请输入产权" clearable :style="{width: '100%'}" :disabled="dsb">
                  </el-input>
                </el-form-item>
              </el-cow>
              <el-cow >
                <el-form-item label="存放位置" prop="location" label-width="80px" style="background: #FAD1E0;border-radius: 7px 7px 7px 7px;opacity: 1;">
                  <el-input v-model="formData.location" placeholder="请输入存放位置" clearable :style="{width: '100%'}" :disabled="dsb">
                  </el-input>
                </el-form-item>
              </el-cow>
              <el-cow >
                <el-form-item label="是否注销" prop="status" label-width="100px" style="background: #FAD1E0;border-radius: 7px 7px 7px 7px;opacity: 1;">
                  <el-select v-model="formData.status" placeholder="请选择是否注销" clearable :style="{width: '100%'}" :disabled="dsb"  >
                    <el-option v-for="(item, index) in typeOptions" :key="index" :label="item.label" :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-cow>
              <el-cow >
                <el-form-item label="备注" prop="remark" label-width="45px" style="background: #FAD1E0;border-radius: 7px 7px 7px 7px;opacity: 1;">
                  <el-input v-model="formData.remark" placeholder="请输入备注" clearable :style="{width: '100%'}" :disabled="dsb"></el-input>
                </el-form-item>
              </el-cow>
            </el-row>
          </el-container>
          <h4 class="form-header">电子文件 </h4>
          <el-upload
            action="#"
            list-type="picture-card"
            multiple
            :http-request="requestUpload"
            :file-list="fileList"
          >
            <i slot="default" class="el-icon-plus"></i>
            <div slot="file" slot-scope="{file}">
              <img
                class="el-upload-list__item-thumbnail"
                :src="file.url"
                alt=""
                style="width: 147px; height: 147px"
                fit="cover"
                :preview-src-list="[file.url]"
              >
              <span class="el-upload-list__item-actions" >
              <span
                v-if="isShow"
                class="el-upload-list__item-preview"
                @click="handlePictureCardPreview(file)"
              >
                <i class="el-icon-zoom-in"></i>
              </span>
              <span
                v-if="isShow"
                class="el-upload-list__item-delete"
                @click="handleDownload(file.url)"
              >
                <i class="el-icon-download"></i>
              </span>
              <span
                v-if="isShow"
                class="el-upload-list__item-delete"
                @click="handleRemove(file)"
              >
                <i class="el-icon-delete"></i>
              </span>
            </span>
  
  
            </div>
          </el-upload>
  
          <!--<h4 class="form-header">其他附件 </h4>
          <el-upload
            action=""
            :file-list="fileListOther"
            class="upload-demo"
            multiple
            :on-preview="handlePreview"
  
            :on-remove="handleRemove"
            :http-request="requestUpload"
            :show-file-list="true"
          >
            <el-button v-if="isShow" type="primary" >点击上传</el-button>
            <template #tip>
              <div class="el-upload__tip">
              </div>
            </template>
  
  
          </el-upload>-->
          <h4 class="form-header">其他附件 </h4>
          <el-upload
            action=""
            :file-list="fileListOther"
            class="upload-demo"
            multiple
            list-type="picture-card"
            :on-preview="handleFileCardPreview"
            :on-remove="handleRemove"
            :http-request="requestUpload"
            :show-file-list="true"
          >
  
            <i slot="default" class="el-icon-plus"></i>
            <div slot="file" slot-scope="{file}">
              <img
                class="el-upload-list__item-thumbnail"
                src="../../assets/401_images/401.gif"
                alt=""
                style="width: 147px; height: 147px"
                fit="cover"
              >
              <span class="el-upload-list__item-actions">
                      <span v-if="isShow"
                            class="el-upload-list__item-preview"
                            @click="handleFileCardPreview(file)"
                      >
                        <i class="el-icon-zoom-in"></i>
                      </span>
                      <span
                        v-if="isShow"
                        @click="handleRemove(file)"
                        class="el-upload-list__item-delete"
  
                      >
                        <i class="el-icon-download"></i>
                      </span>
                      <span
                        v-if="isShow"
                        class="el-upload-list__item-delete"
                        @click="handleRemoveFile(file)"
                      >
                        <i class="el-icon-delete"></i>
                      </span>
                    </span>
  
  
            </div>
  
  
          </el-upload>
  
          <el-form-item size="large">
            <el-button v-if="isShow" type="primary" @click="submitForm" :disabled="dsb" >修改</el-button>
          </el-form-item>
        </el-form>
      </div>
  
      <el-dialog  :visible.sync="dialogVisible">
        <img w-full :src="dialogImageUrl"    style="width: 700px; height: 700px" alt="Preview Image" />
      </el-dialog>
  
  
    </div>
  </template>
  
  <script>
  
  import {blobValidate} from "@/utils/ruoyi";
  import errorCode from "@/utils/errorCode";
  import {Message} from "element-ui";
  import {getSelfEconomyInfo, updateSelfEconomy,download,uploadPic} from "@/api/selfeconomy/index";
  
  export default {
    components: {},
    props: [],
    data() {
      return {
        cdi:"个人财产详细信息",
        udi:"个人财产信息详情",
        fot:[".jpg",".jif"],
        fileList:[
        ],
        fileListOther:[
  
        ],
        dsb:true,
        btn:false,
        isShow:true,
   
        selfeconomyList: [],
  
        formData: {
          id:undefined,
          happenTime:undefined,
          type:undefined,
          status:undefined,
          isChange:undefined,
          incomeName:undefined,
          price:undefined,
          timeLimit:undefined,
          propertyRight:undefined,
          location:undefined,
          remark:undefined,
          url: undefined,
        },
        dialogImageUrl: '',
        dialogVisible: false,
        disabled: false,
        rules: {
            type: [{
            required: true,
            message: '请输入财产类别',
            trigger: 'blur'
          }],
          happenTime: [{
            required: true,
            message: '请选择时间',
            trigger: 'blur'
          }],
          status: [{
            // required: true,
            message: '请输入是否注销',
            trigger: 'blur'
          }],
          isChange: [{
            required: true,
            message: '请输入变更/注销',
            trigger: 'blur'
          }],
          price: [{
            required: true,
            message: '请输入金额',
            trigger: 'blur'
          }],
          incomeName: [{
            required: true,
            message: '请输入收支类别',
            trigger: 'blur'
          }],
          timeLimit: [{
            required: true,
            message: '请输入期限',
            trigger: 'blur'
          }],
          location: [{
            required: true,
            message: '请输入存放位置',
            trigger: 'blur'
          }],
          propertyRight: [{
            required: true,
            message: '请输入实现难度',
            trigger: 'blur'
          }],
  
          remark: [{
            // required: true,
            message: '请输入备注',
            trigger: 'blur'
          }],
        },
        typeOptions: [{
          value: '1',
          label: '是',
        },
          {
            value: '0',
            label: '否',
          }],
      }
    },
    computed: {},
    watch: {},
    created() {
      const id = this.$route.params && this.$route.params.id;
      let jd;
      if(this.$route.query.detail!=undefined)
      {
        jd =  this.$route.query.detail
        this.btn= jd
        this.dsb = !jd
        document.title = "修改个人财产详细信息";
        this.$route.meta.title = "修改个人财产详细信息";//列表的名称
      }
      else{
        document.title = "个人财产详细信息";
        this.$route.meta.title = "个人财产详细信息";//列表的名称
        this.isShow=true
      }
  
      let _this = this
      if (id) {
        this.loading = true;
        getSelfEconomyInfo(id).then((response) => {
          this.formData = response.data;
          let paths = response.data.url.split(",");
          for(let i = 0; i < paths.length; i++)
          {
            if(paths[i]!="") {
  
              let pth = paths[i].substr(paths[i].length - 4, paths[i].length)
  
              if (_this.fot.includes(pth) === true)
                _this.fileList.push({name:paths[i],url: process.env.VUE_APP_BASE_TRUE_API+paths[i]})
              else {
                // alert(paths[i])
                let nms = paths[i].split("\/")
                let nm = nms[nms.length - 1]
                _this.fileListOther.push({name:nm, url: process.env.VUE_APP_BASE_TRUE_API+paths[i]})
              }
            }
          }
          this.loading = false;
        });
        // this.getCateInfor()
  
      }
    },
    mounted() {},
    methods: {
      /** 查询类别信息 */
      // getCateInfor()
      // {
      //   let _this = this
      //   getCategory().then(response=>{
      //
      //     response.data.itemValues.replace("{","").replace("}","").split(",").map(elem=>{
      //       _this.typeOptions.push({"label":elem.split(":")[0], "value":elem.split(":")[0]})
      //     })
      //   })
      // },
      submitForm() {
        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.formData.url = ul+","+uls
  
        this.$refs['elForm'].validate(valid => {
  
  
          if (valid) {
            if (this.formData.id != undefined) {
              updateSelfEconomy(this.formData).then(response => {
                this.$modal.msgSuccess("修改成功");
                // this.open = false;
                this.btn=false
              });
            } else {
              this.$modal.msgSuccess("修改失败");
  
            }
          }
        })
      },
      resetForm() {
        this.$refs['elForm'].resetFields()
      },
      // //返回上一页
      // goBack(){
      //   this.$router.push("/familymodel/collection/index" );
      // },
      handlePreview(file)
      {
        let formData = {'path':"/"+file.url.replace(process.env.VUE_APP_BASE_TRUE_API,"")};
        let lens = formData.path.split(".")
        let suffix = lens[lens.length-1]
        download(formData).then(async (response) => {
          const isLogin = await blobValidate(response);
          let nt = new Date().getTime()
          let filename = 'selfeconomy_'+nt+'.'+suffix
          const blob = new Blob([response])
          saveAs(blob, filename)
        })
      },
      handleRemoveFile(file) {
        for(let i = 0; i < this.fileListOther.length; i++)
        {
          if(this.fileListOther[i].url==file.url)
            this.$delete(this.fileListOther,i);
        }
      },
      handleRemove(file) {
        for(let i = 0; i < this.fileList.length; i++)
        {
          if(this.fileList[i].url==file.url)
            this.$delete(this.fileList,i);
        }
      },
      handleFileCardPreview(file){
        this.dialogFileUrl = file.url;
        const Base64 = require('js-base64').Base64
        this.desurl = process.env.VUE_APP_BASE_OTHER_API+'onlinePreview?url='+encodeURIComponent(Base64.encode(this.dialogFileUrl));
        myWindow=window.open(this.desurl,'','width=1200,height=800,top=150,left=300');
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      handleDownload(url) {
        var formData = {'path':"/"+url.replace(process.env.VUE_APP_BASE_TRUE_API,"")};
  
        let lens = formData.path.split(".")
        let suffix = lens[lens.length-1]
        download(formData).then(async (response) => {
          const isLogin = await blobValidate(response);
          let nt = new Date().getTime()
          let filename = 'property_'+nt+'.'+suffix
          const blob = new Blob([response])
          saveAs(blob, filename)
        })
      },
      handleEdit()
      {
        this.dsb = false
        // this.btn = true
        this.isShow=false
      },
      requestUpload(params)
      {
        var file = params.file;
        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})
  
          }
        })
  
      },
  
      /** 导出按钮操作 */
      handleExport() {
        this.download('/zIdea/export', {
          ...this.queryParams
        }, `zIdea_${new Date().getTime()}.xlsx`)
      }
  
    }
  }
  
  </script>
  
  <style scoped>
  .app-container{
    background-color: #FEF7FC;
  }
  .mt
  {
    position: relative;
  }
  .dt{
    display: block;
  
  }
  .pt{
    right: 10px;
    top:-3px;
    display: block;
    position: absolute;
  }
  .form_item{
    font-size: 12px;
    font-family: Microsoft YaHei-Regular, Microsoft YaHei;
    font-weight: 400;
    color: #000000;
  }
  </style>