议事添加附件

Lou

2024-03-23 f8b6f4ef601f2bccb8d0e08e338c7d6a31fd342d

 src/views/article/components/deitDiscussion.vue

@@ -1,13 +1,3 @@
<!--
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2024-01-04 15:18:13
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2024-01-04 17:13:22
 * @FilePath: \jczz_web\src\views\article\components\deitDiscussion.vue
 * @Description:
 *
 * Copyright (c) 2024 by shuishen, All Rights Reserved.
-->
<template>
  <div>
    <el-dialog title="" append-to-body :visible.sync="popupTableShow" width="80%" :before-close="handleClose">
@@ -41,51 +31,83 @@
    </el-dialog>

    <el-dialog title="" append-to-body :visible.sync="popupTableUserShow" width="80%" :before-close="userHandleClose">
      <avue-crud :data="userData" :page="userPage" :option="userOption"></avue-crud>
      <basic-container>
        <avue-crud :data="userData" :page="userPage" :option="userOption" @search-change="searchChange"
          @search-reset="searchReset">
          <template slot-scope="{type,size,row }" slot="menuLeft">
            <el-button type="warning" size="small" plain icon="el-icon-download" @click="handleExport">导出
            </el-button>
          </template>
        </avue-crud>
      </basic-container>
    </el-dialog>
  </div>
</template>

<script>
  import {
    getListPd,
    getDetailPd,
    addPd,
    updatePd,
    removePd
  } from "@/api/discuss/publicDiscuss"
import {
  getListPd,
  getDetailPd,
  addPd,
  updatePd,
  removePd
} from "@/api/discuss/publicDiscuss"

  import {
    getPage
  } from "@/api/discuss/userTopics"

  import website from '@/config/website'
import {
  getPage
} from "@/api/discuss/userTopics"
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
import Qs from "qs"
import {
  exportBlob
} from "@/api/common"
import {
  getToken
} from '@/util/auth'
import {
  downloadXls
} from "@/util/util"
import {
  dateNow
} from "@/util/date"
import website from '@/config/website'


  import {
    getLists,
    getList,
    getDetail,
    add,
    update,
    remove
  } from "@/api/discuss/topics"
