shuishen
2024-01-29 2cec09706b01d65def3f945bdcde13e620a71c2e
src/views/article/components/deitDiscussion.vue
@@ -9,447 +9,448 @@
 * Copyright (c) 2024 by shuishen, All Rights Reserved.
-->
<template>
  <div>
    <el-dialog title="" append-to-body :visible.sync="popupTableShow" width="80%" :before-close="handleClose">
      <span slot="title" class="dialog-footer">
        {{ ontitle }}
      </span>
    <div>
        <el-dialog title="" append-to-body :visible.sync="popupTableShow" width="80%" :before-close="handleClose">
            <span slot="title" class="dialog-footer">
                {{ ontitle }}
            </span>
      <div id="" v-if="editFlag">
        <avue-form @submit="handleSubmit" :option="optionDiscuss" @reset-change="handleReset" v-model="disCussFrom">
        </avue-form>
      </div>
            <div id="" v-if="editFlag">
                <avue-form @submit="handleSubmit" :option="optionDiscuss" @reset-change="handleReset" v-model="disCussFrom">
                </avue-form>
            </div>
      <div id="" v-if="!editFlag">
        <avue-crud :table-loading="loading" :option="optionList" :data="data" v-model="form" ref="crud"
          @row-update="rowUpdate" @row-del="rowDel">
          <template slot="menuLeft" v-if="!editFlag">
            <el-button type="primary" size="small" plain icon="el-icon-circle-plus-outline" @click="add()">添加
            </el-button>
          </template>
          <template #icon="scope">
            <i :class="scope.row.icon" style="font-size:14px"></i>
          </template>
          <template #menu="{ row, size }">
            <el-button v-if="row.level === 1" :size="size" text type="primary" @click="edit(row)">编辑</el-button>
            <el-button v-if="row.level === 1" :size="size" text type="danger" @click="deletes(row)">删除</el-button>
            <el-button v-if="row.level === 2" :size="size" text type="primary" @click="openUser(row, 1)">
              选择此项人数:{{ row.number }} 详情</el-button>
          </template>
        </avue-crud>
      </div>
    </el-dialog>
            <div id="" v-if="!editFlag">
                <avue-crud :table-loading="loading" :option="optionList" :data="data" v-model="form" ref="crud"
                    @row-update="rowUpdate" @row-del="rowDel">
                    <template slot="menuLeft" v-if="!editFlag">
                        <el-button type="primary" size="small" plain icon="el-icon-circle-plus-outline" @click="add()">添加
                        </el-button>
                    </template>
                    <template #icon="scope">
                        <i :class="scope.row.icon" style="font-size:14px"></i>
                    </template>
                    <template #menu="{ row, size }">
                        <el-button v-if="row.level === 1" :size="size" text type="primary" @click="edit(row)">编辑</el-button>
                        <el-button v-if="row.level === 1" :size="size" text type="danger"
                            @click="deletes(row)">删除</el-button>
                        <el-button v-if="row.level === 2" :size="size" text type="primary" @click="openUser(row, 1)">
                            选择此项人数:{{ row.number }} 详情</el-button>
                    </template>
                </avue-crud>
            </div>
        </el-dialog>
    <el-dialog title="" append-to-body :visible.sync="popupTableUserShow" width="80%" :before-close="userHandleClose">
      <avue-crud :data="userData" :page="userPage" :option="userOption" @search-change="searchChange"
        @search-reset="searchReset"></avue-crud>
    </el-dialog>
  </div>
        <el-dialog title="" append-to-body :visible.sync="popupTableUserShow" width="80%" :before-close="userHandleClose">
            <avue-crud :data="userData" :page="userPage" :option="userOption" @search-change="searchChange"
                @search-reset="searchReset"></avue-crud>
        </el-dialog>
    </div>
</template>
<script>
  import {
import {
    getListPd,
    getDetailPd,
    addPd,
    updatePd,
    removePd
  } from "@/api/discuss/publicDiscuss"
} from "@/api/discuss/publicDiscuss"
  import {
import {
    getPage
  } from "@/api/discuss/userTopics"
} from "@/api/discuss/userTopics"
  import website from '@/config/website'
