增加添加弹窗

2023-04-18 14:24:11 +08:00
parent f87f00b2e7
commit bc6177ea3f
7 changed files with 588 additions and 214 deletions
@@ -111,8 +111,10 @@ export default {
      this.$refs.examineForm.validate((valid) => {
        if (valid) {
          this.isSubmit = true
+          return true
        } else {
          this.$message.warning('请检查表单是否填写正确')
+          return false
        }
      })
    }
@@ -0,0 +1,401 @@
+<template>
+
+  <el-dialog
+    title="添加报告"
+    :visible.sync="dialogVisible"
+    width="50%"
+
+    :before-close="handleClose">
+    <div class="tag-search">
+      <el-row>
+        <el-col :span="24">
+          <div class="tag-item">
+            <label class="tag-title">报告年份</label>
+            <el-select v-model="q.year" multiple collapse-tags placeholder="请选择报告年份">
+              <template v-for="item in yearList">
+                <el-option :label="item" :value="item" :key="item"></el-option>
+              </template>
+            </el-select>
+          </div>
+        </el-col>
+        <el-col :span="24">
+          <div class="tag-item">
+            <el-tooltip :content="tagData[1].name" placement="top">
+              <label class="tag-title">{{ tagData[1].name }}</label>
+            </el-tooltip>
+            <div class="tag-show" :class="{'active': tagData[1].tagShow}">
+              <el-checkbox :indeterminate="tagData[1].isIndeterminate" v-model="tagData[1].checkAll"
+                           @change="(val) => handleCheckAllChange(val, 1)">全部
+              </el-checkbox>
+              <el-checkbox-group v-model="q.labelOneId"
+                                 @change="(val) => handleCheckedTagsChange(val, 1)">
+                <template v-for="item in tagData[1].tags">
+                  <el-checkbox :label="item.id" :key="item.id">{{ item.name }}</el-checkbox>
+                </template>
+              </el-checkbox-group>
+              <i @click="switchTagShow(1)"
+                 :class="{'el-icon-arrow-down': !tagData[1].tagShow, 'el-icon-arrow-up': tagData[1].tagShow}"></i>
+            </div>
+          </div>
+        </el-col>
+        <el-col :span="24">
+          <div class="tag-item">
+            <el-tooltip :content="tagData[2].name" placement="top">
+              <label class="tag-title">{{ tagData[2].name }}</label>
+            </el-tooltip>
+            <div class="tag-show" :class="{'active': tagData[2].tagShow}">
+              <el-checkbox :indeterminate="tagData[2].isIndeterminate" v-model="tagData[2].checkAll"
+                           @change="(val) => handleCheckAllChange(val, 2)">全部
+              </el-checkbox>
+              <el-checkbox-group v-model="q.labelTwoId"
+                                 @change="(val) => handleCheckedTagsChange(val, 2)">
+                <template v-for="item in tagData[2].tags">
+                  <el-checkbox :label="item.id" :key="item.id">{{ item.name }}</el-checkbox>
+                </template>
+              </el-checkbox-group>
+              <i @click="switchTagShow(2)"
+                 :class="{'el-icon-arrow-down': !tagData[2].tagShow, 'el-icon-arrow-up': tagData[2].tagShow}"></i>
+            </div>
+          </div>
+        </el-col>
+        <el-col :span="24">
+          <div class="tag-item">
+            <el-tooltip :content="tagData[3].name" placement="top">
+              <label class="tag-title">{{ tagData[3].name }}</label>
+            </el-tooltip>
+            <div class="tag-show" :class="{'active': tagData[3].tagShow}">
+              <el-checkbox :indeterminate="tagData[3].isIndeterminate" v-model="tagData[3].checkAll"
+                           @change="(val) => handleCheckAllChange(val, 3)">全部
+              </el-checkbox>
+              <el-checkbox-group v-model="q.labelThreeId"
+                                 @change="(val) => handleCheckedTagsChange(val, 3)">
+                <template v-for="item in tagData[3].tags">
+                  <el-checkbox :label="item.id" :key="item.id">{{ item.name }}</el-checkbox>
+                </template>
+              </el-checkbox-group>
+              <i @click="switchTagShow(3)"
+                 :class="{'el-icon-arrow-down': !tagData[3].tagShow, 'el-icon-arrow-up': tagData[3].tagShow}"></i>
+            </div>
+          </div>
+        </el-col>
+        <el-col :span="12">
+          <div class="tag-item">
+            <label class="tag-title">搜索:</label>
+            <el-input v-model="q.keyContent" placeholder="请输入搜索内容"></el-input>
+          </div>
+        </el-col>
+        <el-col :span="12" align="right" class="tag-btns">
+          <el-button type="primary" @click="search">查询</el-button>
+          <el-button type="default" @click="reset">重置</el-button>
+        </el-col>
+      </el-row>
+    </div>
+    <div class="table">
+      <vxe-table :data="tableData" :empty-render="{name: 'NotData'}" align="center" border stripe height="auto"
+                 ref="xTable" @checkbox-all="selectAllEvent" @checkbox-change="selectChangeEvent">
+        <vxe-column type="checkbox" width="60"></vxe-column>
+        <vxe-column show-overflow show-header-overflow field="labelOneName" :title="tagsForm.tags01.name"></vxe-column>
+        <vxe-column show-overflow show-header-overflow field="name" title="报告名称"></vxe-column>
+        <vxe-column show-overflow show-header-overflow field="labelTwoName" :title="tagsForm.tags02.name"></vxe-column>
+        <vxe-column show-overflow show-header-overflow field="labelThreeName" :title="tagsForm.tags03.name"></vxe-column>
+        <vxe-column show-overflow show-header-overflow field="year" title="报告年份"></vxe-column>
+        <vxe-column show-overflow show-header-overflow field="createDate" title="上传时间"></vxe-column>
+
+      </vxe-table>
+      <el-pagination
+        @size-change="handleLogSizeChange"
+        @current-change="handleLogCurrentChange"
+        :current-page="q.pageNo"
+        :page-sizes="[5, 10, 20]"
+        :page-size="q.pageSize"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="total"/>
+
+    </div>
+    <div class="done">
+      <el-button  type="primary"  @click.native="savaCheck">确定</el-button>
+      <el-button  type="default" @click.native="handleClose">取消</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  name: 'reportDialog',
+  data () {
+    return {
+      tagData: {
+        1: {
+          name: '',
+          tagShow: false,
+          tags: [],
+          isIndeterminate: true,
+          checkAll: false
+        },
+        2: {
+          name: '',
+          tagShow: false,
+          tags: [],
+          isIndeterminate: true,
+          checkAll: false
+        },
+        3: {
+          name: '',
+          tagShow: false,
+          tags: [],
+          isIndeterminate: true,
+          checkAll: false
+        }
+      },
+      processTable: [],
+      total: 0,
+      q: {
+        pageSize: 10,
+        pageNo: 1,
+        labelOneId: [],
+        labelTwoId: [],
+        labelThreeId: []
+      },
+      checkIds: [],
+      dialogVisible: false,
+      tableData: [],
+      ids: [], // 存储已经存在的报告
+      checkList: [],
+      yearList: []
+    }
+  },
+  props: {
+    // 获取标签
+    tagsForm: {
+      type: Object
+    },
+    // 获取已有的数据 在查询全部数据时不展示已有的
+    alreadyData: {
+      type: Array
+    }
+  },
+  methods: {
+    search () {
+      this.q.pageNo = 1
+      this.reportList()
+    },
+    // 切换展开隐藏
+    switchTagShow (type) {
+      this.tagData[type].tagShow = !this.tagData[type].tagShow
+    },
+    // 监听group checkbox
+    handleCheckedTagsChange (val, type) {
+      console.log(val,this.tagData[type].tags,"this.tagData[type].tags")
+      this.tagData[type].checkAll = (val.length === this.tagData[type].tags.length)
+      this.tagData[type].isIndeterminate = val.length < this.tagData[type].tags.length
+    },
+    // 监听全选按钮
+    handleCheckAllChange (val, type) {
+      switch (type) {
+        case 1:
+          this.q.labelOneId = val ? this.tagData[type].tags.map(item => item.id) : []
+          break
+        case 2:
+          this.q.labelTwoId = val ? this.tagData[type].tags.map(item => item.id) : []
+          break
+        case 3:
+          this.q.labelThreeId = val ? this.tagData[type].tags.map(item => item.id) : []
+          break
+      }
+      this.tagData[type].isIndeterminate = !val
+    },
+    // 标签列表
+    labelList () {
+      console.log(this.tagsForm,"      console.log(this.tagsForm,\"\")\n")
+      this.tagData[1].name = this.tagsForm.tags01.name
+      this.tagData[2].name = this.tagsForm.tags02.name
+      this.tagData[3].name = this.tagsForm.tags03.name
+      this.tagData[1].tags = this.tagsForm.tags01.childList
+      this.tagData[2].tags = this.tagsForm.tags02.childList
+      this.tagData[3].tags = this.tagsForm.tags03.childList
+    },
+    // 日期列表
+    reportDateList () {
+      this.$api.report.reportDateList().then(({ data }) => {
+        this.yearList = data.list
+      })
+    },
+    savaCheck () {
+    //  点击保存 需要把选中的数据传给父组件
+      this.$emit('confirm', this.checkList)
+      this.dialogVisible = false
+    },
+    show () {
+      this.ids = this.alreadyData.map(item => item.id)
+      this.labelList()
+      this.reportDateList()
+      // 调取接口获取数据
+      this.reportList()
+    },
+    // 重置
+    reset () {
+      this.q = {
+        keyContent: '',
+        year: [],
+        labelOneId: [],
+        labelTwoId: [],
+        labelThreeId: [],
+        pageNo: 1,
+        pageSize: 10
+      }
+      this.total = 0
+      this.tableData = []
+      this.tagData[1].checkAll = false
+      this.tagData[1].isIndeterminate = true
+      this.tagData[2].checkAll = false
+      this.tagData[2].isIndeterminate = true
+      this.tagData[3].checkAll = false
+      this.tagData[3].isIndeterminate = true
+      this.reportList()
+    },
+    // 列表
+    reportList () {
+      this.$api.report.reportList(this.q).then(({ data }) => {
+        this.tableData = data.records.filter(item => {
+          if (this.ids.indexOf(item.id) === -1) {
+            return item
+          }
+        })
+        this.total = data.total - this.alreadyData.length
+        this.q.pageNo = data.current
+        this.q.pageSize = data.size
+        if (!data.records.length && this.q.pageNo !== 1) {
+          this.q.pageNo = 1
+          this.reportList()
+        }
+        this.dialogVisible = true
+      })
+    },
+    handleClose () {
+      this.$refs.xTable.clearSelected()
+      this.dialogVisible = false
+    },
+    handleLogSizeChange (size) {
+      this.q.pageSize = size
+      this.reportList()
+    },
+    handleLogCurrentChange (page) {
+      this.q.pageNo = page
+      this.reportList()
+    },
+    selectAllEvent ({ checked }) {
+      const records = this.$refs.xTable.getCheckboxRecords()
+      this.checkList = records
+      this.checkIds = records.map(item => {
+        return item.id
+      })
+    },
+    selectChangeEvent ({ checked }) {
+      const records = this.$refs.xTable.getCheckboxRecords()
+      this.checkList = records
+      this.checkIds = records.map(item => {
+        return item.id
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.table{
+  padding: 10px 20px;
+  width: 100%;
+  height: 550px;
+}
+.done {
+  margin-top: 10px;
+  text-align: right;
+  padding:20px 0 10px ;
+
+  ::v-deep .el-button {
+    width: 80px;
+    height: 36px;
+    padding: 0;
+  }
+}
+.tag-search {
+  padding-top: 9px;
+
+  ::v-deep .el-date-picker,
+  ::v-deep .el-input {
+    width: 240px;
+  }
+
+  .tag-item {
+    margin-bottom: 15px;
+    display: flex;
+
+    .year {
+      ::v-deep .el-input__inner {
+        padding: 0 15px !important;
+      }
+    }
+
+    label.tag-title {
+      font-size: 14px;
+      font-weight: normal;
+      color: #646464;
+      display: inline-block;
+      width: 112px;
+      height: 19px;
+      line-height: 19px;
+      padding-left: 48px;
+      border-right: 1px solid #BFBFBF;
+      margin-right: 10px;
+      margin-top: 2.5px;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+
+    .tag-show {
+      flex: 1;
+      margin-right: 28px;
+      height: 19px;
+      overflow: hidden;
+      position: relative;
+
+      &.active {
+        height: auto;
+      }
+
+      ::v-deep .check-active{
+        .el-checkbox__label{
+          color: #434343;
+        }
+      }
+
+      ::v-deep .el-checkbox {
+        margin-right: 15px;
+        color: #434343;
+      }
+
+      ::v-deep .el-checkbox__label {
+        min-width: 80px;
+      }
+
+      ::v-deep .el-checkbox-group {
+        display: inline;
+      }
+
+      .el-icon-arrow-down,
+      .el-icon-arrow-up {
+        color: #C0C4CC;
+        cursor: pointer;
+        position: absolute;
+        right: 0;
+        top: 2px;
+      }
+    }
+  }
+
+  .tag-btns {
+    padding-right: 15px;
+  }
+}
+</style>
@@ -1,6 +1,6 @@
 <template>
  <div class="reportTable">
-    <el-button v-if="!disabled" type="primary"  size="big">添加报告</el-button>
+    <el-button v-if="!disabled" type="primary"  size="big" @click="addReport">添加报告</el-button>
    <el-button v-if="!disabled" type="success" size="big" @click="deleteAll">批量删除</el-button>
    <div class="table">
      <vxe-table :data="processTable" :empty-render="{name: 'NotData'}" align="center" border stripe v-table-min-height="500"
@@ -27,11 +27,13 @@
        :page-size="qLog.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"/>
+      <reportDialog ref="reportDialog" :tagsForm="tagsForm" :alreadyData="value" @confirm="addReportList"></reportDialog>
    </div>
  </div>
 </template>

 <script>
+import reportDialog from './reportDialog'
 export default {
  name: 'reportTable',
  props: {
@@ -45,6 +47,9 @@ export default {
      default: false
    }
  },
+  components: {
+    reportDialog
+  },
  data () {
    return {
      processTable: [],
@@ -97,6 +102,9 @@ export default {
    this.labelList()
  },
  methods: {
+    addReportList (list) {
+      this.$emit('updateTable', [...this.value , ...list])
+    },
    pageChage (current) {
      setTimeout(() => {
        current = current || this.qLog.pageNo
@@ -149,6 +157,9 @@ export default {
        return item.id
      })
    },
+    addReport () {
+      this.$refs.reportDialog.show()
+    },
    deleteAll () {
      this.reportDelete(this.checkIds)
    },