多层级el-upload修改

在这里插入图片描述

<template>
  <div class="container">
    <section class="mains">
      <div class="lbox" v-model="form">
        <p style="font-weight: bold;font-size: 20px;">目录</p>
        <div v-for="(e, i) in form.children" :key="i" :class="e.title == '总体情况' ? ' cp' : 'cp'"
          style="margin-left: 5px;">
          <p>
            <span>
              <i class="el-icon-edit-outline gray" @click="editDom(i,null,null, e)"></i>
              <span @click="goDom(i,null,null)"> {{e.indexCN}}、 {{e.title}}</span>
            </span>
            <span class="fr b" v-if="e.title == '落实情况'" @click="addDate(e, i)">添加</span>
          </p>
          <div v-for="(el,  ind) in e.children" :key="ind" :class=" e.title == '落实情况' ? 'ztbox':''">
            <p>
              <span>
                <i class="el-icon-edit-outline gray" @click="editDom(i,ind,null, el)"></i>
                <span @click="goDom(i,ind,null)" style="padding-left: 10px;"> ({{el.indexCN}}) {{el.title}} </span>
              </span>
              <i v-if="e.title == '落实情况' " class="el-icon-delete fr r" @click="delDate(el, i,ind)"></i>
            </p>
            <div v-for="(ele, index) in el.children" :key="index">
              <p @click="goDom(i, ind, index)">
                <i class="el-icon-edit-outline gray" @click="editDom(i,ind,index, ele)"></i>
                <span>{{index+1}}.{{ele.title}}</span>
              </p>
            </div>
          </div>
        </div>
      </div>
      <div class="rbox">
        <div class="title">
          <p class="titleP">
            {{companyName}}
            <el-input type="number" v-model="years" min="0" style="width: 100px;">
            </el-input>
            年第 <el-input type="number" min="0" v-model="roundNumber" style="width: 80px;"></el-input> 轮降雨应对措施
          </p>
          <div>
            <el-button type="primary" v-if="type == 'edit'|| type == 'add' " @click="submit">提交</el-button>
            <!-- <el-button type="primary" @click="submit2"> 获取</el-button> -->
          </div>
        </div>
        <div class="rtConbox">
          <div v-for="(e, i) in form.children" :key="i" :id="e.domId" class="contentBox">
            <p class="title1"> {{e.indexCN}}、 {{e.title}} </p>
            <div>
              <!-- v-if="e.children.length == 0" -->
              <el-input type="textarea" :rows="10" v-model="e.content" v-if="e.editItem ? e.editItem.indexOf(1)>=0 :''"
                placeholder="请输入··· ">
              </el-input>
              <div class="mianUpload" :class="(e.editItem.indexOf(2)>=0 || e.editItem.indexOf(3)>=0) ? '' :'hide' ">
                <div class="lUpload" v-if="e.editItem ? e.editItem.indexOf(2)>=0 :''">
                  <span style="width: 140px;margin-top: 5px;" v-show="type == 'add' || type =='edit'">
                    <img class="iconImg" src="@/assets/rainfall/file.png">
                    主要附件上传:</span>
                  <div class="uploadBox">
                    <el-upload :action="baseUrl+'file/upload'" :headers="headers" multiple :file-list="e.rainFile"
                      :on-success="function (res, file){return onSuccessDate(res, file, i, e , 'rainFileId')}"
                      :on-remove="function (res, file){return removeDate(res, file, i, e, 'rainFileId')}"
                      :before-remove="function (res, file){return beforeRemoveDate(res, file,i, e, 'rainFileId')}">
                      <el-button class="otherBtn">+上传附件</el-button>
                    </el-upload>
                  </div>
                </div>
                <div class="rUpload" v-if="e.editItem ? e.editItem.indexOf(3)>=0 :''">
                  <span style="width: 170px;margin-top: 5px;">
                    <img class="iconImg" src="@/assets/rainfall/folder.png">
                    文件夹内附件上传:</span>
                  <div class="uploadBox">
                    <el-upload :action="baseUrl+'file/upload'" :headers="headers" multiple :file-list="e.rainFolderFile"
                      :on-success="function (res, file){return onSuccessDate(res, file, i, e , 'rainFolderId')}"
                      :on-remove="function (res, file){return removeDate(res, file, i, e, 'rainFolderId')}"
                      :before-remove="function (res, file){return beforeRemoveDate(res, file, i, e, 'rainFolderId')}">
                      <el-button class="otherBtn">+上传附件</el-button>
                    </el-upload>
                  </div>
                </div>

              </div>
            </div>
            <div v-for="(el, ind) in e.children" :key="ind" :id="el.domId" class="contentBox">
              <!-- v-else -->
              <p class="title2">({{el.indexCN}}) {{el.title}}</p>
              <el-input type="textarea" :rows="10" v-model="el.content"
                v-if="el.editItem ? el.editItem.indexOf(1) >= 0 :''" placeholder="请输入··· "></el-input>
              <!-- :class="(el.editItem.indexOf(2)>=0 || el.editItem.indexOf(3)>=0) ? '' :'hide' " -->
              <div class="mianUpload" :class="(el.editItem.indexOf(2)>=0 || el.editItem.indexOf(3)>=0) ?'' :'hide' ">
                <div class="lUpload" v-if="el.editItem ? el.editItem.indexOf(2) >= 0 : ''">
                  <span style="width: 150px; margin-top: 5px;"> <img class="iconImg" src="@/assets/rainfall/file.png">
                    主要附件上传:</span>
                  <div class="uploadBox">
                    <el-upload :action="baseUrl+'file/upload'" :headers="headers" multiple :file-list="el.rainFile"
                      :on-success="function (res, file){return onSuccessDate(res, file, ind, el , 'rainFileId')}"
                      :on-remove="function (res, file){return removeDate(res, file, ind, el , 'rainFileId')}"
                      :before-remove="function (res, file){return beforeRemoveDate(res, file, ind, el , 'rainFileId')}">
                      <el-button class="otherBtn">+上传附件</el-button>
                    </el-upload>
                  </div>
                </div>
                <div class="rUpload" v-if="el.editItem ? el.editItem.indexOf(3) >= 0 :''">
                  <span style="width: 200px;margin-top: 5px;"> <img class="iconImg" src="@/assets/rainfall/folder.png">
                    文件夹内附件上传:</span>
                  <div class="uploadBox">
                    <el-upload :action="baseUrl+'file/upload'" :headers="headers" multiple
                      :file-list="el.rainFolderFile"
                      :on-success="function (res, file){return onSuccessDate(res, file, i, el, 'rainFolderId')}"
                      :on-remove="function (res, file){return removeDate(res, file, i, el, 'rainFolderId')}"
                      :before-remove="function (res, file){return beforeRemoveDate(res, file, i, el, 'rainFolderId')}">
                      <el-button class="otherBtn">+上传附件</el-button>
                    </el-upload>
                  </div>
                </div>
              </div>
              <div v-if="el.children.length > 0" v-for="(ele, index) in el.children" :key="index" :id="ele.domId"
                class="contentBox">
                <p class="title3">{{index+1}}.{{ele.title}}</p>
                <el-input type="textarea" :rows="10" v-model="ele.content"
                  v-if="ele.editItem ? ele.editItem.indexOf(1) >= 0 : ''" placeholder="请输入··· ">
                </el-input>
                <div class="mianUpload"
                  :class="(ele.editItem.indexOf(2)>=0 || ele.editItem.indexOf(3)>=0) ? '' :'hide' ">
                  <div class="lUpload" v-if="ele.editItem ? ele.editItem.indexOf(2) >= 0 :''">
                    <span style="width: 150px;margin-top: 5px;"> <img class="iconImg" src="@/assets/rainfall/file.png">
                      主要附件上传:</span>
                    <div class="uploadBox">
                      <el-upload :action="baseUrl+'file/upload'" :headers="headers" multiple :file-list="ele.rainFile"
                        :on-success="function (res, file){return onSuccessDate(res, file,index, ele , 'rainFileId')}"
                        :on-remove="function (res, file){return removeDate(res, file, index, ele, 'rainFileId')}"
                        :before-remove="function (res, file){return beforeRemoveDate(res, file, index, ele, 'rainFileId')}">
                        <el-button class="otherBtn">+上传附件</el-button>
                      </el-upload>
                    </div>
                  </div>
                  <div class="rUpload" v-if="ele.editItem ? ele.editItem.indexOf(3) >= 0:''">
                    <span style="width: 200px;margin-top: 5px;"> <img class="iconImg"
                        src="@/assets/rainfall/folder.png">
                      文件夹内附件上传:</span>
                    <div class="uploadBox">
                      <el-upload :action="baseUrl+'file/upload'" :headers="headers" multiple
                        :file-list="ele.rainFolderFile"
                        :on-success="function (res, file){return onSuccessDate(res, file,index, ele , 'rainFolderId')}"
                        :on-remove="function (res, file){return removeDate(res, file, index, ele, 'rainFolderId')}"
                        :before-remove="function (res, file){return beforeRemoveDate(res, file, index, ele, 'rainFolderId')}">
                        <el-button class="otherBtn">+上传附件</el-button>
                      </el-upload>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

      </div>
    </section>

    <el-dialog title="目录添加" :visible.sync="dialogVisible" width="30%">
      <div>
        <el-form ref="diaForm" :rules="diaRules" :model="diaForm" label-width="100px" style="width:90%"
          label-position="left">
          <el-form-item label="目录名称:" prop="title">
            <el-input v-model="diaForm.title"></el-input>
          </el-form-item>
          <el-form-item label="可编辑项:" prop="type">
            <el-checkbox-group v-model="diaForm.type" @change="chgDiatype">
              <el-checkbox name="type" label="文本框"></el-checkbox>
              <el-checkbox name="type" label="单附件上传"></el-checkbox>
              <el-checkbox name="type" label="文件夹上传" :disabled="editDomIndex"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="文件夹名称:" v-show="folderNamebox">
            <el-input type="textarea" :rows="5" v-model="diaForm.folderName"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="getDid('diaForm')">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>