import website from '@/config/website'
  import {
import {
    getLists,
    getList,
    getDetail,
    add,
    update,
    remove
  } from "@/api/discuss/topics"
} 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,
            ontitle: '编辑议题',
            editFlag: false,
        disCussFrom: {
          discussContent: '',
          optionRange: 0,
          sort: 1,
          optionContent: '',
          optionDetail: '',
          number: '',
          createTime: '',
          updateTime: '',
          deleteFlag: '',
          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'
              }],
            },
            {
              label: '选项范围',
              prop: 'optionRange',
              type: 'radio',
              value: 0,
              button: true,
              row: true,
              dicData: [{
                label: '多选',
                value: 1
              }, {
                label: '单选',
                value: 0
              }],
              rules: [{
                required: true,
                message: '请选项范围',
                trigger: 'blur'
              }],
            },
            // {
            //   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',
            disCussFrom: {
                discussContent: '',
                optionRange: 0,
                sort: 1,
                optionContent: '',
                optionDetail: '',
                number: '',
                createTime: '',
                updateTime: '',
                deleteFlag: '',
                articleId: '',
                parentId: '',
                level: '',
                children: [{
                    optionContent: '',
                    optionDetail: '',
                    number: '',
                    createTime: '',
                    updateTime: '',
                    deleteFlag: '',
                    articleId: '',
                    parentId: '',
                    level: '',
                }]
              }
            },
          ]
        },
        // 表单数据
        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',
            optionDiscuss: {
                emptyText: '取消',
                column: [{
                    label: '议题',
                    prop: 'discussContent',
                    type: 'input',
                    row: true,
                    rules: [{
                        required: true,
                        message: '请输入议题',
                        trigger: 'blur'
                    }],
                },
                {
                    label: '选项范围',
                    prop: 'optionRange',
                    type: 'radio',
                    value: 0,
                    button: true,
                    row: true,
                    dicData: [{
                        label: '多选',
                        value: 1
                    }, {
                        label: '单选',
                        value: 0
                    }],
                    rules: [{
                        required: true,
                        message: '请选项范围',
                        trigger: 'blur'
                    }],
                },
                // {
                //   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: 'optionContent',
            }
          ]
        },
        articleId: '',
            // 表单数据
            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',
                }
                ]
            },
        userData: [],
        userOption: {
          labelWidth: 96,
          searchLabelWidth: 96,
          searchShow: true,
          searchMenuSpan: 3,
          // menuWidth: 500,
          menu: false,
            articleId: '',
          height: "auto",
          calcHeight: 54,
          dialogWidth: 950,
          tip: false,
          border: false,
          //stripe:true,
          index: true,
          editBtn: false,
          addBtn: false,
          viewBtn: false,
          selection: true,
          delBtn: false,
          excelBtn: true,
          dialogClickModal: false,
          column: [{
            label: '姓名',
            prop: 'name',
            searchSpan: 4,
            search: true,
          }, {
            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: 'createTime'
          }]
        },
        // 分页信息
        userPage: {
          pageSize: 10,
          pageSizes: [10, 20, 30, 50, 100],
          currentPage: 1,
          total: 0
        },
        query: {},
      }
            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,
                column: [{
                    label: '姓名',
                    prop: 'name',
                    searchSpan: 4,
                    search: true,
                }, {
                    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: 'createTime'
                }]
            },
            // 分页信息
            userPage: {
                pageSize: 10,
                pageSizes: [10, 20, 30, 50, 100],
                currentPage: 1,
                total: 0
            },
            query: {},
        }
    },
    watch: {},
    methods: {
      userHandleClose() {
        userHandleClose () {
        this.popupTableUserShow = false
      },
            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
            })
          },
          (error) => {
            window.console.log(error)
          }
        )
      },
      handleReset() {
        this.editFlag = false
      },
      // 提交修改
      rowUpdate(row, index, done, loading) {
        done()
        if (!row.id) {
          addPd(row).then(() => {
            this.onLoad()
            this.$message({
              type: "success",
              message: "操作成功!"
            })
          })
        } else {
          updatePd(row).then(() => {
            this.onLoad()
            this.$message({
              type: "success",
              message: "操作成功!"
            })
          })
        }
      },
      rowDel(row) {
        this.$confirm("确定将选择数据删除?", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
          .then(() => {
            return remove(row.id)
          })
          .then(() => {
        searchReset () {
            this.query = {}
            this.getUserPage(this.userPage)
        },
            this.$message({
              type: "success",
              message: "操作成功!"
        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
                    })
                },
                (error) => {
                    window.console.log(error)
                }
            )
        },
        handleReset () {
            this.editFlag = false
        },
        // 提交修改
        rowUpdate (row, index, done, loading) {
            done()
            if (!row.id) {
                addPd(row).then(() => {
                    this.onLoad()
                    this.$message({
                        type: "success",
                        message: "操作成功!"
                    })
                })
            } else {
                updatePd(row).then(() => {
                    this.onLoad()
                    this.$message({
                        type: "success",
                        message: "操作成功!"
                    })
                })
            }
        },
        rowDel (row) {
            this.$confirm("确定将选择数据删除?", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
          })
      },
                .then(() => {
                    return remove(row.id)
                })
                .then(() => {
                    this.getUserPage(this.userPage)
      add() {
        this.editFlag = true
      },
                    this.$message({
                        type: "success",
                        message: "操作成功!"
                    })
                })
        },
      edit(row) {
        this.disCussFrom = row
        this.editFlag = true
      },
        add () {
            this.editFlag = true
        },
      deletes(row) {
        this.$confirm("确定将选择数据删除?", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
          .then(() => {
            return remove(row.id)
          })
          .then(() => {
            this.onLoad()
        edit (row) {
            this.disCussFrom = row
            this.editFlag = true
        },
            this.$message({
              type: "success",
              message: "操作成功!"
        deletes (row) {
            this.$confirm("确定将选择数据删除?", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
          })
      },
                .then(() => {
                    return remove(row.id)
                })
                .then(() => {
                    this.onLoad()
      openUser(row, type = 0) {
        this.popupTableUserShow = true
        this.query = {}
        if (type == 0) {
          this.userParams = {
            articleId: row.id
          }
        } else {
          this.userParams = {
            topicsId: row.id
          }
                    this.$message({
                        type: "success",
                        message: "操作成功!"
                    })
                })
        },
        openUser (row, type = 0) {
            this.popupTableUserShow = true
            this.query = {}
            if (type == 0) {
                this.userParams = {
                    articleId: row.id
                }
            } else {
                this.userParams = {
                    topicsId: row.id
                }
            }
            this.getUserPage(this.userPage, this.userParams)
        },
        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
            })
        }
        this.getUserPage(this.userPage, this.userParams)
      },
      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>