import {
  getLists,
  getList,
  getDetail,
  add,
  update,
  remove
} from "@/api/discuss/topics"

  export default {
    data() {
      return {
        popupTableShow: false,
        popupTableUserShow: false,
export default {
  data() {
    return {
      popupTableShow: false,
      popupTableUserShow: false,

        loading: true,
      loading: true,

        ontitle: '编辑议题',
        editFlag: false,

        disCussFrom: {
          discussContent: '',
          optionRange: 0,
          sort: 1,
      ontitle: '编辑议题',
      editFlag: false,
      disCussFromListClone: {},
      disCussFrom: {
        discussContent: '',
        optionRange: 0,
        sort: 1,
        optionContent: '',
        optionDetail: '',
        number: '',
        createTime: '',
        updateTime: '',
        deleteFlag: '',
        articleId: '',
        parentId: '',
        level: '',
        children: [{
          optionContent: '',
          optionDetail: '',
          number: '',
@@ -95,345 +117,511 @@
          articleId: '',
          parentId: '',
          level: '',
          children: [{
            optionContent: '',
            optionDetail: '',
            number: '',
            createTime: '',
            updateTime: '',
            deleteFlag: '',
            articleId: '',
            parentId: '',
            level: '',
          }]
        }]
      },
      optionDiscuss: {
        emptyText: '取消',
        column: [{
          label: '议题',
          prop: 'discussContent',
          type: 'input',
          row: true,
          rules: [{
            required: true,
            message: '请输入议题',
            trigger: 'blur'
          }],
        },
        optionDiscuss: {
          emptyText: '取消',
          column: [{
              label: '议题',
              prop: 'discussContent',
              type: 'input',
              row: true,
            },
            {
              label: '选项范围',
              prop: 'optionRange',
              type: 'radio',
              button: true,
              row: true,
              dicData: [{
                label: '多选',
                value: 1
              }, {
                label: '单选',
                value: 0
              }]
            },
            {
              label: '排序',
              prop: 'sort',
              controlsPosition: '',
              type: 'number'
            },
            {
              label: '选项内容',
              prop: 'children',
              type: 'dynamic',
              span: 24,
              children: {
                column: [{
                  label: '选项标题',
                  prop: 'optionContent',
                  type: 'input',
                  rules: [{
                    required: true,
                    message: '请输入选项标题',
                    trigger: 'blur'
                  }]
                }, {
                  label: '选项说明',
                  prop: 'optionDetail',
                  type: 'input',
                }]
              }
            },
          ]
        {
          label: '议题必填',
          prop: 'mandatoryFlag',
          type: 'radio',
          value: 1,
          button: true,
          row: true,
          dicData: [{
            label: '否',
            value: 1
          }, {
            label: '是',
            value: 2
          }],
          rules: [{
            required: true,
            message: '请选择是否必填',
            trigger: 'blur'
          }],
        },
        {
          label: '选项范围',
          prop: 'optionRange',
          type: 'radio',
          value: 0,
          button: true,
          row: true,
          dicData: [{
            label: '单选',
            value: 0
          }, {
            label: '多选',
            value: 1
          }],
          rules: [{
            required: true,
            message: '请选项范围',
            trigger: 'blur'
          }],
        },

        // 表单数据
        form: {},
        data: [],
        optionList: {
          headerAlign: 'center',
          align: 'center',
          border: true,
          addBtn: false,
          editBtn: false,
          delBtn: false,
          defaultExpandAll: true,
          rowKey: 'id',
          rowParentKey: 'parentId',
          column: [{
              label: '标题',
              prop: 'discussContent',
            },
            {
              label: '选项内容',
              prop: 'optionContent',
            }
          ]
        {
          label: '最多可选',
          prop: 'optionNumber',
          display: false,
          min: 1,
          type: 'number',
          step: 1,
          value: 1,
          rules: [{
            required: true,
            message: '请输入最多可选择数量',
            trigger: 'blur'
          }],
          span: 4,
        },

        articleId: '',

        userData: [],
        userOption: {
          labelWidth: 96,
          searchLabelWidth: 96,
          searchShow: true,
          searchMenuSpan: 3,
          // menuWidth: 500,

          height: "auto",
          calcHeight: 54,
          dialogWidth: 950,
          tip: false,
          border: false,
          //stripe:true,
          index: true,
          editBtn: false,
          addBtn: false,
          viewBtn: false,
          selection: true,
          excelBtn: true,
          dialogClickModal: false,
          column: [{
            label: '姓名',
            prop: 'name',
            searchSpan: 4,
            search: true,
          }, {
            label: '头像',
            prop: 'avatar'
          }, {
            label: '手机',
            prop: 'phone',
            searchSpan: 4,
            search: true,
          }, {
            label: '小区',
            prop: 'aoiName'
          }, {
            label: '地址',
            prop: 'addressName'
          }, {
            label: '签名',
            type: 'upload',
            listType: "picture-img",
            prop: 'signaturePath'
          }, {
            label: '时间',
            prop: 'createTime'
          }]
        },
        // 分页信息
        userPage: {
          pageSize: 10,
          pageSizes: [10, 20, 30, 50, 100],
          currentPage: 1,
          total: 0
        },
        query: {},
      }
    },

    watch: {},

    methods: {

      userHandleClose() {

        this.popupTableUserShow = false
      },

      searchReset() {
        this.query = {}
        this.getUserPage(this.userPage)
      },

      searchChange(params, done) {
        this.query = params
        this.userPage.currentPage = 1
        this.getUserPage(this.userPage, params)
        done()
      },
      initData(newData) {
        this.editFlag = false
        this.popupTableShow = true
        this.articleId = newData.id
        this.query.level = 1
        this.query.articleId = this.articleId
        this.onLoad(this.userPage, this.query)
      },
      // initData(newData) {
      //   this.editFlag = false
      //   this.popupTableShow = true
      //   this.articleId = newData.id

      //   this.onLoad()
      // },

      handleClose() {
        this.popupTableShow = false
        this.disCussFrom = {}
      },

      handleSubmit(form, done) {
        done()
        form.articleId = this.articleId

        add(form).then(
          () => {
            this.$message({
              type: "success",
              message: "操作成功!",
            })
            form = {}
            this.editFlag = false

            let params = {
              level: 1,
              articleId: this.articleId
            }

            getLists(1, 100, Object.assign(params, this.query)).then(res => {
              const data = res.data.data
              this.data = data
            })
        {
          width: 110,
          labelWidth: 100,
          label: "附件",
          prop: "attachment",
          type: "upload",
          listType: "text",
          action: "/api/blade-resource/oss/endpoint/put-pdfFile",
          accept: "application/pdf",
          propsHttp: {
            res: "data",
            name: 'name',
            url: "link",
          },
          (error) => {
            window.console.log(error)
          span: 24,
        },
        {
          label: '选项内容',
          prop: 'children',
          type: 'dynamic',
          span: 24,
          children: {
            column: [{
              label: '选项标题',
              prop: 'optionContent',
              type: 'input',
              rules: [{
                required: true,
                message: '请输入选项标题',
                trigger: 'blur'
              }]
            }, {
              label: '选项说明',
              prop: 'optionDetail',
              type: 'input',
            }]
          }
        )
        },
        ]
      },

      handleReset() {
        this.editFlag = false
      // 表单数据
      form: {
        optionRange: 0,
      },
      data: [],
      optionList: {
        headerAlign: 'center',
        align: 'center',
        border: true,
        addBtn: false,
        editBtn: false,
        delBtn: false,
        defaultExpandAll: true,
        rowKey: 'id',
        rowParentKey: 'parentId',
        column: [{
          label: '标题',
          prop: 'discussContent',
        },
        {
          label: '选项内容',
          prop: 'optionContent',
        }
        ]
      },

      // 提交修改
      rowUpdate(row, index, done, loading) {
        done()
        if (!row.id) {
          addPd(row).then(() => {
            this.onLoad()
      articleId: '',

            this.$message({
              type: "success",
              message: "操作成功!"
            })
          })
      userData: [],
      userOption: {
        labelWidth: 96,
        searchLabelWidth: 96,
        searchShow: true,
        searchMenuSpan: 3,
        // menuWidth: 500,
        menu: false,
        height: "auto",
        calcHeight: 54,
        dialogWidth: 950,
        tip: false,
        border: true,
        //stripe:true,
        index: true,
        editBtn: false,
        addBtn: false,
        viewBtn: false,
        selection: true,
        delBtn: false,
        excelBtn: true,
        dialogClickModal: false,
        header: true,
        column: [{
          label: '姓名',
          prop: 'name',
          searchSpan: 4,
          search: true,
          searchLabelWidth: 46,
        }, {
          label: '头像',
          type: 'upload',
          listType: "picture-img",
          prop: 'avatar'
        }, {
          label: '手机',
          prop: 'phone',
          searchSpan: 4,
          search: true,
        }, {
          label: '小区',
          prop: 'aoiName'
        }, {
          label: '地址',
          prop: 'addressName'
        }, {
          label: '签名',
          type: 'upload',
          listType: "picture-img",
          prop: 'signaturePath'
        }, {
          label: '投票项',
          prop: 'optionContent'
        }, {
          label: '时间',
          prop: 'createTime'
        }]
      },
      // 分页信息
      userPage: {
        pageSize: 10,
        pageSizes: [10, 20, 30, 50, 100],
        currentPage: 1,
        total: 0
      },
      query: {},
      type: '',
      newData: {},
      articleRange: {},
      tops: {},
    }
  },

  watch: {
    'disCussFrom.optionRange': {
      handler(newData) {
        // console.log('** ** ** ** ** ** **', newData)
        const column = this.findObject(this.optionDiscuss.column, "optionNumber")
        if (newData == 1) {
          column.display = true
        } else {
          updatePd(row).then(() => {
            this.onLoad()

            this.$message({
              type: "success",
              message: "操作成功!"
            })
          })
          column.display = false
        }
      },
    },
  },

      rowDel(row) {
        this.$confirm("确定将选择数据删除?", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
          .then(() => {
            return remove(row.id)
          })
          .then(() => {
            this.getUserPage(this.userPage)
  methods: {

            this.$message({
              type: "success",
              message: "操作成功!"
            })
          })
      },

      add() {
        this.editFlag = true
      },

      edit(row) {
        this.disCussFrom = row
        this.editFlag = true
      },

      deletes(row) {
        this.$confirm("确定将选择数据删除?", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
          .then(() => {
            return remove(row.id)
          })
          .then(() => {
            this.onLoad()

            this.$message({
              type: "success",
              message: "操作成功!"
            })
          })
      },

      openUser(row, type = 0) {
        this.popupTableUserShow = true
    handleExport() {
      this.$confirm("是否导出投票人员数据?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        NProgress.start()
        this.query = {}
        if (type == 0) {
          this.userParams = {
            articleId: row.id
          }
        this.query.districtId = this.newData.articleRange
        if (this.type == 0) {
          this.query.articleId = this.articleId
        } else {
          this.userParams = {
            topicsId: row.id
          }
          this.query.topicsId = this.tops.id
        }
        this.getUserPage(this.userPage, this.userParams)
      },
        var data = {
          ...this.query
        }
        data = Qs.stringify(data)
        exportBlob(
          `/api/blade-userTopics/userTopics/exportUser?${this.website.tokenHeader}=${getToken()}&` + data).then(
            res => {
              downloadXls(res.data, `投票人员${dateNow()}.xlsx`)
              NProgress.done()
            })
      })
    },

      getUserPage(page, params = {}) {
        getPage(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
          const data = res.data.data
          this.userPage.total = data.total
          this.userData = data.records
          this.userData.forEach(item => {
            if (item.avatar.length > 0) {
              item.avatar = website.minioUrl + item.avatar
    userHandleClose() {

      this.popupTableUserShow = false
    },

    searchReset() {
      this.query.districtId = this.newData.articleRange
      if (this.type == 0) {
        this.query.articleId = this.articleId
      } else {
        this.query.topicsId = this.tops.id
      }
      this.userPage.currentPage = 1
      this.getUserPage(this.userPage, this.query)
    },

    searchChange(params, done) {
      this.query = params
      this.query.districtId = this.newData.articleRange
      if (this.type == 0) {
        this.query.articleId = this.articleId
      } else {
        this.query.topicsId = this.tops.id
      }
      this.userPage.currentPage = 1
      this.getUserPage(this.userPage, this.query)
      done()
    },

    openUser(row, type = 0) {
      this.type = type
      this.popupTableUserShow = true
      this.query = {}
      this.articleId = row.id
      let districtId
      if (type == 0) {
        this.newData = row
        districtId = this.newData.articleRange
        this.userParams = {
          articleId: row.id,
          districtId: districtId
        }
      } else {
        districtId = this.newData.articleRange
        this.tops = row
        this.userParams = {
          topicsId: row.id,
          districtId: districtId
        }
      }
      this.getUserPage(this.userPage, this.userParams)
    },

    initData(newData) {
      console.log("======>",  newData);
      this.editFlag = false
      this.popupTableShow = true
      this.articleId = newData.id
      this.query.level = 1
      this.query.articleId = this.articleId
      this.newData = newData
      this.query.districtId = newData.articleRange
      this.onLoad(this.userPage, this.query)
    },

    handleClose() {
      this.popupTableShow = false
      this.disCussFrom = {}
    },

    handleSubmit(form, done) {
      done()
      form.articleId = this.articleId
      console.log("form===>", form);


      if (this.editFlag && Array.isArray(form.attachment)) {
        if (form.attachment.length > 0) {
          var urls = []
          // var split = form.attachment.split(",")
          form.attachment.forEach(url => {
            var names = url.split("jczz/")
            urls.push(names[1])
          })
          form.attachment = urls.join(",")
        }else {
          form.attachment = "";
        }
      } else {
        if (form.attachment) {
          var urls = [];
          var splits = form.attachment.split(",");
          splits.forEach(url => {
            var names = url.split("jczz/")
            urls.push(names[1])
          })
          form.attachment = urls.join(",")
        }
      }

      if (this.disCussFromListClone.length > 0) {
        this.disCussFromListClone.forEach(item => {
          if (form.children.length > 0) {
            let same = form.children.find(array => array.id === item.id)
            if (!same) {
              item.deleteFlag = 1
              form.children.push(item)
            }
            if (item.signaturePath && item.signaturePath.length > 0) {
              item.signaturePath = website.minioUrl + item.signaturePath
              // console.log("=====>", item.signaturePath)
            }
          }
        })
      }
      add(form).then(
        () => {
          this.$message({
            type: "success",
            message: "操作成功!",
          })
          form = {}
          this.editFlag = false
          let params = {
            level: 1,
            articleId: this.articleId
          }
          getLists(1, 100, Object.assign(params, this.query)).then(res => {
            const data = res.data.data
            this.data = data
          })
        },
        (error) => {
          window.console.log(error)
        }
      )
    },

    handleReset() {
      this.editFlag = false
    },

    // 提交修改
    rowUpdate(row, index, done, loading) {
      done()

      if (row.attachment.length > 0) {
        var urls = []
        var split = row.attachment.split(",")
        split.forEach(url => {
          var names = url.split("jczz/")
          urls.push(names[1])
        })
        row.attachment = urls.join(",")
      }

      if (!row.id) {
        addPd(row).then(() => {
          this.onLoad()

          this.$message({
            type: "success",
            message: "操作成功!"
          })
        })
      },
      } else {
        updatePd(row).then(() => {
          this.onLoad()

      onLoad(page, params = {}) {
        this.loading = true
        getLists(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
          const data = res.data.data
          this.data = data
          this.loading = false
          this.$message({
            type: "success",
            message: "操作成功!"
          })
        })
      }
    },
  }

    rowDel(row) {
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          return remove(row.id)
        })
        .then(() => {
          this.getUserPage(this.userPage)

          this.$message({
            type: "success",
            message: "操作成功!"
          })
        })
    },

    add() {
      this.editFlag = true
    },

    edit(row) {
      this.disCussFrom = row
      this.disCussFromListClone = [].concat(row.children)
      this.editFlag = true
    },

    deletes(row) {
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        return remove(row.id)
      }).then(() => {
        let param = {}
        this.onLoad(this.userPage, param)
        this.$message({
          type: "success",
          message: "操作成功!"
        })
      })
    },



    getUserPage(page, params = {}) {
      getPage(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
        const data = res.data.data
        this.userPage.total = data.total
        this.userData = data.records
        this.userData.forEach(item => {
          if (item.avatar.length > 0) {
            item.avatar = website.minioUrl + item.avatar
          }
          if (item.signaturePath && item.signaturePath.length > 0) {
            item.signaturePath = website.minioUrl + item.signaturePath
            // console.log("=====>", item.signaturePath)
          }
        })
      })
    },

    onLoad(page, params = {}) {
      this.loading = true
      getLists(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
        const data = res.data.data
        this.data = data
        this.loading = false
      })
    }
  },
}
</script>

<style lang="scss" scoped></style>