<script>
  import { getToken } from '@/utils/auth'
  import request from "@/api/rainfall/measures";
  import user from '@/api/Auth/user'

  export default {
    name: 'methodEdit',
    data() {
      return {
        id: null,
        type: null,
        companyName: null,
        companyId: null,
        years: null,
        roundNumber: null,

        baseUrl: process.env.VUE_APP_BASE_API,
        headers: {
          Authorization: getToken()
        },
        diaTypes: [
          { label: '文本框', value: 1 },
          { label: '单附件上传', value: 2 },
          { label: '文件夹上传', value: 3 },
        ],
        form: {},
        dialogVisible: false,
        theDomIndex: 0,
        theDom: null,
        diaForm: {
          title: null,
          type: [],
          folderName: null
        },
        diaRules: {
          title: [
            { required: true, message: '请输入目录名称', trigger: 'blur' },
          ],
          // type: [
          //   { type: 'array', required: true, message: '请至少选择一个', trigger: 'change' }
          // ],
        },
        folderNamebox: false,
        editDomIndex: false
      }
    },
    watch: {
      years(newVal, oldVal) {
        if (newVal) {
          if (typeof newVal == 'string') {
            var n = parseInt(newVal)
            if (n <= 0) {
              this.$message({
                message: '请填写正确的年份',
                type: 'warning'
              });
              return
            }
          } else {
            var n = newVal;
          }
          this.getTitle(n)
        }
      }
    },
    created() {
      this.id = this.$route.query.id ? this.$route.query.id : ''
      this.type = this.$route.query.type ? this.$route.query.type : ''
      let userName = sessionStorage.getItem('userName');
      if (this.type == 'add') {
        this.getCompany(userName);
        var y = new Date().getFullYear();
        this.getTitle(y)
        this.initForm()
      } else {
        this.getDetail();
      }
    },
    methods: {
      getCompany(data) {
        user.getData({ keyName: data }).then((res) => {
          this.companyName = res.data[0].organization.orgCnName ? res.data[0].organization.orgCnName : '';
          this.companyId = res.data[0].organization.id ? res.data[0].organization.id : '';
        })
      },
      getTitle(data) {
        // 1 获取当前年  2通过当前年+当前公司 - 获取当前轮数+1
        if (data) {
          this.years = data
        }
        request.getMaxNumber(this.years).then((res) => {
          if (this.type == 'add') {
            this.roundNumber = res.object + 1
          }
        })
      },
      initForm() {
        this.form = {
          id: null,
          name: null,
          companyName: null,
          companyId: this.companyId,
          title: null,
          content: null,
          parentId: 0,
          priority: 1,
          rainFileId: [],
          rainFolderId: [],
          isSummary: false,
          roundNumber: null,
          years: null,
          children: [
            {
              title: '概况',
              priority: 2,
              content: '',
              rainFileId: [],
              rainFolderId: [],
              editItem: '1',
              isSummary: false,
              folderName: '附件:$department第$number轮降雨应对概况',
              children: []
            },
            {
              title: '应对措施',
              priority: 3,
              content: '',
              rainFileId: [],
              rainFolderId: [],
              editItem: '0',
              isSummary: false,
              folderName: '附件:$department第$number轮降雨应对措施',
              children: [
                {
                  title: '降雨预报,预警及研判情况',
                  priority: 1,
                  content: '',
                  rainFileId: [],
                  rainFolderId: [],
                  children: [],
                  editItem: '1,3',
                  isSummary: false,
                  folderName: '附件1:$department第$number轮降雨应对24小时、12小时、6小时、2小时雨情预警情况',
                },
                {
                  title: '领导干部靠前指挥情况',
                  priority: 2,
                  content: '',
                  rainFileId: [],
                  rainFolderId: [],
                  children: [],
                  editItem: '1,2,3',
                  isSummary: false,
                  folderName: '附件2:$department第$number轮降雨应对干部包保明细表(总)',
                },
                {
                  title: '施工队伍、大型机械联系情况',
                  priority: 3,
                  content: '',
                  rainFileId: [],
                  rainFolderId: [],
                  children: [],
                  editItem: '1,2',
                  isSummary: false,
                  folderName: '附件:$department第$number轮降雨应对铁路沿线抢险(工程)队伍及大型抢险机械联系情况',
                },
                {
                  title: '水库联系情况',
                  priority: 4,
                  content: '',
                  rainFileId: [],
                  rainFolderId: [],
                  children: [],
                  editItem: '1,2',
                  isSummary: false,
                  folderName: '附件:$department第$number轮降雨应对铁路沿线水库联系情况',
                },
                {
                  title: '轨道车分布情况',
                  priority: 5,
                  content: '',
                  rainFileId: [],
                  rainFolderId: [],
                  children: [],
                  editItem: '1,2',
                  isSummary: false,
                  folderName: '附件:$department第$number轮降雨应对轨道车动态分布情况',
                },
                {
                  title: '防洪看守点安排情况',
                  priority: 6,
                  content: '',
                  rainFileId: [],
                  rainFolderId: [],
                  children: [],
                  editItem: '1,2',
                  isSummary: false,
                  folderName: '附件:$department第$number轮降雨应对降雨看守(以守代巡)点到位、抽查情况',
                },
                {
                  title: '冒雨巡查人员安排情况',
                  priority: 7,
                  content: '',
                  rainFileId: [],
                  rainFolderId: [],
                  children: [],
                  editItem: '1,2',
                  isSummary: false,
                  folderName: '附件:$department第$number轮降雨应对冒雨巡查人员预安排',
                },
                {
                  title: '雨后检查人员安排情况',
                  priority: 8,
                  content: '',
                  rainFileId: [],
                  rainFolderId: [],
                  children: [],
                  editItem: '1,2',
                  isSummary: false,
                  folderName: '附件:$department第$number轮降雨应对雨后检查预安排',
                },
                {
                  title: '添乘检查人员安排情况',
                  priority: 9,
                  content: '',
                  rainFileId: [],
                  rainFolderId: [],
                  children: [],
                  editItem: '1,2',
                  isSummary: false,
                  folderName: '附件:$department第$number轮降雨应对加强防洪添乘巡查计划',
                },
                {
                  title: '超强降雨分段巡守安排情况',
                  priority: 10,
                  content: '',
                  rainFileId: [],
                  rainFolderId: [],
                  children: [],
                  editItem: '1,2',
                  isSummary: false,
                  folderName: '附件:$department第$number轮降雨应对连续灾害性超强降雨分段巡守情况',
                }
              ]
            },
            {
              title: '落实情况',
              priority: 4,
              content: null,
              rainFileId: [],
              rainFolderId: [],
              editItem: '2',
              folderName: '附件:$department第$number轮降雨应对落实情况',
              children: []
            },
            {
              title: '总体情况',
              priority: 5,
              content: null,
              rainFileId: [],
              rainFolderId: [],
              editItem: '0',
              folderName: '附件:$department第$number轮降雨应对总体情况',
              children: [
                {
                  title: '雨情情况',
                  priority: 1,
                  content: '',
                  rainFileId: [],
                  rainFolderId: [],
                  children: [],
                  editItem: '1',
                  isSummary: false,
                  folderName: '附件:$department第$number轮降雨应对总体情况',
                },
                {
                  title: '雨量警戒执行情况',
                  priority: 2,
                  content: '',
                  rainFileId: [],
                  rainFolderId: [],
                  children: [],
                  editItem: '1',
                  isSummary: false,
                  folderName: '附件:$department第$number轮降雨应对雨量警戒执行情况',
                },
                {
                  title: '水害隐患处置情况',
                  priority: 3,
                  content: '',
                  rainFileId: [],
                  rainFolderId: [],
                  children: [],
                  editItem: '1',
                  isSummary: false,
                  folderName: '附件:$department第$number轮降雨应对水害隐患处置情况',
                },
              ]
            }
          ],
        }

        this.doList()
      },
      doList() {
        this.form.children.forEach((e, i) => {
          e['domId'] = 'dom_' + i
          e['indexCN'] = this.turnNumToText(i + 1);//添加id属性
          e['editType'] = this.doEditItem(e.editItem)
          e.children.forEach((el, ind) => {
            el['domId'] = 'dom_' + i + '_' + ind
            el['indexCN'] = this.turnNumToText(ind + 1);//添加id属性
            el['editType'] = this.doEditItem(el.editItem)
            el.children.forEach((ele, index) => {
              ele['domId'] = 'dom_' + i + '_' + ind + '_' + index
              ele['indexCN'] = index + 1;//添加id属性
              // ele['indexCN'] = this.turnNumToText(index + 1);//添加id属性
              ele['editType'] = this.doEditItem(ele.editItem)
            });
          });
        });
      },
      doEditItem(str) {
        if (str) {
          let typeArr = str.split(',');
          let arr = []
          typeArr.forEach(e => {
            if (e == 1) {
              arr.push('文本框')
            } else if (e == 2) {
              arr.push('单附件上传')
            } else if (e == 3) {
              arr.push('文件夹上传')
            }
          });
          return arr;
        }
      },
      getDetail() {
        request.getDetail(this.id).then((res) => {
          this.form = res.object;
          this.years = res.object.years;
          this.roundNumber = res.object.roundNumber;
          this.companyName = res.object.company.orgCnName;
          this.companyId = res.object.company.id;
          this.doList();
        });
      },
      chgDiatype(val) {
        var flag = false;
        var arr = val;
        if (arr.indexOf("文件夹上传") > -1) {
          flag = true;
        }
        this.folderNamebox = flag
        // console.log(this.diaForm);
      },
      delDate(e, i, ind) {
        this.$confirm('此操作将永久删除该条记录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.form.children[i].children.splice(ind, 1);
        }).catch(() => {
        });
      },
      addDate(e, i) {
        this.dialogVisible = true;
        this.editDomIndex = true
        this.diaForm = {
          priority: e.children.length,
          title: 'XX月XX日落实情况',
          type: ['文本框', '单附件上传'],
          editItem: "1,2",
          folderName: ''
        };
        this.theDomIndex = i;

      },
      editDom(i, ind, index, dom) {
        this.dialogVisible = true;
        this.editDomIndex = false
        if (dom.editType) {
          this.folderNamebox = dom.editType.includes('文件夹上传')
        }
        if (index || index == 0) {
          this.editDomIndex = true
        }
        this.diaForm = {
          title: dom.title ? dom.title : '',
          type: dom.editType ? dom.editType : '',
          folderName: dom.folderName ? dom.folderName : ''
        };
        this.theDomIndex = [i, ind, index];
        this.theDom = dom;
      },
      getDid(formName) {
        if (this.diaForm.type.indexOf('文件夹上传') == 1 && !this.diaForm.folderName) {
          this.$message({
            message: '请填写文件夹名称',
            type: 'warning'
          });
          return;
        }

        if (this.diaForm.title.indexOf("XX月XX日") == 0) {
          this.$message({
            message: '请填写降雨日期',
            type: 'warning'
          });
          return;
        }

        let typeTArr = this.diaForm.type;
        let typeSArr = '';
        if (typeTArr.length == 0) {
          typeSArr += 0
        } else {
          typeTArr.forEach(e => {
            if (e == '文本框') {
              typeSArr += 1 + ','
            } else if (e == '单附件上传') {
              typeSArr += 2 + ','
            } else if (e == '文件夹上传') {
              typeSArr += 3 + ','
            }
          });
        }

        this.$refs[formName].validate((valid) => {
          if (valid) {
            //add
            if (typeof this.theDomIndex == 'number') {
              let obj =
              {
                title: this.diaForm.title,
                content: null,
                rainFileId: [],
                rainFolderId: [],
                editItem: "0",
                priority: this.diaForm.priority + 1,
                children: [
                  {
                    title: '雨情情况',
                    priority: 1,
                    content: null,
                    rainFileId: [],
                    rainFolderId: [],
                    editItem: typeSArr,
                    editType: typeTArr,
                    isSummary: true,
                    folderName: '附件:$department第$number轮降雨雨情情况'
                  },
                  {
                    title: '雨量警戒执行情况',
                    priority: 2,
                    content: null,
                    rainFileId: [],
                    rainFolderId: [],
                    editItem: typeSArr,
                    editType: typeTArr,
                    isSummary: true,
                    folderName: '附件11:$department第$number轮降雨应对雨量警戒信息传递记录表'
                  },
                  {
                    title: '登乘机车、轨道车检查情况',
                    priority: 3,
                    content: null,
                    rainFileId: [],
                    rainFolderId: [],
                    editItem: typeSArr,
                    editType: typeTArr,
                    isSummary: true,
                    folderName: '附件:$department第$number轮降雨应对登乘机车、轨道车检查情况'
                  },
                  {
                    title: '雨后检查情况',
                    priority: 4,
                    content: null,
                    rainFileId: [],
                    rainFolderId: [],
                    editItem: typeSArr,
                    editType: typeTArr,
                    isSummary: true,
                    folderName: '附件12:$department第$number轮降雨应对雨后网格化检查记录表'
                  },
                  {
                    title: '水害隐患处置情况',
                    priority: 5,
                    content: null,
                    rainFileId: [],
                    rainFolderId: [],
                    editItem: typeSArr,
                    editType: typeTArr,
                    isSummary: true,
                    folderName: '附件13:$department第$number轮降雨应对水害隐患处置情况'
                  }
                ]
              }
              this.form.children[this.theDomIndex].children.push(obj)
              this.doList();
              this.dialogVisible = false;
            } else {
              var typeStr = this.diaForm.type.toString();
              this.$set(this.theDom, 'title', this.diaForm.title);
              this.$set(this.theDom, 'editItem', typeSArr);
              this.$set(this.theDom, 'editType', typeTArr);
              this.$set(this.theDom, 'folderName', this.diaForm.folderName);
              this.dialogVisible = false;
            }
            //edit
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      goDom(i, ind, index) {
        if (index) {
          var dId = 'dom_' + i + '_' + ind + '_' + index
        } else if (ind) {
          var dId = 'dom_' + i + '_' + ind
        } else {
          var dId = 'dom_' + i
        }
        document.getElementById(dId).scrollIntoView();
      },

      // 上传照片成功  
      //res, file, index, form.dateList , 'files'
      onSuccessDate(res, file, index, list, name) {
        let arr1
        if (name == 'rainFileId') {
          if (!list.rainFileId) {
            arr1 = []
          } else {
            arr1 = list.rainFileId
          }
          let arr2 = res.object[0].id
          let newArr = arr1.concat(arr2)
          this.$set(list, 'rainFileId', newArr)
        }
        if (name == 'rainFolderId') {
          if (!list.rainFolderId) {
            arr1 = []
          } else {
            arr1 = list.rainFolderId
          }
          let arr2 = res.object[0].id
          let newArr = arr1.concat(arr2)
          this.$set(list, 'rainFolderId', newArr)
        }
      },
      removeDate(res, file, index, list, name) {
        // 1 循环 file  获得  新的 ids[] ;  2 替换 list.rainFileId ;3 setdata
        // console.log('removeDate', res, file, index, list, name)
        let idsN = file.map(e => {
          if (e.id) {
            return e.id
          } else {
            return e.response.object[0].id
          }
        })
        if (name == 'rainFileId') {
          this.$set(list, 'rainFileId', idsN)
        } else if (name == 'rainFolderId') {
          this.$set(list, 'rainFolderId', idsN)
        }
      },
      beforeRemoveDate(file, fileList, name) {
        return this.$confirm(`确定移除 ${file.name}?`);
      },
      submit() {
        this.form.companyId = this.companyId;
        this.form.companyName = this.companyName;
        this.roundNumberCn = this.intToChinese(this.roundNumber);
        this.form.roundNumberCn = this.roundNumberCn;
        this.form.roundNumber = parseInt(this.roundNumber);
        this.form.years = parseInt(this.years);
        this.form.title = this.companyName + this.years + '年第' + this.roundNumber + '轮降雨应对措施';
        if (!this.form.years || this.form.years <= 0) {
          this.$message({
            message: '请填写正确的年份',
            type: 'warning'
          });
          return
        }
        if (!this.form.roundNumber || this.form.roundNumber <= 0) {
          this.$message({
            message: '请填写正确的降雨轮数',
            type: 'warning'
          });
          return
        }
        // if (!this.form.years) {
        //   this.$message({
        //     message: '请填写正确的年份',
        //     type: 'warning'
        //   });
        //   return
        // }
        // if (!this.form.roundNumber) {
        //   this.$message({
        //     message: '请填写降雨轮数',
        //     type: 'warning'
        //   });
        //   return
        // }
        // this.submit2();
        request.addRainfall(this.form).then((res) => {
          if (res.flag == "0") {
            this.$fns.success(res.msg);
          }
        })
      },
      arrTostr(arr) {
        let str = '';
        for (var i = 0; i < arr.length; i++) {
          if (i == (arr.length - 1)) {
            str += arr[i]
          } else {
            str += arr[i] + ','
          }
        }
        return str
      },
      submit2() {
        this.form.companyId = this.companyId;
        this.form.companyName = this.companyName;
        this.roundNumberCn = this.intToChinese(this.roundNumber);
        this.form.roundNumberCn = this.roundNumberCn;
        this.form.roundNumber = parseInt(this.roundNumber);
        this.form.years = parseInt(this.years);
        this.form.title = this.companyName + this.years + '年第' + this.roundNumberCn + '轮降雨应对措施';
        if (this.form.roundNumber <= 0) {
          this.$message({
            message: '最小降雨轮数,不能小于1',
            type: 'warning'
          });
          return
        }

        console.log('fff', this.form)

      },
      downlaodFeil(e) {
        let fileName = '';
        let fileId = '';
        if (e.id) {
          fileName = e.originName;
          fileId = e.id;
        }

        request.fileDownload(fileId).then((res) => {
          const data = res
          //const url = window.URL.createObjectURL(new Blob([data], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" }))
          var blob = new Blob([data])
          var url = window.URL.createObjectURL(blob)
          var link = document.createElement('a')
          link.style.display = 'none'
          link.href = url
          link.setAttribute('download', fileName)
          document.body.appendChild(link)
          link.click()
          document.body.removeChild(link)
        })
      },

      // 简单的数字序号转中文序号,只支持到99
      turnNumToText(num) {
        if (Number.isInteger(Number(num)) && Number(num) < 100 && Number(num) > 0) {
          const integerTextArr = ['', '十', '二十', '三十', '四十', '五十', '六十', '七十', '八十', '九十']
          const singleTextArr = ['', '一', '二', '三', '四', '五', '六', '七', '八', '九']
          let textNum = ''
          if (num < 10) {
            textNum = singleTextArr[num]
          } else {
            let tmpNumArr = String(num).split('')
            textNum = integerTextArr[tmpNumArr[0]] + singleTextArr[tmpNumArr[1]]
          }
          return textNum
        } else {
          return new Error('turnNumToText 参数必须为整数,且大于0小于100')
        }
      },
      intToChinese(num) {
        if (!/^\d*(\.\d*)?$/.test(num)) {
          // alert("Number is wrong!");
          return "Number is wrong!";
        }
        let AA = new Array("零", '一', '二', '三', '四', '五', '六', '七', '八', '九');
        let BB = new Array("", "十", "百", "千", "万", "亿", "点", "");
        let a = ("" + num).replace(/(^0*)/g, "").split("."),
          k = 0,
          re = "";
        for (let i = a[0].length - 1; i >= 0; i--) {
          switch (k) {
            case 0:
              re = BB[7] + re;
              break;
            case 4:
              if (!new RegExp("0{4}\\d{" + (a[0].length - i - 1) + "}$").test(a[0]))
                re = BB[4] + re;
              break;
            case 8:
              re = BB[5] + re;
              BB[7] = BB[5];
              k = 0;
              break;
          }
          if (k % 4 == 2 && a[0].charAt(i + 2) != 0 && a[0].charAt(i + 1) == 0) re = AA[0] + re;
          if (a[0].charAt(i) != 0) re = AA[a[0].charAt(i)] + BB[k % 4] + re;
          k++;
        }
        if (a.length > 1) { //加上小数部分(如果有小数部分) 
          re += BB[6];
          for (let i = 0; i < a[1].length; i++) re += AA[a[1].charAt(i)];
        }
        if (re.charAt(1) == "十" && re.charAt(0) == "一") {
          return re.slice(1);
        } else {
          return re;
        }
      },
    }
  }
</script>
<style scoped>
  body {
    margin: 0 0;
    padding: 0 0;
  }

  .mains {
    display: flex;
    flex-wrap: wrap;
    height: 82vh;
  }

  .lbox {
    width: 18%;
    height: 100%;
    overflow-y: auto;
    margin-right: 20px;
    padding: 0 20px;
    color: #333;
    font-size: 14px;
    border: 1px solid #EBEEF5;
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    line-height: 20px;
  }



  .rbox {
    width: 80%;
    height: 100%;
    border: 1px solid #EBEEF5;
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  }

  .dateBox div {
    height: 800px;
    background: rgb(211, 218, 211);
    margin: 20px 0;
  }

  .title {
    display: flex;
    border-bottom: 1px solid #dcdfe6;
  }

  .title>P {
    width: 91%;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
  }

  .title [type="button"] {
    margin: 10px;
  }

  .titleP .el-input {
    width: 70px;
  }

  .rtConbox {
    padding: 0 40px;
    overflow-y: auto;
    height: 85%;
  }

  .rtConbox p {
    font-weight: bold;
  }

  .contentBox {
    padding: 0 0 20px 0;
  }


  .mianUpload {
    display: flex;
    padding: 15px 0;
    /* border-right: 1px solid #ebeef5;
    border-bottom: 1px solid #ebeef5;
    border-left: 1px solid #ebeef5; */
    border: 1px solid #ebeef5;
    /* height: 55px;
    line-height: 55px; */
  }

  .lUpload,
  .rUpload {
    width: 50%;
    display: flex;
    padding-left: 30px;
  }

  .rUpload {
    border-left: 1px solid #ebeef5;
  }

  .uploadBox {
    width: 72%;
  }

  ::v-deep .el-textarea__inner {
    border-left: 1px solid #ebeef5;
  }

  /* .lUpload span,
  .rUpload span {
    line-height: 35px;
  } */

  .el-form {
    padding-left: 20px;
    width: 625px;
  }

  .b {
    color: #3B9AFF;
  }

  .r {
    color: #F84646;
  }

  .gray {
    color: #859FCE;
  }

  .fl {
    float: left;
  }

  .fr {
    float: right;
  }

  .iconImg {
    width: 16px;
    height: 16px;
    position: relative;
    top: 2px;
  }

  .cp {
    cursor: pointer;
  }

  .ztbox {
    border-bottom: 1px solid #ebeef5;
  }

  .hide {
    display: none !important;
  }

  .el-icon-edit-outline {
    margin-right: 10px;
  }

  .title1 {
    font-weight: bold;
    font-size: 18px;
  }

  .title2 {
    margin: 20px 10px;
    font-size: 18px;
  }

  .title3 {
    margin: 20px;
  }

  ::v-deep .el-upload-list__item .el-icon-close-tip {
    display: none !important;
  }
</style>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值