Merge branch 'master' of http://s16s652780.51mypc.cn:49896/r/jczz_web

Lou

2024-03-11 2045282781175c3511cdf2738dae1515164e8841

Merge branch 'master' of http://s16s652780.51mypc.cn:49896/r/jczz_web

 src/api/system/email.js

@@ -1,137 +1,137 @@
import request from '@/router/axios'

export const getList = (current, size, params) => {
    return request({
        url: '/api/blade-email/email/list',
        method: 'get',
        params: {
            ...params,
            current,
            size,
        }
    })
  return request({
    url: '/api/blade-email/email/list',
    method: 'get',
    params: {
      ...params,
      current,
      size,
    }
  })
}

export const getDetail = (id) => {
    return request({
        url: '/api/blade-email/email/detail',
        method: 'get',
        params: {
            id
        }
    })
  return request({
    url: '/api/blade-email/email/detail',
    method: 'get',
    params: {
      id
    }
  })
}

export const remove = (ids) => {
    return request({
        url: '/api/blade-email/email/remove',
        method: 'post',
        params: {
            ids,
        }
    })
  return request({
    url: '/api/blade-email/email/remove',
    method: 'post',
    params: {
      ids,
    }
  })
}

export const add = (row) => {
    return request({
        url: '/api/blade-email/email/submit',
        method: 'post',
        data: row
    })
  return request({
    url: '/api/blade-email/email/submit',
    method: 'post',
    data: row
  })
}

export const update = (row) => {
    return request({
        url: '/api/blade-email/email/submit',
        method: 'post',
        data: row
    })
  return request({
    url: '/api/blade-email/email/submit',
    method: 'post',
    data: row
  })
}

export const enable = (id) => {
    return request({
        url: '/api/blade-email/email/enable',
        method: 'post',
        params: {
            id
        }
    })
  return request({
    url: '/api/blade-email/email/enable',
    method: 'post',
    params: {
      id
    }
  })
}

export const sendEmail = (params) => {
    return request({
        url: '/api/blade-email/email/sendEmail',
        method: 'post',
        params: {
            ...params
        }
    })
  return request({
    url: '/api/blade-email/email/sendEmail',
    method: 'post',
    params: {
      ...params
    }
  })
}

// 邮件管理
// -------------------------------------------------------------------
// 模板记录的结论列表
export const getEmailTemplateList = (current, size, params) => {
    return request({
        url: '/api/blade-email/emailTemplate/list',
        method: 'get',
        params: {
            ...params,
            current,
            size,
        }
    })
  return request({
    url: '/api/blade-email/emailTemplate/page',
    method: 'get',
    params: {
      ...params,
      current,
      size,
    }
  })
}

// 模板记录新增
export const saveEmailTemplateList = (row) => {
    return request({
        url: '/api/blade-email/emailTemplate/save',
        method: 'post',
        data: row
    })
  return request({
    url: '/api/blade-email/emailTemplate/save',
    method: 'post',
    data: row
  })
}

// 模板记录修改
export const updateEmailTemplateList = (row) => {
    return request({
        url: '/api/blade-email/emailTemplate/update',
        method: 'post',
        data: row
    })
  return request({
    url: '/api/blade-email/emailTemplate/update',
    method: 'post',
    data: row
  })
}

// 模板记录删除
export const removeEmailTemplateList = (ids) => {
    return request({
        url: '/api/blade-email/emailTemplate/remove',
        method: 'post',
        params: {
            ids
        }
    })
  return request({
    url: '/api/blade-email/emailTemplate/remove',
    method: 'post',
    params: {
      ids
    }
  })
}

// 模板记录详情
export const detailEmailTemplateList = (id) => {
    return request({
        url: '/api/blade-email/emailTemplate/detail',
        method: 'get',
        params: {
            id
        }
    })
  return request({
    url: '/api/blade-email/emailTemplate/detail',
    method: 'get',
    params: {
      id
    }
  })
}

// 消息记录接口
export const getMessageUserPage = (current, size, params) => {
    return request({
        url: '/api/messageUser/messageUser/getPage',
        method: 'get',
        params: {
            ...params,
            current,
            size,
        }
    })
  return request({
    url: '/api/messageUser/messageUser/getPage',
    method: 'get',
    params: {
      ...params,
      current,
      size,
    }
  })
}

 src/views/article/components/discussionManageChild.vue

@@ -1,338 +1,370 @@
<template>
    <div>
        <el-dialog title="" append-to-body :visible.sync="dialogVisibles" width="50%" :before-close="handleClose"
            @close="handleClose" @open="opens">
            <avue-form ref="DisCussFrom" :option="option" v-model="froms" @submit="handleSubmit"></avue-form>
        </el-dialog>
    </div>
  <div>
    <el-dialog title="" append-to-body :visible.sync="dialogVisibles" width="50%" :before-close="handleClose"
      @close="handleClose" @open="opens">
      <avue-form ref="DisCussFrom" :option="option" v-model="froms" @submit="handleSubmit"></avue-form>
    </el-dialog>
  </div>
</template>

<script>
import {
  import {
    getPersonPublicSelect
} from "@/api/public"
  } from "@/api/public"

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

import option from "@/option/discuss/publicDiscuss"
import {
  import option from "@/option/discuss/publicDiscuss"
  import {
    mapGetters
} from "vuex"
import {
  } from "vuex"
  import {
    getDictionary
} from '@/api/system/dict'
  } from '@/api/system/dict'

// import {
//   getList as getHouseholdList,
//   getDetatils as getHouseholdDetail
// } from "@/api/userHouse/list/houseHold"
  // import {
  //   getList as getHouseholdList,
  //   getDetatils as getHouseholdDetail
  // } from "@/api/userHouse/list/houseHold"

import {
  import {
    getUserlnfoByDistrictlds
} from "@/api/system/user"
  } from "@/api/system/user"

let formData = {}
export default {
    data () {
        return {
            dialogVisibles: false,
            userParams: {},
            // 弹框标题
            title: '',
            // 是否展示弹框
            box: false,
            // 是否显示查询
            search: true,
            // 加载中
            loading: true,
            // 是否为查看模式
            view: false,
            // 查询信息
            query: {},
  let formData = {}
  export default {
    data() {
      return {
        dialogVisibles: false,
        userParams: {},
        // 弹框标题
        title: '',
        // 是否展示弹框
        box: false,
        // 是否显示查询
        search: true,
        // 加载中
        loading: true,
        // 是否为查看模式
        view: false,
        // 查询信息
        query: {},

            // 选择行
            selectionList: [],
            // 表单配置
            option: {
                height: "auto",
                calcHeight: 54,
                align: 'center',
                menuAlign: 'center',
                addBtn: false,
                searchMenuSpan: 3,
                menuWidth: 500,
                column: [{
                    label: '开启投票',
                    prop: 'openFlag',
                    type: 'radio',
                    button: true,
                    row: true,
                    span: 12,
                    offset: 8,
                    value: 0,
                    dicData: [{
                        label: '开启',
                        value: 0
                    }, {
                        label: '不开启',
                        value: 1
                    }],
                    rules: [{
                        required: true,
                        message: "请选择开启状态",
                        trigger: "blur",
                    },],
                }, {
                    label: '投票限制',
                    prop: 'voteRestrictions',
                    type: 'radio',
                    button: true,
                    row: true,
                    span: 12,
                    offset: 8,
                    dicData: [{
                        label: '一人一票',
                        value: 0
                    }, {
                        label: '一户一票',
                        value: 1
                    }],
                    rules: [{
                        required: true,
                        message: "请选择投票限制",
                        trigger: "blur",
                    },],
                    value: 0
                }, {
                    label: '签名',
                    prop: 'signatureFlag',
                    type: 'radio',
                    button: true,
                    row: true,
                    span: 12,
                    offset: 8,
                    dicData: [{
                        label: '不需要',
                        value: 0
                    }, {
                        label: '需要',
                        value: 1
                    }],
                    rules: [{
                        required: true,
                        message: "请选择是否签名",
                        trigger: "blur",
                    },],
                    value: 0
                },
                {
                    label: '指定用户',
                    prop: 'appointUser',
                    type: 'radio',
                    button: true,
                    row: true,
                    span: 12,
                    offset: 8,
                    dicData: [{
                        label: '不限制',
                        value: 0
                    }, {
                        label: '指定用户',
                        value: 1
                    }],
                    rules: [{
                        required: true,
                        message: "请选择是否指定用户",
                        trigger: "blur",
                    },],
                    value: 0
                },
                {
                    display: false,
                    label: "选择用户",
                    prop: "userIds",
                    tags: true,
                    type: "tree",
                    multiple: true,
                    span: 12,
                    offset: 8,
                    remote: true,
                    hide: true,
                    row: true,
                    // dicUrl: `/api/blade-system/user/getUserlnfoByDistrictlds?districtlds={{}}`,
                    props: {
                        label: 'name',
                        value: 'id',
                    },
                    dicData: [],
                    rules: [{
                        required: true,
                        message: '请输入姓名',
                        trigger: 'blur'
                    }],
                },

                {
                    label: "截止时间",
                    span: 12,
                    offset: 8,
                    row: true,
                    prop: "endTime",
                    type: "datetime",
                    format: "yyyy-MM-dd HH:mm:ss",
                    valueFormat: "yyyy-MM-dd HH:mm:ss",
                    // format: "yyyy-MM-dd hh:mm:ss",
                    // valueFormat: "yyyy-MM-dd hh:mm:ss",
                    rules: [{
                        required: true,
                        message: "请选择截止时间",
                        trigger: "blur",
                    },],
                }
                ]
        // 选择行
        selectionList: [],
        // 表单配置
        option: {
          height: "auto",
          calcHeight: 54,
          align: 'center',
          menuAlign: 'center',
          addBtn: false,
          searchMenuSpan: 3,
          menuWidth: 500,
          column: [{
              label: '开启投票',
              prop: 'openFlag',
              type: 'radio',
              button: true,
              row: true,
              span: 12,
              offset: 8,
              value: 0,
              dicData: [{
                label: '开启',
                value: 0
              }, {
                label: '不开启',
                value: 1
              }],
              rules: [{
                required: true,
                message: "请选择开启状态",
                trigger: "blur",
              }, ],
            }, {
              label: '投票限制',
              prop: 'voteRestrictions',
              type: 'radio',
              button: true,
              row: true,
              span: 12,
              offset: 8,
              dicData: [{
                label: '一人一票',
                value: 0
              }, {
                label: '一户一票',
                value: 1
              }],
              rules: [{
                required: true,
                message: "请选择投票限制",
                trigger: "blur",
              }, ],
              value: 0
            }, {
              label: '签名',
              prop: 'signatureFlag',
              type: 'radio',
              button: true,
              row: true,
              span: 12,
              offset: 8,
              dicData: [{
                label: '不需要',
                value: 0
              }, {
                label: '需要',
                value: 1
              }],
              rules: [{
                required: true,
                message: "请选择是否签名",
                trigger: "blur",
              }, ],
              value: 0
            },
            // 表单列表
            froms: {},
            dialogVisibles: false,
            articleId: '',
            discussion: {},
            id: ""
        }
            {
              label: '指定用户',
              prop: 'appointUser',
              type: 'radio',
              button: true,
              row: true,
              span: 12,
              offset: 8,
              dicData: [{
                label: '不限制',
                value: 0
              }, {
                label: '指定用户',
                value: 1
              }],
              rules: [{
                required: true,
                message: "请选择是否指定用户",
                trigger: "blur",
              }, ],
              value: 0
            },
            {
              display: false,
              label: "选择用户",
              prop: "userIds",
              tags: true,
              type: "tree",
              multiple: true,
              span: 12,
              offset: 8,
              remote: true,
              hide: true,
              row: true,
              // dicUrl: `/api/blade-system/user/getUserlnfoByDistrictlds?districtlds={{}}`,
              props: {
                label: 'name',
                value: 'id',
              },
              dicData: [],
              rules: [{
                required: true,
                message: '请输入姓名',
                trigger: 'blur'
              }],
            },

            {
              label: "截止时间",
              span: 12,
              offset: 8,
              row: true,
              prop: "endTime",
              type: "datetime",
              format: "yyyy-MM-dd HH:mm:ss",
              valueFormat: "yyyy-MM-dd HH:mm:ss",
              // format: "yyyy-MM-dd hh:mm:ss",
              // valueFormat: "yyyy-MM-dd hh:mm:ss",
              rules: [{
                required: true,
                message: "请选择截止时间",
                trigger: "blur",
              }, ],
            }
          ]
        },
        // 表单列表
        froms: {
          openFlag: 0,
          voteRestrictions: 1,
          signatureFlag: 1,
          appointUser: 0,

        },
        dialogVisibles: false,
        articleId: '',
        discussion: {},
        id: ""
      }
    },
    created () {
        this.getUserList()
    created() {
      this.getUserList()
    },

    mounted () {
    mounted() {

    },

    watch: {
        'froms.appointUser': {
            handler (newData) {
                const column = this.findObject(this.option.column, "userIds")
                if (newData == 1) {
                    column.display = true
                } else {
                    column.display = false
                }
            },
      'froms.appointUser': {
        handler(newData) {
          const column = this.findObject(this.option.column, "userIds")
          if (newData == 1) {
            column.display = true
          } else {
            column.display = false
          }
        },
      },
    },
    computed: {
        ...mapGetters(["permission"]),
        ids () {
            let ids = []
            this.selectionList.forEach(ele => {
                ids.push(ele.id)
            })
            return ids.join(",")
        }
      ...mapGetters(["permission"]),
      ids() {
        let ids = []
        this.selectionList.forEach(ele => {
          ids.push(ele.id)
        })
        return ids.join(",")
      }
    },
    methods: {
        getuserInfoByDistrictId () {
            getUserlnfoByDistrictlds(this.discussion.articleRange).then(res => {
                const column = this.findObject(this.option.column, "userIds")
                column.dicData = res.data.data
            })
        },
        getUserList () {
            let dicUrl = `/api/blade-household/household/selectHouseholdList?searchKey={{key}}&limit=20`
            const column = this.findObject(this.option.column, "userIds")
            column.dicUrl = dicUrl
        },
      getuserInfoByDistrictId() {
        getUserlnfoByDistrictlds(this.discussion.articleRange).then(res => {
          const column = this.findObject(this.option.column, "userIds")
          column.dicData = res.data.data
        })
      },
      getUserList() {
        let dicUrl = `/api/blade-household/household/selectHouseholdList?searchKey={{key}}&limit=20`
        const column = this.findObject(this.option.column, "userIds")
        column.dicUrl = dicUrl
      },

        handleSubmit (form, done) {
            form.articleId = this.articleId
            form.eventType = 1
            form.userIds = JSON.stringify(form.userIds)
            if (form.appointUser == 0) {
                form.userIds = ''
      handleSubmit(form, done) {
        form.articleId = this.articleId
        form.eventType = 1
        form.userIds = JSON.stringify(form.userIds)
        if (form.appointUser == 0) {
          form.userIds = ''
        }

        form.id = this.id

        addPd(form).then(
          () => {
            // this.onLoad(this.discussion)
            this.$message({
              type: "success",
              message: "操作成功!",
            })
            done()
            this.$refs.DisCussFrom && this.$refs.DisCussFrom.resetForm()
            this.froms = {
              openFlag: 0,
              voteRestrictions: 1,
              signatureFlag: 1,
              appointUser: 0,

            }

            form.id = this.id

            addPd(form).then(
                () => {
                    // this.onLoad(this.discussion)
                    this.$message({
                        type: "success",
                        message: "操作成功!",
                    })
                    done()
                    this.$refs.DisCussFrom && this.$refs.DisCussFrom.resetForm()
                    this.froms = {}
                    this.dialogVisibles = false
                },
                (error) => {
                    window.console.log(error)
                }
            )
        },
        init (data) {
            console.log("===init===", data)
            this.$refs.DisCussFrom && this.$refs.DisCussFrom.resetForm()
            this.dialogVisibles = true
            this.froms = {}
            this.discussion = data
            this.articleId = data.id
            this.onLoad(data)
        },

        handleClose () {
            console.log("******handleClose*******")
            this.dialogVisibles = false
            this.$refs.DisCussFrom && this.$refs.DisCussFrom.resetForm()
            this.froms = {}
        },
          },
          (error) => {
            window.console.log(error)
          }
        )
      },
      init(data) {
        console.log("===init===", data)
        this.$refs.DisCussFrom && this.$refs.DisCussFrom.resetForm()
        this.dialogVisibles = true
        this.froms = {
          openFlag: 0,
          voteRestrictions: 1,
          signatureFlag: 1,
          appointUser: 0,
        }
        this.discussion = data
        this.articleId = data.id
        this.onLoad(data)
      },

        opens () {
            console.log("******opens*******")
            // this.dialogVisibles = false
            this.$refs.DisCussFrom && this.$refs.DisCussFrom.resetForm()
            this.froms = {}
        },
      handleClose() {
        console.log("******handleClose*******")
        this.dialogVisibles = false
        this.$refs.DisCussFrom && this.$refs.DisCussFrom.resetForm()
        this.froms = {
          openFlag: 0,
          voteRestrictions: 1,
          signatureFlag: 1,
          appointUser: 0,
        }
      },

        onLoad (row, params = {
            eventType: 1,
            articleId: row.id
        }) {
            // this.loading = true
            getListPd(1, 10, Object.assign(params, this.query)).then(res => {
                const data = res.data.data
                this.$refs.DisCussFrom && this.$refs.DisCussFrom.resetForm()
                if (data.records.length <= 0) {
                    console.log("--------onLoad------------")
                    this.id = ''
                    this.froms = {}
                } else {
                    console.log(">>>>>onLoad", data.records[0])
                    this.froms = data.records[0]
      opens() {
        console.log("******opens*******")
        // this.dialogVisibles = false
        this.$refs.DisCussFrom && this.$refs.DisCussFrom.resetForm()
        this.froms = {
          openFlag: 0,
          voteRestrictions: 1,
          signatureFlag: 1,
          appointUser: 0,
        }
      },

                    this.id = data.records[0].id
                    formData = data.records[0]
                    if (this.froms && this.froms.userIds) {
                        this.froms.userIds = JSON.parse(this.froms.userIds)
                    }
                }
                this.getuserInfoByDistrictId()
      onLoad(row, params = {
        eventType: 1,
        articleId: row.id
      }) {
        // this.loading = true
        getListPd(1, 10, Object.assign(params, this.query)).then(res => {
          const data = res.data.data
          this.$refs.DisCussFrom && this.$refs.DisCussFrom.resetForm()
          if (data.records.length <= 0) {
            console.log("--------onLoad------------")
            this.id = ''
            this.froms = {
              openFlag: 0,
              voteRestrictions: 1,
              signatureFlag: 1,
              appointUser: 0,
            }
          } else {
            console.log(">>>>>onLoad", data.records[0])
            this.froms = data.records[0]

            })
        },
            this.id = data.records[0].id
            formData = data.records[0]
            if (this.froms && this.froms.userIds) {
              this.froms.userIds = JSON.parse(this.froms.userIds)
            }
          }
          this.getuserInfoByDistrictId()

        })
      },


    }
}
  }
</script>

<style lang="scss" scoped>
.el-pagination {
  .el-pagination {
    margin-top: 20px;
}
  }
</style>

 src/views/article/discussionManage.vue

@@ -168,7 +168,7 @@
                label: "name",
                value: 'id'
              },
              hide: true,
              // hide: true,
            },
            {
              width: 110,

 src/views/grid/index.vue

@@ -1,391 +1,392 @@
<template>
    <basic-container>
        <avue-crud :option="option" :table-loading="loading" :data="data" :page.sync="page" ref="crud" @row-del="rowDel"
            v-model="form" :permission="permissionList" @row-update="rowUpdate" @row-save="rowSave"
            :before-open="beforeOpen" @search-change="searchChange" @search-reset="searchReset"
            @selection-change="selectionChange" @current-change="currentChange" @size-change="sizeChange"
            @refresh-change="refreshChange" @on-load="onLoad">
            <template slot="menuLeft">
                <el-button size="small" icon="el-icon-delete" plain v-if="permission.grid_delete" @click="handleDelete">删 除
                </el-button>
            </template>
            <template slot-scope="{row, size}" slot="principalPhone">
                <el-button :size="size" type="text" @click="showStringDispose(row, 'principalPhoneflag')"
                    v-text="textDispose(row, 'principalPhoneflag', 'principalPhone')">
                </el-button>
            </template>
        </avue-crud>
    </basic-container>
  <basic-container>
    <avue-crud :option="option" :table-loading="loading" :data="data" :page.sync="page" ref="crud" @row-del="rowDel"
      v-model="form" :permission="permissionList" @row-update="rowUpdate" @row-save="rowSave" :before-open="beforeOpen"
      @search-change="searchChange" @search-reset="searchReset" @selection-change="selectionChange"
      @current-change="currentChange" @size-change="sizeChange" @refresh-change="refreshChange" @on-load="onLoad">
      <template slot="menuLeft">
        <el-button size="small" icon="el-icon-delete" plain v-if="permission.grid_delete" @click="handleDelete">删 除
        </el-button>
      </template>
      <template slot-scope="{row, size}" slot="principalPhone">
        <el-button :size="size" type="text" @click="showStringDispose(row, 'principalPhoneflag')"
          v-text="textDispose(row, 'principalPhoneflag', 'principalPhone')">
        </el-button>
      </template>
    </avue-crud>
  </basic-container>
</template>

<script>
import { getList, remove, update, add, getGrid } from "@/api/grid/grid"
import { mapGetters } from "vuex"
// import website from '@/config/website'
export default {
    data () {
        //手机号格式校验
        let validatorPhone = function (rule, value, callback) {
            if (value) {
                if (!/^1[3456789]\d{9}$/.test(value)) {
                    callback(new Error('手机号格式有误！'))
                } else {
                    callback()
                }
            }
  import {
    getList,
    remove,
    update,
    add,
    getGrid
  } from "@/api/grid/grid"
  import {
    mapGetters
  } from "vuex"
  // import website from '@/config/website'
  export default {
    data() {
      //手机号格式校验
      let validatorPhone = function(rule, value, callback) {
        if (value) {
          if (!/^1[3456789]\d{9}$/.test(value)) {
            callback(new Error('手机号格式有误！'))
          } else {
            callback()
          }
        }
        callback()
      }

        return {
            form: {},
            query: {},
            loading: true,
            page: {
                pageSize: 10,
                currentPage: 1,
                total: 0,
            },
            datetime: "",
            selectionList: [],
            option: {
                labelWidth: 96,
                searchLabelWidth: 96,
                searchShow: true,
                searchMenuSpan: 3,
                menuWidth: 210,

                height: "auto",
                calcHeight: 54,
                dialogWidth: 950,
                tip: false,
                border: true,
                //stripe:true,
                index: true,
                viewBtn: true,
                selection: true,
                dialogClickModal: false,
                column: [
                    {
                        overHidden: true,
                        label: "所属社区",
                        addDisplay: false,
                        editDisplay: false,
                        viewDisplay: false,
                        prop: "communityName",
                        search: true,
                        searchSpan: 4,
                        searchLabelWidth: 76,
                        row:true, 
                        rules: [{
                            required: true,
                            message: "请选择所属社区",
                            trigger: "blur",
                        }],
                    },

                    {
                        hide: true,
                        parent: false,
                        label: "所属社区",
                        prop: "communityCode",
                        search: false,
                        type: "tree",
                        dicUrl: "/api/blade-system/region/tree",
                        row:true,                        
                        props: {
                            label: "name",
                            value: "id",
                        },
                        rules: [
                            {
                                required: true,
                                message: "请选择所属社区",
                                trigger: "blur",
                            },
                        ],
                    },
                    {
                        overHidden: true,
                        label: "网格名称",
                        prop: "gridName",
                        searchSpan: 4,
                        search: true,
                        rules: [
                            {
                                required: true,
                                message: "请输入网格名称",
                                trigger: "blur",
                            },
                        ],
                    },
                    {
                        overHidden: true,
                        label: "网格编号",
                        prop: "gridCode",
                        searchSpan: 4,
                        search: true,
                        rules: [
                            {
                                required: true,
                                message: "请输入网格编号",
                                trigger: "blur",
                            },
                        ],
                    },

                    {
                        width: 110,
                        label: "负责人",
                        prop: "principal",
                        searchSpan: 4,
                        search: true,
                        rules: [
                            {
                                required: true,
                                message: "请输入负责人",
                                trigger: "blur",
                            },
                        ],
                    },
                    {
                        width: 120,
                        label: "联系电话",
                        prop: "principalPhone",
                        searchSpan: 4,
                        search: true,
                        rules: [
                            {
                                required: true,
                                message: "请输入联系电话",
                                trigger: "blur",
                            },

                            {
                                validator: validatorPhone,
                                trigger: 'blur'
                            }
                        ],
                        slot: true
                    },
                    {
                        label: "区域",
                        prop: "geom",
                        type: "textarea",
                        hide: true,
                        span: 24,
                        display: false,
                        rules: [
                            {
                                required: true,
                                message: "请输入区域",
                                trigger: "blur",
                            },
                        ],
                    },
                    {
                        label: "排序",
                        prop: "sort",
                        type: "number",
                        hide: true,
                        value: 1,
                        rules: [
                            {
                                required: true,
                                message: "请输入排序",
                                trigger: "blur",
                            },
                        ],
                    },
                    {
                        label: "网格简介",
                        prop: "remark",
                        component: "AvueUeditor",
                        options: {
                            action: "/api/blade-resource/oss/endpoint/put-file",
                            props: {
                                res: "data",
                                url: "link",
                            },
                        },
                        hide: true,
                        minRows: 6,
                        span: 24,
                    },
                ],
            },
            data: [],
        }
    },
    watch: {
    },
    computed: {
        ...mapGetters(["permission", "userInfo"]),
        permissionList () {
            return {
                addBtn: this.vaildData(this.permission.grid_add, true),
                viewBtn: this.vaildData(this.permission.grid_view, true),
                delBtn: this.vaildData(this.permission.grid_delete, true),
                editBtn: this.vaildData(this.permission.grid_edit, true),
            }
      return {
        form: {},
        query: {},
        loading: true,
        page: {
          pageSize: 10,
          currentPage: 1,
          total: 0,
        },
        ids () {
            let ids = []
            this.selectionList.forEach((ele) => {
                ids.push(ele.id)
            })
            return ids.join(",")
        },
        datetime: "",
        selectionList: [],
        option: {
          labelWidth: 96,
          searchLabelWidth: 96,
          searchShow: true,
          searchMenuSpan: 3,
          menuWidth: 210,

        textDispose () {
            return (row, flag, type) => {
                if (row[flag] || row[type] == null) {
                    return row[type]
                } else {
                    if (type == 'principalIdCard') {
                        return row[type].replace(/^(.{6})(?:\d+)(.{4})$/, "$1******$2")
                    } else {
                        return row[type].replace(/^(.{3})(?:\d+)(.{4})$/, "$1****$2")
                    }
          height: "auto",
          calcHeight: 54,
          dialogWidth: 950,
          tip: false,
          border: true,
          //stripe:true,
          index: true,
          viewBtn: true,
          selection: true,
          dialogClickModal: false,
          column: [{
              overHidden: true,
              label: "所属社区",
              addDisplay: false,
              editDisplay: false,
              viewDisplay: false,
              prop: "communityName",
              search: true,
              searchSpan: 4,
              searchLabelWidth: 76,
              row: true,
              rules: [{
                required: true,
                message: "请选择所属社区",
                trigger: "blur",
              }],
            },

            {
              hide: true,
              parent: false,
              label: "所属社区",
              prop: "communityCode",
              search: false,
              type: "tree",
              dicUrl: "/api/blade-system/region/tree",
              row: true,
              // cascader: ['principal'],
              props: {
                label: "name",
                value: "id",
              },
              rules: [{
                required: true,
                message: "请选择所属社区",
                trigger: "blur",
              }, ],
            },
            {
              overHidden: true,
              label: "网格名称",
              prop: "gridName",
              searchSpan: 4,
              search: true,

              rules: [{
                required: true,
                message: "请输入网格名称",
                trigger: "blur",
              }, ],
            },
            {
              overHidden: true,
              label: "网格编号",
              prop: "gridCode",
              searchSpan: 4,
              search: true,
              rules: [{
                required: true,
                message: "请输入网格编号",
                trigger: "blur",
              }, ],
            },

            {
              width: 110,
              label: "负责人",
              prop: "principal",
              searchSpan: 4,
              type: 'tree',
              span: 8,
              dicUrl: `/api/blade-system/user/getUserListByParam?&roleId=1717429261910528001`,
              search: true,
              props: {
                label: 'name',
                value: 'id'
              },
              rules: [{
                required: true,
                message: "请输入负责人",
                trigger: "blur",
              }, ],
            },
            {
              width: 120,
              label: "联系电话",
              prop: "principalPhone",
              searchSpan: 4,
              search: true,
              rules: [{
                  required: true,
                  message: "请输入联系电话",
                  trigger: "blur",
                },

                {
                  validator: validatorPhone,
                  trigger: 'blur'
                }
            }
              ],
              slot: true
            },
            {
              label: "区域",
              prop: "geom",
              type: "textarea",
              hide: true,
              span: 24,
              display: false,
              rules: [{
                required: true,
                message: "请输入区域",
                trigger: "blur",
              }, ],
            },
            {
              label: "排序",
              prop: "sort",
              type: "number",
              hide: true,
              value: 1,
              rules: [{
                required: true,
                message: "请输入排序",
                trigger: "blur",
              }, ],
            },
            {
              label: "网格简介",
              prop: "remark",
              component: "AvueUeditor",
              options: {
                action: "/api/blade-resource/oss/endpoint/put-file",
                props: {
                  res: "data",
                  url: "link",
                },
              },
              hide: true,
              minRows: 6,
              span: 24,
            },
          ],
        },
        data: [],
      }
    },
    watch: {},
    computed: {
      ...mapGetters(["permission", "userInfo"]),
      permissionList() {
        return {
          addBtn: this.vaildData(this.permission.grid_add, true),
          viewBtn: this.vaildData(this.permission.grid_view, true),
          delBtn: this.vaildData(this.permission.grid_delete, true),
          editBtn: this.vaildData(this.permission.grid_edit, true),
        }
      },
      ids() {
        let ids = []
        this.selectionList.forEach((ele) => {
          ids.push(ele.id)
        })
        return ids.join(",")
      },

      textDispose() {
        return (row, flag, type) => {
          if (row[flag] || row[type] == null) {
            return row[type]
          } else {
            if (type == 'principalIdCard') {
              return row[type].replace(/^(.{6})(?:\d+)(.{4})$/, "$1******$2")
            } else {
              return row[type].replace(/^(.{3})(?:\d+)(.{4})$/, "$1****$2")
            }
          }
        }
      }
    },
    methods: {
        showStringDispose (row, type) {
            row[type] = !row[type]
        },
      showStringDispose(row, type) {
        row[type] = !row[type]
      },

        rowSave (row, done, loading) {
            add(row).then(
                () => {
                    this.onLoad(this.page)
                    this.$message({
                        type: "success",
                        message: "操作成功!",
                    })
                    done()
                },
                (error) => {
                    window.console.log(error)
                    loading()
                }
            )
        },
        rowUpdate (row, index, done, loading) {
            update(row).then(
                () => {
                    this.onLoad(this.page)
                    this.$message({
                        type: "success",
                        message: "操作成功!",
                    })
                    done()
                },
                (error) => {
                    window.console.log(error)
                    loading()
                }
            )
        },
        rowDel (row) {
            this.$confirm("确定将选择数据删除?", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    return remove(row.id)
                })
                .then(() => {
                    this.onLoad(this.page)
                    this.$message({
                        type: "success",
                        message: "操作成功!",
                    })
                })
        },
        searchReset () {
            this.query = {}
      rowSave(row, done, loading) {
        add(row).then(
          () => {
            this.onLoad(this.page)
        },
        searchChange (params, done) {
            this.query = params
            this.page.currentPage = 1
            this.onLoad(this.page, params)
            done()
        },
        selectionChange (list) {
            this.selectionList = list
        },
        selectionClear () {
            this.selectionList = []
            this.$refs.crud.toggleSelection()
        },
        handleDelete () {
            if (this.selectionList.length === 0) {
                this.$message.warning("请选择至少一条数据")
                return
            }
            this.$confirm("确定将选择数据删除?", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            this.$message({
              type: "success",
              message: "操作成功!",
            })
                .then(() => {
                    return remove(this.ids)
                })
                .then(() => {
                    this.onLoad(this.page)
                    this.$message({
                        type: "success",
                        message: "操作成功!",
                    })
                    this.$refs.crud.toggleSelection()
                })
        },
        beforeOpen (done, type) {
            if (["edit", "view"].includes(type)) {
                getGrid(this.form.id).then((res) => {
                    this.form = res.data.data
                })
            }
            // con
            done()
        },
        currentChange (currentPage) {
            this.page.currentPage = currentPage
        },
        sizeChange (pageSize) {
            this.page.pageSize = pageSize
        },
        refreshChange () {
            this.onLoad(this.page, this.query)
        },
        onLoad (page, params = {}) {
            this.loading = true

            getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then((res) => {
                const data = {
                    ...res.data.data,
                    records: res.data.data.records.map(item => {
                        return {
                            ...item,
                            'principalPhoneflag': false
                        }
                    })
                }
                this.page.total = data.total
                this.data = data.records
                this.loading = false
                this.selectionClear()
          },
          (error) => {
            window.console.log(error)
            loading()
          }
        )
      },
      rowUpdate(row, index, done, loading) {
        update(row).then(
          () => {
            this.onLoad(this.page)
            this.$message({
              type: "success",
              message: "操作成功!",
            })
            done()
          },
          (error) => {
            window.console.log(error)
            loading()
          }
        )
      },
      rowDel(row) {
        this.$confirm("确定将选择数据删除?", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
          .then(() => {
            return remove(row.id)
          })
          .then(() => {
            this.onLoad(this.page)
            this.$message({
              type: "success",
              message: "操作成功!",
            })
          })
      },
      searchReset() {
        this.query = {}
        this.onLoad(this.page)
      },
      searchChange(params, done) {
        this.query = params
        this.page.currentPage = 1
        this.onLoad(this.page, params)
        done()
      },
      selectionChange(list) {
        this.selectionList = list
      },
      selectionClear() {
        this.selectionList = []
        this.$refs.crud.toggleSelection()
      },
      handleDelete() {
        if (this.selectionList.length === 0) {
          this.$message.warning("请选择至少一条数据")
          return
        }
        this.$confirm("确定将选择数据删除?", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
          .then(() => {
            return remove(this.ids)
          })
          .then(() => {
            this.onLoad(this.page)
            this.$message({
              type: "success",
              message: "操作成功!",
            })
            this.$refs.crud.toggleSelection()
          })
      },
      beforeOpen(done, type) {
        if (["edit", "view"].includes(type)) {
          getGrid(this.form.id).then((res) => {
            this.form = res.data.data
          })
        }
        // con
        done()
      },
      currentChange(currentPage) {
        this.page.currentPage = currentPage
      },
      sizeChange(pageSize) {
        this.page.pageSize = pageSize
      },
      refreshChange() {
        this.onLoad(this.page, this.query)
      },
      onLoad(page, params = {}) {
        this.loading = true

        getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then((res) => {
          const data = {
            ...res.data.data,
            records: res.data.data.records.map(item => {
              return {
                ...item,
                'principalPhoneflag': false
              }
            })
          }
          this.page.total = data.total
          this.data = data.records
          this.loading = false
          this.selectionClear()
        })
      }
    }
}
  }
</script>

<style>
.avue-upload__icon {
  .avue-upload__icon {
    line-height: 6;
}
</style>
  }
</style>

 src/views/gzll/components/todo.vue

@@ -1,269 +1,276 @@
<template>
    <div>
        <avue-crud :option="option" :table-loading="loading" :data="data" ref="crud" v-model="form"
            @search-change="searchChange" @search-reset="searchReset" @selection-change="selectionChange"
            @current-change="currentChange" @size-change="sizeChange" @refresh-change="refreshChange" @on-load="onLoad">
            <template slot-scope="{row, size, index}" slot="menu">
                <el-button type="text" :size="size" icon="el-icon-s-check" @click.stop="handleWork(row)"
                    v-if="permission.gzll_todo_handle">处理
                </el-button>
                <el-button type="text" :size="size" icon="el-icon-info" v-if="permission.gzll_todo_detail"
                    @click.stop="handleDetail(row)">详情
                </el-button>
                <el-button type="text" :size="size" icon="el-icon-search" v-if="permission.gzll_todo_follow"
                    @click.stop="handleImage(row, index)">流程图
                </el-button>
            </template>
  <div>
    <avue-crud :option="option" :table-loading="loading" :data="data" ref="crud" v-model="form"
      @search-change="searchChange" @search-reset="searchReset" @selection-change="selectionChange"
      @current-change="currentChange" @size-change="sizeChange" @refresh-change="refreshChange" @on-load="onLoad">
      <template slot-scope="{row, size, index}" slot="menu">
        <el-button type="text" :size="size" icon="el-icon-s-check" @click.stop="handleWork(row)"
          v-if="permission.gzll_todo_handle">处理
        </el-button>
        <el-button type="text" :size="size" icon="el-icon-info" v-if="permission.gzll_todo_detail"
          @click.stop="handleDetail(row)">详情
        </el-button>
        <el-button type="text" :size="size" icon="el-icon-search" v-if="permission.gzll_todo_follow"
          @click.stop="handleImage(row, index)">流程图
        </el-button>
      </template>

            <template slot-scope="{row, size}" slot="processDefinitionVersion">
                <el-tag :size="size">v{{ row.processDefinitionVersion }}</el-tag>
            </template>
            <template slot-scope="{row, size}" slot="linkPhone">
                <el-button :size="size" type="text" @click="showStringDispose(row, 'linkPhoneflag')"
                    v-text="textDispose(row, 'linkPhoneflag', 'linkPhone')">
                </el-button>
            </template>
        </avue-crud>
        <flow-design is-dialog :is-display.sync="flowBox" :process-instance-id="processInstanceId"></flow-design>
    </div>
      <template slot-scope="{row, size}" slot="processDefinitionVersion">
        <el-tag :size="size">v{{ row.processDefinitionVersion }}</el-tag>
      </template>
      <template slot-scope="{row, size}" slot="linkPhone">
        <el-button :size="size" type="text" @click="showStringDispose(row, 'linkPhoneflag')"
          v-text="textDispose(row, 'linkPhoneflag', 'linkPhone')">
        </el-button>
      </template>
    </avue-crud>
    <flow-design is-dialog :is-display.sync="flowBox" :process-instance-id="processInstanceId"></flow-design>
  </div>
</template>
  

<script>
import {
  import {
    mapGetters
} from "vuex"
import {
  } from "vuex"
  import {
    todoList
} from "@/api/work/work"
import {
  } from "@/api/work/work"
  import {
    flowCategory,
    flowRoute
} from "@/util/flow"
  } from "@/util/flow"

export default {
    data () {
        return {
            typeStatus: 1,
            form: {},
            selectionId: '',
            selectionList: [],
            query: {},
            loading: true,
            page: {
                pageSize: 10,
                currentPage: 1,
                total: 0
            },
            processInstanceId: '',
            flowBox: false,
            workBox: false,
            option: {
                labelWidth: 120,
                searchLabelWidth: 96,
                searchShow: true,
                searchMenuSpan: 3,
                menuWidth: 210,
  export default {
    data() {
      return {
        typeStatus: 1,
        form: {},
        selectionId: '',
        selectionList: [],
        query: {},
        loading: true,
        page: {
          pageSize: 10,
          currentPage: 1,
          total: 0
        },
        processInstanceId: '',
        flowBox: false,
        workBox: false,
        option: {
          labelWidth: 120,
          searchLabelWidth: 96,
          searchShow: true,
          searchMenuSpan: 3,
          menuWidth: 210,

                height: 'auto',
                calcHeight: 30,
                tip: false,
                simplePage: true,
                border: true,
                index: true,
                // selection: true,
                editBtn: false,
                addBtn: false,
                viewBtn: false,
                delBtn: false,
                columnBtn: false,
                dialogWidth: 900,
                dialogClickModal: false,
                header: false,
                column: [{
                    label: "流程分类",
                    type: "select",
                    row: true,
                    dicUrl: "/api/blade-system/dict/dictionary?code=flow",
                    props: {
                        label: "dictValue",
                        value: "dictKey"
                    },
                    dataType: "number",
                    slot: true,
                    prop: "category",
                    // search: true,
                    hide: true,
                    width: 100,
                },
                {
                    width: 100,
                    label: '申请类型',
                    prop: 'categoryName',
                    // search: true,
                },
                {
                    width: 220,
                    overHidden: true,
                    label: "小区",
                    prop: "districtId",
                    // search: true,
                    type: 'tree',
                    dicUrl: `/api/blade-district/district/getDistrictTree`,
                    props: {
                        label: "name",
                        value: "id"
                    },
                    defaultExpandedKeys: ["361102003"],
                    searchSpan: 5,
                    span: 12,
                },
                {
                    width: 110,
                    label: '联系人',
                    prop: 'linkman',
                    // search: true,
                },
                {
                    width: 120,
                    label: '联系电话',
                    prop: 'linkPhone',
                    // search: true,
                    slot: true
                },
                {
                    label: '项目名称',
                    prop: 'name',
                    // search: true,
                },
                {
                    label: '当前步骤',
                    prop: 'taskName',
                },
                // {
                //   label: '流程版本',
                //   prop: 'processDefinitionVersion',
                //   // slot: true,
                //   width: 80,
                // },
                {
                    width: 144,
                    label: '申请时间',
                    prop: 'createTime',
                },
                ]
          height: 'auto',
          calcHeight: 30,
          tip: false,
          simplePage: true,
          border: true,
          index: true,
          // selection: true,
          editBtn: false,
          addBtn: false,
          viewBtn: false,
          delBtn: false,
          columnBtn: false,
          dialogWidth: 900,
          dialogClickModal: false,
          header: false,
          column: [{
              label: "流程分类",
              type: "select",
              row: true,
              dicUrl: "/api/blade-system/dict/dictionary?code=flow",
              props: {
                label: "dictValue",
                value: "dictKey"
              },
              dataType: "number",
              slot: true,
              prop: "category",
              // search: true,
              hide: true,
              width: 100,
            },
            data: []
        }
            {
              width: 100,
              label: '申请类型',
              prop: 'categoryName',
              // search: true,
            },
            {
              width: 220,
              overHidden: true,
              label: "小区",
              prop: "districtId",
              // search: true,
              type: 'tree',
              dicUrl: `/api/blade-district/district/getDistrictTree`,
              props: {
                label: "name",
                value: "id"
              },
              defaultExpandedKeys: ["361102003"],
              searchSpan: 5,
              span: 12,
            },
            {
              width: 110,
              label: '小区名称',
              prop: 'districtName',
              search: true,
              hide: true,
            },
            {
              width: 110,
              label: '联系人',
              prop: 'linkman',
              // search: true,
            },
            {
              width: 120,
              label: '联系电话',
              prop: 'linkPhone',
              // search: true,
              slot: true
            },
            {
              label: '项目名称',
              prop: 'name',
              search: true,
            },
            {
              label: '当前步骤',
              prop: 'taskName',
            },
            // {
            //   label: '流程版本',
            //   prop: 'processDefinitionVersion',
            //   // slot: true,
            //   width: 80,
            // },
            {
              width: 144,
              label: '申请时间',
              prop: 'createTime',
            },
          ]
        },
        data: []
      }
    },

    computed: {
        ...mapGetters(["permission", "flowRoutes"]),
        ids () {
            let ids = []
            this.selectionList.forEach(ele => {
                ids.push(ele.id)
            })
            return ids.join(",")
        },
      ...mapGetters(["permission", "flowRoutes"]),
      ids() {
        let ids = []
        this.selectionList.forEach(ele => {
          ids.push(ele.id)
        })
        return ids.join(",")
      },

        textDispose () {
            return (row, flag, type) => {
                if (row[flag] || row[type] == null) {
                    return row[type]
                } else {
                    if (type == 'principalIdCard') {
                        return row[type].replace(/^(.{6})(?:\d+)(.{4})$/, "$1******$2")
                    } else {
                        return row[type].replace(/^(.{3})(?:\d+)(.{4})$/, "$1****$2")
                    }
                }
      textDispose() {
        return (row, flag, type) => {
          if (row[flag] || row[type] == null) {
            return row[type]
          } else {
            if (type == 'principalIdCard') {
              return row[type].replace(/^(.{6})(?:\d+)(.{4})$/, "$1******$2")
            } else {
              return row[type].replace(/^(.{3})(?:\d+)(.{4})$/, "$1****$2")
            }
          }
        }
      }
    },
    methods: {

        changeType (type) {
            this.typeStatus = type
            this.page.currentPage = 1
            // this.onLoad(this.page)
        },
        showStringDispose (row, type) {
            row[type] = !row[type]
        },
      changeType(type) {
        this.typeStatus = type
        this.page.currentPage = 1
        // this.onLoad(this.page)
      },
      showStringDispose(row, type) {
        row[type] = !row[type]
      },

        searchReset () {
            this.query = {}
            this.onLoad(this.page)
        },
        searchChange (params, done) {
            this.query = params
            this.page.currentPage = 1
            this.onLoad(this.page, params)
            done()
        },
        selectionChange (list) {
            this.selectionList = list
        },
        selectionClear () {
            this.selectionList = []
            this.$refs.crud.toggleSelection()
        },
        handleWork (row) {
            this.$router.push({
                path: `/gzll/process/${flowRoute(this.flowRoutes, row.category)}/handle/${row.taskId}/${row.processInstanceId}/${row.businessId}`
            })
        },
        handleDetail (row) {
            this.$router.push({
                path: `/gzll/process/${flowRoute(this.flowRoutes, row.category)}/detail/${row.processInstanceId}/${row.businessId}`
            })
        },
        handleImage (row) {
            this.processInstanceId = row.processInstanceId
            this.flowBox = true
        },
        currentChange (currentPage) {
            this.page.currentPage = currentPage
        },
        sizeChange (pageSize) {
            this.page.pageSize = pageSize
        },
        refreshChange () {
            this.onLoad(this.page, this.query)
        },
        onLoad (page, params = {}) {
            const query = {
                ...this.query,
                category: (params.category) ? flowCategory(params.category) : null
            }
            this.loading = true
            todoList(page.currentPage, page.pageSize, Object.assign(params, query)).then(res => {
                const data = {
                    ...res.data.data,
                    records: res.data.data.records.map(item => {
                        return {
                            ...item,
                            'linkPhoneflag': false
                        }
                    })
                }
                this.page.total = data.total
                this.data = data.records
                this.loading = false
                this.selectionClear()
            })
      searchReset() {
        this.query = {}
        this.onLoad(this.page)
      },
      searchChange(params, done) {
        this.query = params
        this.page.currentPage = 1
        this.onLoad(this.page, params)
        done()
      },
      selectionChange(list) {
        this.selectionList = list
      },
      selectionClear() {
        this.selectionList = []
        this.$refs.crud.toggleSelection()
      },
      handleWork(row) {
        this.$router.push({
          path: `/gzll/process/${flowRoute(this.flowRoutes, row.category)}/handle/${row.taskId}/${row.processInstanceId}/${row.businessId}`
        })
      },
      handleDetail(row) {
        this.$router.push({
          path: `/gzll/process/${flowRoute(this.flowRoutes, row.category)}/detail/${row.processInstanceId}/${row.businessId}`
        })
      },
      handleImage(row) {
        this.processInstanceId = row.processInstanceId
        this.flowBox = true
      },
      currentChange(currentPage) {
        this.page.currentPage = currentPage
      },
      sizeChange(pageSize) {
        this.page.pageSize = pageSize
      },
      refreshChange() {
        this.onLoad(this.page, this.query)
      },
      onLoad(page, params = {}) {
        const query = {
          ...this.query,
          category: (params.category) ? flowCategory(params.category) : null
        }
        this.loading = true
        todoList(page.currentPage, page.pageSize, Object.assign(params, query)).then(res => {
          const data = {
            ...res.data.data,
            records: res.data.data.records.map(item => {
              return {
                ...item,
                'linkPhoneflag': false
              }
            })
          }
          this.page.total = data.total
          this.data = data.records
          this.loading = false
          this.selectionClear()
        })
      }
    }
}
  }
</script>
  
  
<style lang="scss" scoped>
.avue-upload__icon {
    line-height: 6;
}

.tab-list {

<style lang="scss" scoped>
  .avue-upload__icon {
    line-height: 6;
  }

  .tab-list {
    display: flex;
    margin-right: 6px;
    border: 1px solid #dcdfe6;
@@ -273,55 +280,55 @@
    width: 121px;

    &>div {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 60px;
        cursor: pointer;
        font-size: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 60px;
      cursor: pointer;
      font-size: 12px;
    }

    &>div:nth-child(2) {
        border-left: 1px solid #dcdfe6;
        // border-right: 1px solid #dcdfe6;
      border-left: 1px solid #dcdfe6;
      // border-right: 1px solid #dcdfe6;
    }

    .choose {
        color: #FFF;
        background-color: #409dfe;
      color: #FFF;
      background-color: #409dfe;
    }
}
  }

:deep(.avue-crud__left) {
  :deep(.avue-crud__left) {
    display: flex;
    align-items: center;
}
  }

:deep(.el-drawer__header) {
  :deep(.el-drawer__header) {
    margin-bottom: 10px;
}
  }

:deep(.el-radio__input.is-disabled+span.el-radio__label) {
  :deep(.el-radio__input.is-disabled+span.el-radio__label) {
    color: #000;
}
  }

:deep(.el-radio__input.is-checked+.el-radio__label) {
  :deep(.el-radio__input.is-checked+.el-radio__label) {
    color: #409EFF !important;
}
  }

:deep(.el-radio__input.is-checked .el-radio__inner::after) {
  :deep(.el-radio__input.is-checked .el-radio__inner::after) {
    background-color: #FFF;
}
  }

:deep(.el-radio__input.is-checked .el-radio__inner) {
  :deep(.el-radio__input.is-checked .el-radio__inner) {
    background-color: #409EFF;
}
  }

:deep(.el-radio) {
  :deep(.el-radio) {
    margin-right: 20px;
}
  }

.title {
  .title {
    margin: 10px;
    height: 40px;
    background-color: #eee;
@@ -329,119 +336,119 @@
    align-items: center;

    .icon {
        width: 4px;
        height: 18px;
        background-color: #409dfe;
        margin: 0 10px;
        color: transparent;
      width: 4px;
      height: 18px;
      background-color: #409dfe;
      margin: 0 10px;
      color: transparent;
    }
}
  }

.basic-info {
  .basic-info {
    padding: 0 20px;
    font-size: 14px;

    .info-item {
      display: flex;
      padding: 10px;

      .info-name {
        width: 100px;
        display: flex;
        padding: 10px;
        align-items: center;
      }

        .info-name {
            width: 100px;
            display: flex;
            align-items: center;
        }

        .info-value {
            display: flex;
            align-items: center;
        }
      .info-value {
        display: flex;
        align-items: center;
      }
    }
}
  }

.question-list {
  .question-list {
    padding: 0 20px;
    font-size: 14px;

    .question-type {
        height: 60px;
        display: flex;
        align-items: center;
        cursor: pointer;
        justify-content: space-between;
        padding-right: 20px;
      height: 60px;
      display: flex;
      align-items: center;
      cursor: pointer;
      justify-content: space-between;
      padding-right: 20px;

        .type-name {}
      .type-name {}

        .icon-box {}
      .icon-box {}
    }

    .question-item {
        margin-bottom: 20px;
        padding: 10px;
        background: #f5f7fa;
        border-radius: 8px;
      margin-bottom: 20px;
      padding: 10px;
      background: #f5f7fa;
      border-radius: 8px;

        &>div {
            margin: 14px 0;
      &>div {
        margin: 14px 0;
      }

      .question-name {
        display: flex;

        .key {
          width: 80%;
          padding-right: 20px;
          word-break: break-all;
        }

        .question-name {
            display: flex;
        .value {
          width: 20%;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }

            .key {
                width: 80%;
                padding-right: 20px;
                word-break: break-all;
            }
      .yh-pic-box {
        display: flex;
        height: 100px;

            .value {
                width: 20%;
                display: flex;
                align-items: center;
                justify-content: center;
            }
        .yh-pic-name {
          width: 100px;
          display: flex;
          align-items: center;
          justify-content: left;
        }

        .yh-pic-box {
            display: flex;
            height: 100px;
        .yh-pic-list {
          width: 0;
          flex: 1;
          display: flex;
        }
      }

            .yh-pic-name {
                width: 100px;
                display: flex;
                align-items: center;
                justify-content: left;
            }
      .yh-remark {
        display: flex;

            .yh-pic-list {
                width: 0;
                flex: 1;
                display: flex;
            }
        .yh-remark-name {
          width: 100px;
          display: flex;
          align-items: center;
          justify-content: left;
        }

        .yh-remark {
            display: flex;

            .yh-remark-name {
                width: 100px;
                display: flex;
                align-items: center;
                justify-content: left;
            }

            .yh-remark-value {
                word-break: break-all;
            }
        .yh-remark-value {
          word-break: break-all;
        }
      }
    }

    .remark-box {
        padding: 10px;
        background-color: #f5f7fa;
        border-radius: 8px;
        min-height: 40px;
        margin-bottom: 20px;
      padding: 10px;
      background-color: #f5f7fa;
      border-radius: 8px;
      min-height: 40px;
      margin-bottom: 20px;
    }
}
  }
</style>

 src/views/message/messageSettings.vue

@@ -1,322 +1,371 @@
<template>
    <basic-container>
        <avue-crud :option="option" :table-loading="loading" :data="data" :page.sync="page" :permission="permissionList"
            :before-open="beforeOpen" v-model="form" ref="crud" @row-update="rowUpdate" @row-save="rowSave"
            @row-del="rowDel" @search-change="searchChange" @search-reset="searchReset" @selection-change="selectionChange"
            @current-change="currentChange" @size-change="sizeChange" @refresh-change="refreshChange" @on-load="onLoad">
            <template slot="menuLeft">
                <el-button type="danger" size="small" icon="el-icon-delete" plain v-if="permission.email_delete"
                    @click="handleDelete">删 除
                </el-button>
            </template>
  <basic-container>
    <avue-crud :option="option" :table-loading="loading" :data="data" :page.sync="page" :permission="permissionList"
      :before-open="beforeOpen" v-model="form" ref="crud" @row-update="rowUpdate" @row-save="rowSave" @row-del="rowDel"
      @search-change="searchChange" @search-reset="searchReset" @selection-change="selectionChange"
      @current-change="currentChange" @size-change="sizeChange" @refresh-change="refreshChange" @on-load="onLoad">
      <template slot="menuLeft">
        <el-button type="danger" size="small" icon="el-icon-delete" plain v-if="permission.email_delete"
          @click="handleDelete">删 除
        </el-button>
      </template>

            <template slot-scope="{row, size}" slot="status">
                <el-tag :size="size" :type="row.statusName == '是' ? 'success' : 'info'">{{ row.statusName }}</el-tag>
            </template>
      <template slot-scope="{row, size}" slot="status">
        <el-tag :size="size" :type="row.statusName == '是' ? 'success' : 'info'">{{ row.statusName }}</el-tag>
      </template>




            <template slot-scope="{ row, size, index }" slot="menu">
                <el-button :size="size" type="text" icon="el-icon-circle-check" v-if="permission.email_enable"
                    @click.stop="handleEnable(row)">启用
                </el-button>
                <el-button :size="size" type="text" icon="el-icon-video-play" v-if="userInfo.role_name.includes('admin')"
                    @click="handleDebug(row)">调试
                </el-button>
            </template>
      <template slot-scope="{ row, size, index }" slot="menu">
        <el-button :size="size" type="text" icon="el-icon-circle-check" v-if="permission.email_enable"
          @click.stop="handleEnable(row)">启用
        </el-button>
        <el-button :size="size" type="text" icon="el-icon-video-play" v-if="userInfo.role_name.includes('admin')"
          @click="handleDebug(row)">调试
        </el-button>
      </template>

        </avue-crud>
    </avue-crud>

        <el-dialog title="短信发送调试" append-to-body :visible.sync="box" width="550px">
            <avue-form ref="form" :option="debugOption" v-model="debugForm" @submit="handleSubmit" />
        </el-dialog>
    <el-dialog title="短信发送调试" append-to-body :visible.sync="box" width="550px">
      <avue-form ref="form" :option="debugOption" v-model="debugForm" @submit="handleSubmit" />
    </el-dialog>

    </basic-container>
  </basic-container>
</template>

<script>
import { getList, getDetail, add, update, remove, enable, sendEmail } from "@/api/system/email"
import { mapGetters } from "vuex"
  import {
    getList,
    getDetail,
    add,
    update,
    remove,
    enable,
    sendEmail
  } from "@/api/system/email"
  import {
    mapGetters
  } from "vuex"

export default {
    data () {
        return {
            box: false,
            form: {},
            query: {},
            loading: true,
            page: {
                pageSize: 10,
                currentPage: 1,
                total: 0
  export default {
    data() {
      return {
        box: false,
        form: {},
        query: {},
        loading: true,
        page: {
          pageSize: 10,
          currentPage: 1,
          total: 0
        },
        selectionList: [],
        option: {
          height: 'auto',
          calcHeight: 30,
          tip: false,
          searchShow: true,
          searchMenuSpan: 6,
          border: true,
          index: true,
          viewBtn: true,
          selection: true,
          dialogClickModal: false,
          menuWidth: 350,
          column: [{
              label: "主键",
              prop: "id",
              type: "input",
              addDisplay: false,
              editDisplay: false,
              viewDisplay: false,
              hide: true,
            },
            selectionList: [],
            option: {
                height: 'auto',
                calcHeight: 30,
                tip: false,
                searchShow: true,
                searchMenuSpan: 6,
                border: true,
                index: true,
                viewBtn: true,
                selection: true,
                dialogClickModal: false,
                menuWidth: 350,
                column: [
                    {
                        label: "主键",
                        prop: "id",
                        type: "input",
                        addDisplay: false,
                        editDisplay: false,
                        viewDisplay: false,
                        hide: true,
                    },
                    {
                        label: "发送者邮箱",
                        prop: "username",
                        type: "input",
                    },
                    {
                        label: "授权码",
                        prop: "password",
                        type: "input",
                    },
                    {
                        label: "服务器地址",
                        prop: "host",
                        type: "input",
                    },
                    {
                        label: "端口号",
                        prop: "port",
                        type: "input",
                        value: 465
                    },
                    {
                        label: "默认编码",
                        prop: "defaultEncoding",
                        type: "input",
                        value: "UTF-8"
                    },
                    {
                        label: "协议",
                        prop: "protocol",
                        type: "input",
                        value: "smtps"
                    },
                    {
                        label: "备注",
                        prop: "remark",
                        type: "input",
                    },
                    {
                        label: "是否启用",
                        prop: "status",
                        type: "input",
                        addDisplay: false,
                        editDisplay: false,
                        viewDisplay: false,
                    },
                ]
            {
              label: "收/发者邮箱",
              prop: "username",
              type: "input",
            },
            data: [],
            {
              label: "授权码",
              prop: "password",
              type: "input",
            },
            {
              label: "服务器地址",
              prop: "host",
              type: "input",
            },
            {
              label: "端口号",
              prop: "port",
              type: "input",
              value: 465
            },
            {
              label: "默认编码",
              prop: "defaultEncoding",
              type: "input",
              value: "UTF-8"
            },
            {
              label: "协议",
              prop: "protocol",
              type: "input",
              value: "smtps"
            },
            {
              label: "备注",
              prop: "remark",
              type: "input",
            }, {
              label: "配置类型",
              prop: "emailType",
              dicData: [{
                  label: '发送邮件配置',
                  value: '1'
                },
                {
                  label: '接收邮件配置',
                  value: '2'
                }
              ],
              props: {
                label: "label",
                value: "value",
              },
              type: "select",
            },
            // {
            //   width: 100,
            //   label: "是否启用",
            //   prop: "status",
            //   searchSpan: 4,
            //   value: "0",
            //   slot: true,
            //   search: true,
            //   type: "select",
            //   rules: [{
            //     required: true,
            //     message: "请选择是否启用",
            //     trigger: "blur",
            //   }, ],
            //   dicData: [{
            //       label: "禁用",
            //       value: "1",
            //     },
            //     {
            //       label: "启用",
            //       value: 2,
            //     }
            //   ],
            // },
            {
              label: "是否启用",
              prop: "status",
              type: "input",
              addDisplay: false,
              editDisplay: false,
              viewDisplay: false,
            },
          ]
        },
        data: [],


            debugForm: {},
            debugOption: {
                submitText: "保存",
                column: [
                    {
                        label: "收件人",
                        prop: "emails",
                        placeholder: "多个收件人请用英文逗号进行分隔",
                        span: 24,
                    },
                    {
                        label: "主题",
                        prop: "subject",
                        span: 24,
                    },
                    {
                        label: "内容",
                        prop: "content",
                        type: "textarea",
                        minRow: 5,
                        span: 24,
                    },
                ]
            }

        debugForm: {},
        debugOption: {
          submitText: "保存",
          column: [{
              label: "收件人",
              prop: "emails",
              placeholder: "多个收件人请用英文逗号进行分隔",
              span: 24,
            },
            {
              label: "主题",
              prop: "subject",
              span: 24,
            },
            {
              label: "内容",
              prop: "content",
              type: "textarea",
              minRow: 5,
              span: 24,
            },
          ]
        }

      }
    },
    computed: {
        ...mapGetters(["permission", "userInfo"]),
        permissionList () {
            return {
                addBtn: this.vaildData(this.permission.email_add, false),
                viewBtn: this.vaildData(this.permission.email_view, false),
                delBtn: this.vaildData(this.permission.email_delete, false),
                editBtn: this.vaildData(this.permission.email_edit, false)
            }
        },
        ids () {
            let ids = []
            this.selectionList.forEach(ele => {
                ids.push(ele.id)
            })
            return ids.join(",")
      ...mapGetters(["permission", "userInfo"]),
      permissionList() {
        return {
          addBtn: this.vaildData(this.permission.email_add, false),
          viewBtn: this.vaildData(this.permission.email_view, false),
          delBtn: this.vaildData(this.permission.email_delete, false),
          editBtn: this.vaildData(this.permission.email_edit, false)
        }
      },
      ids() {
        let ids = []
        this.selectionList.forEach(ele => {
          ids.push(ele.id)
        })
        return ids.join(",")
      }
    },
    methods: {
        handleSubmit (form, done) {
            console.log(form, "+++++++++")
      handleSubmit(form, done) {
        console.log(form, "+++++++++")

            form.emails = form.emails.split(",")
        form.emails = form.emails.split(",")

            sendEmail(form).then(res => {
                this.$message({
                    type: "success",
                    message: "发送成功!"
                })
            })
            done()
        },
        rowSave (row, done, loading) {
            add(row).then(() => {
                this.onLoad(this.page)
                this.$message({
                    type: "success",
                    message: "操作成功!"
                })
                done()
            }, error => {
                loading()
                window.console.log(error)
            })
        },
        rowUpdate (row, index, done, loading) {
            update(row).then(() => {
                this.onLoad(this.page)
                this.$message({
                    type: "success",
                    message: "操作成功!"
                })
                done()
            }, error => {
                loading()
                console.log(error)
            })
        },
        rowDel (row) {
            this.$confirm("确定将选择数据删除?", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    return remove(row.id)
                })
                .then(() => {
                    this.onLoad(this.page)
                    this.$message({
                        type: "success",
                        message: "操作成功!"
                    })
                })
        },
        handleDebug (row) {
            console.log(row, "++++++++++")
            this.box = true
        },
        handleEnable (row) {
            this.$confirm("是否确定启用这条配置?", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    return enable(row.id)
                })
                .then(() => {
                    this.onLoad(this.page)
                    this.$message({
                        type: "success",
                        message: "操作成功!"
                    })
                    this.$refs.crud.toggleSelection()
                })
        },
        handleDelete () {
            if (this.selectionList.length === 0) {
                this.$message.warning("请选择至少一条数据")
                return
            }
            this.$confirm("确定将选择数据删除?", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    return remove(this.ids)
                })
                .then(() => {
                    this.onLoad(this.page)
                    this.$message({
                        type: "success",
                        message: "操作成功!"
                    })
                    this.$refs.crud.toggleSelection()
                })
        },
        beforeOpen (done, type) {
            if (["edit", "view"].includes(type)) {
                getDetail(this.form.id).then(res => {
                    this.form = res.data.data
                })
            }
            done()
        },
        searchReset () {
            this.query = {}
        sendEmail(form).then(res => {
          this.$message({
            type: "success",
            message: "发送成功!"
          })
        })
        done()
      },
      rowSave(row, done, loading) {
        add(row).then(() => {
          this.onLoad(this.page)
          this.$message({
            type: "success",
            message: "操作成功!"
          })
          done()
        }, error => {
          loading()
          window.console.log(error)
        })
      },
      rowUpdate(row, index, done, loading) {
        update(row).then(() => {
          this.onLoad(this.page)
          this.$message({
            type: "success",
            message: "操作成功!"
          })
          done()
        }, error => {
          loading()
          console.log(error)
        })
      },
      rowDel(row) {
        this.$confirm("确定将选择数据删除?", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
          .then(() => {
            return remove(row.id)
          })
          .then(() => {
            this.onLoad(this.page)
        },
        searchChange (params, done) {
            this.query = params
            this.page.currentPage = 1
            this.onLoad(this.page, params)
            done()
        },
        selectionChange (list) {
            this.selectionList = list
        },
        selectionClear () {
            this.selectionList = []
            this.$refs.crud.toggleSelection()
        },
        currentChange (currentPage) {
            this.page.currentPage = currentPage
        },
        sizeChange (pageSize) {
            this.page.pageSize = pageSize
        },
        refreshChange () {
            this.onLoad(this.page, this.query)
        },
        onLoad (page, params = {}) {
            this.loading = true
            getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
                const data = res.data.data
                this.page.total = data.total
                this.data = data.records
                this.loading = false
                this.selectionClear()
            this.$message({
              type: "success",
              message: "操作成功!"
            })
          })
      },
      handleDebug(row) {
        console.log(row, "++++++++++")
        this.box = true
      },
      handleEnable(row) {
        this.$confirm("是否确定启用这条配置?", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
          .then(() => {
            return enable(row.id)
          })
          .then(() => {
            this.onLoad(this.page)
            this.$message({
              type: "success",
              message: "操作成功!"
            })
            this.$refs.crud.toggleSelection()
          })
      },
      handleDelete() {
        if (this.selectionList.length === 0) {
          this.$message.warning("请选择至少一条数据")
          return
        }
        this.$confirm("确定将选择数据删除?", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
          .then(() => {
            return remove(this.ids)
          })
          .then(() => {
            this.onLoad(this.page)
            this.$message({
              type: "success",
              message: "操作成功!"
            })
            this.$refs.crud.toggleSelection()
          })
      },
      beforeOpen(done, type) {
        if (["edit", "view"].includes(type)) {
          getDetail(this.form.id).then(res => {
            this.form = res.data.data
          })
        }
        done()
      },
      searchReset() {
        this.query = {}
        this.onLoad(this.page)
      },
      searchChange(params, done) {
        this.query = params
        this.page.currentPage = 1
        this.onLoad(this.page, params)
        done()
      },
      selectionChange(list) {
        this.selectionList = list
      },
      selectionClear() {
        this.selectionList = []
        this.$refs.crud.toggleSelection()
      },
      currentChange(currentPage) {
        this.page.currentPage = currentPage
      },
      sizeChange(pageSize) {
        this.page.pageSize = pageSize
      },
      refreshChange() {
        this.onLoad(this.page, this.query)
      },
      onLoad(page, params = {}) {
        this.loading = true
        getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
          const data = res.data.data
          this.page.total = data.total
          this.data = data.records
          this.loading = false
          this.selectionClear()
        })
      }
    }
}
  }
</script>

<style></style>
<style></style>

 src/views/property/propertyCompany.vue

@@ -199,13 +199,13 @@
              row: true,
              // width: 100,
            },
            {
              width: 210,
              overHidden: true,
              label: "管理小区",
              prop: "districtNames",
              display: false
            },
            // {
            //   width: 210,
            //   overHidden: true,
            //   label: "管理小区",
            //   prop: "districtNames",
            //   display: false
            // },
            {
              label: "简介",
              prop: "remark",

 src/views/propertySupervision/ownersCommittee.vue

@@ -73,6 +73,7 @@
          searchShow: true,
          searchMenuSpan: 3,
          menuWidth: 450,
          addBtn: false,
          menu: false,
          height: "auto",
          calcHeight: 54,
@@ -88,21 +89,6 @@
          // excelBtn: true,
          dialogClickModal: false,
          column: [{
              // hide: true,
              parent: false,
              label: "小区名称",
              prop: "districtId",
              type: 'tree',
              dicUrl: `/api/blade-district/district/getDistrictTree`,
              props: {
                label: "name",
                value: "id"
              },
              defaultExpandedKeys: ["361102003"],
              span: 12,
              width: 220,
              overHidden: true,
            }, {
              label: "标题",
              prop: "title",
              span: 24,
@@ -188,14 +174,21 @@
              }, ],
            },
            {
              width: 144,
              label: "发布时间",
              prop: "createTime",
              type: "date",
              format: "yyyy-MM-dd",
              valueFormat: "yyyy-MM-dd HH:mm:ss",
              // hide: true,
              parent: false,
              label: "小区名称",
              prop: "districtId",
              type: 'tree',
              dicUrl: `/api/blade-district/district/getDistrictTree`,
              props: {
                label: "name",
                value: "id"
              },
              defaultExpandedKeys: ["361102003"],
              span: 12,
              width: 220,
              overHidden: true,
            },

            {
              width: 110,
              label: "所属街道",
@@ -217,6 +210,14 @@
              prop: "communityName",
              search: true,
              searchSpan: 4
            },
            {
              width: 144,
              label: "发布时间",
              prop: "createTime",
              type: "date",
              format: "yyyy-MM-dd",
              valueFormat: "yyyy-MM-dd HH:mm:ss",
            },

            {
@@ -477,6 +478,7 @@
      },
      searchChange(params, done) {
        this.query = params
        this.query.publish = 1
        this.page.currentPage = 1
        this.onLoad(this.page, params)
        done()
@@ -556,6 +558,7 @@
          values.dateTime = null
        }
        values.type = 5
        values.publish = 1
        this.loading = true
        console.log(values)
        getList(page.currentPage, page.pageSize, values).then((res) => {

 src/views/resource/sms.vue

@@ -1,417 +1,425 @@
<template>
    <basic-container>
        <avue-crud :option="option" :table-loading="loading" :data="data" :page.sync="page" :permission="permissionList"
            :before-open="beforeOpen" v-model="form" ref="crud" @row-update="rowUpdate" @row-save="rowSave"
            @row-del="rowDel" @search-change="searchChange" @search-reset="searchReset" @selection-change="selectionChange"
            @current-change="currentChange" @size-change="sizeChange" @refresh-change="refreshChange" @on-load="onLoad">
            <template slot="menuLeft">
                <el-button type="danger" size="small" icon="el-icon-delete" plain v-if="permission.sms_delete"
                    @click="handleDelete">删 除
                </el-button>
            </template>
  <basic-container>
    <avue-crud :option="option" :table-loading="loading" :data="data" :page.sync="page" :permission="permissionList"
      :before-open="beforeOpen" v-model="form" ref="crud" @row-update="rowUpdate" @row-save="rowSave" @row-del="rowDel"
      @search-change="searchChange" @search-reset="searchReset" @selection-change="selectionChange"
      @current-change="currentChange" @size-change="sizeChange" @refresh-change="refreshChange" @on-load="onLoad">
      <template slot="menuLeft">
        <el-button type="danger" size="small" icon="el-icon-delete" plain v-if="permission.sms_delete"
          @click="handleDelete">删 除
        </el-button>
      </template>

            <template slot-scope="{ row, size, index }" slot="menu">
                <el-button :size="size" type="text" icon="el-icon-video-play" v-if="userInfo.role_name.includes('admin')"
                    @click="handleDebug(row)">调试
                </el-button>
                <el-button :size="size" type="text" icon="el-icon-circle-check" v-if="permission.sms_enable"
                    @click.stop="handleEnable(row)">启用
                </el-button>
            </template>
      <template slot-scope="{ row, size, index }" slot="menu">
        <el-button :size="size" type="text" icon="el-icon-video-play" v-if="userInfo.role_name.includes('admin')"
          @click="handleDebug(row)">调试
        </el-button>
        <el-button :size="size" type="text" icon="el-icon-circle-check" v-if="permission.sms_enable"
          @click.stop="handleEnable(row)">启用
        </el-button>
      </template>

            <template slot-scope="{row, size}" slot="status">
                <el-tag :size="size" :type="row.statusName == '是' ? 'success' : 'info'">{{ row.statusName }}</el-tag>
            </template>
            <template slot-scope="{row, size}" slot="category">
                <el-tag :size="size">{{ row.categoryName }}</el-tag>
            </template>
        </avue-crud>
        <el-dialog title="手机短信发送调试" append-to-body :visible.sync="box" width="550px">
            <avue-form :option="debugOption" v-model="debugForm" @submit="handleSend" />
        </el-dialog>
    </basic-container>
      <template slot-scope="{row, size}" slot="status">
        <el-tag :size="size" :type="row.statusName == '是' ? 'success' : 'info'">{{ row.statusName }}</el-tag>
      </template>
      <template slot-scope="{row, size}" slot="category">
        <el-tag :size="size">{{ row.categoryName }}</el-tag>
      </template>
    </avue-crud>
    <el-dialog title="手机短信发送调试" append-to-body :visible.sync="box" width="550px">
      <avue-form :option="debugOption" v-model="debugForm" @submit="handleSend" />
    </el-dialog>
  </basic-container>
</template>

<script>
import { getList, getDetail, add, update, remove, enable, send } from "@/api/resource/sms"
import { mapGetters } from "vuex"
import func from "@/util/func"
  import {
    getList,
    getDetail,
    add,
    update,
    remove,
    enable,
    send
  } from "@/api/resource/sms"
  import {
    mapGetters
  } from "vuex"
  import func from "@/util/func"

export default {
    data () {
        return {
            form: {},
            query: {},
            loading: true,
            box: false,
            page: {
                pageSize: 10,
                currentPage: 1,
                total: 0
            },
            selectionList: [],
            option: {
                labelWidth: 96,
                searchLabelWidth: 96,
                searchShow: true,
                searchMenuSpan: 3,
                menuWidth: 350,
  export default {
    data() {
      return {
        form: {},
        query: {},
        loading: true,
        box: false,
        page: {
          pageSize: 10,
          currentPage: 1,
          total: 0
        },
        selectionList: [],
        option: {
          labelWidth: 96,
          searchLabelWidth: 96,
          searchShow: true,
          searchMenuSpan: 3,
          menuWidth: 350,

                height: 'auto',
                calcHeight: 30,
                tip: false,
                border: true,
                index: true,
                viewBtn: true,
                selection: true,
                dialogWidth: 880,
                dialogClickModal: false,
                column: [
                    {
                        label: "分类",
                        type: "radio",
                        value: 1,
                        span: 24,
                        width: 100,
                        searchLabelWidth: 46,
                        row: true,
                        dicUrl: "/api/blade-system/dict/dictionary?code=sms",
                        props: {
                            label: "dictValue",
                            value: "dictKey"
                        },
                        dataType: "number",
                        slot: true,
                        prop: "category",
                        searchSpan: 4,
                        search: true,
                        rules: [{
                            required: true,
                            message: "请选择分类",
                            trigger: "blur"
                        }]
                    },
                    {
                        label: "资源编号",
                        prop: "smsCode",
                        span: 24,
                        width: 200,
                        searchSpan: 4,
                        search: true,
                        rules: [{
                            required: true,
                            message: "请输入资源编号",
                            trigger: "blur"
                        }]
                    },
                    {
                        label: "模版ID",
                        prop: "templateId",
                        span: 24,
                        width: 200,
                        searchSpan: 4,
                        searchLabelWidth: 80,
                        search: true,
                        rules: [{
                            required: true,
                            message: "请输入模版ID",
                            trigger: "blur"
                        }]
                    },
                    {
                        label: "accessKey",
                        prop: "accessKey",
                        span: 24,
                        overHidden: true,
                        rules: [{
                            required: true,
                            message: "请输入accessKey",
                            trigger: "blur"
                        }],
                    },
                    {
                        label: "secretKey",
                        prop: "secretKey",
                        span: 24,
                        overHidden: true,
                        display: true,
                        hide: true,
                        rules: [{
                            required: true,
                            message: "请输入secretKey",
                            trigger: "blur"
                        }],
                    },
                    {
                        label: "regionId",
                        prop: "regionId",
                        span: 24,
                        value: "cn-hangzhou",
                        hide: true,
                        display: false
                    },
                    {
                        label: "短信签名",
                        prop: "signName",
                        span: 24,
                        width: 200,
                        rules: [{
                            required: true,
                            message: "请输入短信签名",
                            trigger: "blur"
                        }],
                    },
                    {
                        width: 100,
                        label: "是否启用",
                        prop: "status",
                        span: 24,
                        align: "center",
                        slot: true,
                        addDisplay: false,
                        editDisplay: false,
                        viewDisplay: false,
                    },
                    {
                        label: "备注",
                        prop: "remark",
                        span: 24,
                        hide: true
                    },
                ]
          height: 'auto',
          calcHeight: 30,
          tip: false,
          border: true,
          index: true,
          viewBtn: true,
          selection: true,
          dialogWidth: 880,
          dialogClickModal: false,
          column: [
            // {
            //     label: "分类",
            //     type: "radio",
            //     value: 1,
            //     span: 24,
            //     width: 100,
            //     searchLabelWidth: 46,
            //     row: true,
            //     dicUrl: "/api/blade-system/dict/dictionary?code=sms",
            //     props: {
            //         label: "dictValue",
            //         value: "dictKey"
            //     },
            //     dataType: "number",
            //     slot: true,
            //     prop: "category",
            //     searchSpan: 4,
            //     search: true,
            //     rules: [{
            //         required: true,
            //         message: "请选择分类",
            //         trigger: "blur"
            //     }]
            // },
            {
              label: "资源编号",
              prop: "smsCode",
              span: 24,
              width: 200,
              searchSpan: 4,
              search: true,
              rules: [{
                required: true,
                message: "请输入资源编号",
                trigger: "blur"
              }]
            },
            data: [],
            debugForm: {
                code: '',
            {
              label: "模版ID",
              prop: "templateId",
              span: 24,
              width: 200,
              searchSpan: 4,
              searchLabelWidth: 80,
              search: true,
              rules: [{
                required: true,
                message: "请输入模版ID",
                trigger: "blur"
              }]
            },
            debugOption: {
                submitText: "发送",
                column: [
                    {
                        label: "资源编号",
                        prop: "code",
                        disabled: true,
                        span: 24,
                    },
                    {
                        label: "发送手机",
                        prop: "phones",
                        span: 24,
                    },
                    {
                        label: "发送参数",
                        prop: "params",
                        span: 24,
                        placeholder: "例: {'code':2333,'title':'通知标题'}",
                    },
                ]
            }
            {
              label: "accessKey",
              prop: "accessKey",
              span: 24,
              overHidden: true,
              rules: [{
                required: true,
                message: "请输入accessKey",
                trigger: "blur"
              }],
            },
            {
              label: "secretKey",
              prop: "secretKey",
              span: 24,
              overHidden: true,
              display: true,
              hide: true,
              rules: [{
                required: true,
                message: "请输入secretKey",
                trigger: "blur"
              }],
            },
            {
              label: "regionId",
              prop: "regionId",
              span: 24,
              value: "cn-hangzhou",
              hide: true,
              display: false
            },
            {
              label: "短信签名",
              prop: "signName",
              span: 24,
              width: 200,
              rules: [{
                required: true,
                message: "请输入短信签名",
                trigger: "blur"
              }],
            },
            {
              width: 100,
              label: "是否启用",
              prop: "status",
              span: 24,
              align: "center",
              slot: true,
              addDisplay: false,
              editDisplay: false,
              viewDisplay: false,
            },
            {
              label: "备注",
              prop: "remark",
              span: 24,
              hide: true
            },
          ]
        },
        data: [],
        debugForm: {
          code: '',
        },
        debugOption: {
          submitText: "发送",
          column: [{
              label: "资源编号",
              prop: "code",
              disabled: true,
              span: 24,
            },
            {
              label: "发送手机",
              prop: "phones",
              span: 24,
            },
            {
              label: "发送参数",
              prop: "params",
              span: 24,
              placeholder: "例: {'code':2333,'title':'通知标题'}",
            },
          ]
        }
      }
    },
    watch: {
        'form.category' () {
            const category = func.toInt(this.form.category)
            this.$refs.crud.option.column.filter(item => {
                if (item.prop === "templateId") {
                    if (category === 1) {
                        item.label = "模版内容"
                    } else {
                        item.label = "模版ID"
                    }
                }
                if (item.prop === "accessKey") {
                    if (category === 1) {
                        item.label = "apiKey"
                    } else if (category === 4) {
                        item.label = "appId"
                    } else {
                        item.label = "accessKey"
                    }
                }
                if (item.prop === "secretKey") {
                    item.display = category !== 1
                    if (category === 4) {
                        item.label = "appKey"
                    } else {
                        item.label = "secretKey"
                    }
                }
                if (item.prop === "regionId") {
                    if (category === 3) {
                        item.display = true
                        item.value = "cn-hangzhou"
                    } else {
                        item.display = false
                    }
                }
            })
        }
      'form.category'() {
        const category = func.toInt(this.form.category)
        this.$refs.crud.option.column.filter(item => {
          if (item.prop === "templateId") {
            if (category === 1) {
              item.label = "模版内容"
            } else {
              item.label = "模版ID"
            }
          }
          if (item.prop === "accessKey") {
            if (category === 1) {
              item.label = "apiKey"
            } else if (category === 4) {
              item.label = "appId"
            } else {
              item.label = "accessKey"
            }
          }
          if (item.prop === "secretKey") {
            item.display = category !== 1
            if (category === 4) {
              item.label = "appKey"
            } else {
              item.label = "secretKey"
            }
          }
          if (item.prop === "regionId") {
            if (category === 3) {
              item.display = true
              item.value = "cn-hangzhou"
            } else {
              item.display = false
            }
          }
        })
      }
    },
    computed: {
        ...mapGetters(["userInfo", "permission"]),
        permissionList () {
            return {
                addBtn: this.vaildData(this.permission.sms_add, false),
                viewBtn: this.vaildData(this.permission.sms_view, false),
                delBtn: this.vaildData(this.permission.sms_delete, false),
                editBtn: this.vaildData(this.permission.sms_edit, false)
            }
        },
        ids () {
            let ids = []
            this.selectionList.forEach(ele => {
                ids.push(ele.id)
            })
            return ids.join(",")
      ...mapGetters(["userInfo", "permission"]),
      permissionList() {
        return {
          addBtn: this.vaildData(this.permission.sms_add, false),
          viewBtn: this.vaildData(this.permission.sms_view, false),
          delBtn: this.vaildData(this.permission.sms_delete, false),
          editBtn: this.vaildData(this.permission.sms_edit, false)
        }
      },
      ids() {
        let ids = []
        this.selectionList.forEach(ele => {
          ids.push(ele.id)
        })
        return ids.join(",")
      }
    },
    methods: {
        rowSave (row, done, loading) {
            add(row).then(() => {
                this.onLoad(this.page)
                this.$message({
                    type: "success",
                    message: "操作成功!"
                })
                done()
            }, error => {
                window.console.log(error)
                loading()
            })
        },
        rowUpdate (row, index, done, loading) {
            update(row).then(() => {
                this.onLoad(this.page)
                this.$message({
                    type: "success",
                    message: "操作成功!"
                })
                done()
            }, error => {
                window.console.log(error)
                loading()
            })
        },
        rowDel (row) {
            this.$confirm("确定将选择数据删除?", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    return remove(row.id)
                })
                .then(() => {
                    this.onLoad(this.page)
                    this.$message({
                        type: "success",
                        message: "操作成功!"
                    })
                })
        },
        handleEnable (row) {
            this.$confirm("是否确定启用这条配置?", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    return enable(row.id)
                })
                .then(() => {
                    this.onLoad(this.page)
                    this.$message({
                        type: "success",
                        message: "操作成功!"
                    })
                    this.$refs.crud.toggleSelection()
                })
        },
        handleDebug (row) {
            this.box = true
            this.debugForm.code = row.smsCode
        },
        handleSend (form, done, loading) {
            send(form.code, form.phones, form.params).then((res) => {
                this.$message({
                    type: "success",
                    message: "发送成功!"
                })
                done()
                window.console.log(res)
                this.box = false
            }, error => {
                window.console.log(error)
                loading()
            })
        },
        handleDelete () {
            if (this.selectionList.length === 0) {
                this.$message.warning("请选择至少一条数据")
                return
            }
            this.$confirm("确定将选择数据删除?", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    return remove(this.ids)
                })
                .then(() => {
                    this.onLoad(this.page)
                    this.$message({
                        type: "success",
                        message: "操作成功!"
                    })
                    this.$refs.crud.toggleSelection()
                })
        },
        beforeOpen (done, type) {
            if (["edit", "view"].includes(type)) {
                getDetail(this.form.id).then(res => {
                    this.form = res.data.data
                })
            }
            done()
        },
        searchReset () {
            this.query = {}
      rowSave(row, done, loading) {
        add(row).then(() => {
          this.onLoad(this.page)
          this.$message({
            type: "success",
            message: "操作成功!"
          })
          done()
        }, error => {
          window.console.log(error)
          loading()
        })
      },
      rowUpdate(row, index, done, loading) {
        update(row).then(() => {
          this.onLoad(this.page)
          this.$message({
            type: "success",
            message: "操作成功!"
          })
          done()
        }, error => {
          window.console.log(error)
          loading()
        })
      },
      rowDel(row) {
        this.$confirm("确定将选择数据删除?", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
          .then(() => {
            return remove(row.id)
          })
          .then(() => {
            this.onLoad(this.page)
        },
        searchChange (params, done) {
            this.query = params
            this.page.currentPage = 1
            this.onLoad(this.page, params)
            done()
        },
        selectionChange (list) {
            this.selectionList = list
        },
        selectionClear () {
            this.selectionList = []
            this.$refs.crud.toggleSelection()
        },
        currentChange (currentPage) {
            this.page.currentPage = currentPage
        },
        sizeChange (pageSize) {
            this.page.pageSize = pageSize
        },
        refreshChange () {
            this.onLoad(this.page, this.query)
        },
        onLoad (page, params = {}) {
            this.loading = true
            getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
                const data = res.data.data
                this.page.total = data.total
                this.data = data.records
                this.loading = false
                this.selectionClear()
            this.$message({
              type: "success",
              message: "操作成功!"
            })
          })
      },
      handleEnable(row) {
        this.$confirm("是否确定启用这条配置?", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
          .then(() => {
            return enable(row.id)
          })
          .then(() => {
            this.onLoad(this.page)
            this.$message({
              type: "success",
              message: "操作成功!"
            })
            this.$refs.crud.toggleSelection()
          })
      },
      handleDebug(row) {
        this.box = true
        this.debugForm.code = row.smsCode
      },
      handleSend(form, done, loading) {
        send(form.code, form.phones, form.params).then((res) => {
          this.$message({
            type: "success",
            message: "发送成功!"
          })
          done()
          window.console.log(res)
          this.box = false
        }, error => {
          window.console.log(error)
          loading()
        })
      },
      handleDelete() {
        if (this.selectionList.length === 0) {
          this.$message.warning("请选择至少一条数据")
          return
        }
        this.$confirm("确定将选择数据删除?", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
          .then(() => {
            return remove(this.ids)
          })
          .then(() => {
            this.onLoad(this.page)
            this.$message({
              type: "success",
              message: "操作成功!"
            })
            this.$refs.crud.toggleSelection()
          })
      },
      beforeOpen(done, type) {
        if (["edit", "view"].includes(type)) {
          getDetail(this.form.id).then(res => {
            this.form = res.data.data
          })
        }
        done()
      },
      searchReset() {
        this.query = {}
        this.onLoad(this.page)
      },
      searchChange(params, done) {
        this.query = params
        this.page.currentPage = 1
        this.onLoad(this.page, params)
        done()
      },
      selectionChange(list) {
        this.selectionList = list
      },
      selectionClear() {
        this.selectionList = []
        this.$refs.crud.toggleSelection()
      },
      currentChange(currentPage) {
        this.page.currentPage = currentPage
      },
      sizeChange(pageSize) {
        this.page.pageSize = pageSize
      },
      refreshChange() {
        this.onLoad(this.page, this.query)
      },
      onLoad(page, params = {}) {
        this.loading = true
        getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
          const data = res.data.data
          this.page.total = data.total
          this.data = data.records
          this.loading = false
          this.selectionClear()
        })
      }
    }
}
</script>

  }
</script>

 src/views/system/email/emailSendingHistory.vue

@@ -1,224 +1,279 @@
<template>
    <basic-container>
        <avue-crud :option="option" :table-loading="loading" :data="data" :page.sync="page" :permission="permissionList"
            :before-open="beforeOpen" v-model="form" ref="crud" @row-update="rowUpdate" @row-save="rowSave"
            @row-del="rowDel" @search-change="searchChange" @search-reset="searchReset"
            @selection-change="selectionChange" @current-change="currentChange" @size-change="sizeChange"
            @refresh-change="refreshChange" @on-load="onLoad">
        </avue-crud>
    </basic-container>
  <basic-container>
    <avue-crud :option="option" :table-loading="loading" :data="data" :page.sync="page" :permission="permissionList"
      :before-open="beforeOpen" v-model="form" ref="crud" @row-update="rowUpdate" @row-save="rowSave" @row-del="rowDel"
      @search-change="searchChange" @search-reset="searchReset" @selection-change="selectionChange"
      @current-change="currentChange" @size-change="sizeChange" @refresh-change="refreshChange" @on-load="onLoad">
    </avue-crud>
  </basic-container>
</template>

<script>
import { getMessageUserPage } from "@/api/system/email"
import { mapGetters } from "vuex"
  import {
    getMessageUserPage
  } from "@/api/system/email"
  import {
    mapGetters
  } from "vuex"

export default {
    data () {
        return {
            form: {},
            query: {},
            loading: true,
            page: {
                pageSize: 10,
                currentPage: 1,
                total: 0
  export default {
    data() {
      return {
        form: {},
        query: {},
        loading: true,
        page: {
          pageSize: 10,
          currentPage: 1,
          total: 0
        },
        selectionList: [],
        option: {
          height: 'auto',
          calcHeight: 30,
          tip: false,
          searchShow: true,
          searchMenuSpan: 6,
          border: true,
          index: true,
          viewBtn: false,
          addBtn: false,
          selection: true,
          dialogClickModal: false,
          // menuWidth: 350,
          menu: false,
          column: [{
              label: "发送人",
              prop: "sendUserName",
              type: "input",
              align: 'center',
              search: true,
              searchSpan: 3,
              searchLabelWidth: 66,
            }, {
              label: "接收人",
              prop: "receiveUserName",
              type: "input",
              align: 'center',
              search: true,
              searchSpan: 3,
              searchLabelWidth: 66,
            },
            selectionList: [],
            option: {
                height: 'auto',
                calcHeight: 30,
                tip: false,
                searchShow: true,
                searchMenuSpan: 6,
                border: true,
                index: true,
                viewBtn: false,
                addBtn: false,
                selection: true,
                dialogClickModal: false,
                // menuWidth: 350,
                menu: false,
                column: [
                    {
                        label: "标题",
                        prop: "title",
                        type: "input",
                        align: 'center'
                    },
                    {
                        label: "正文内容",
                        prop: "content",
                        type: "input",
                        align: 'center'
                    },
                ]
            {
              label: "标题",
              prop: "title",
              type: "input",
              align: 'center',
              search: true,
              searchSpan: 4,
              searchLabelWidth: 56,
            },
            data: [],
        }
            {
              label: "正文内容",
              prop: "content",
              type: "input",
              align: 'center',
              search: true,
              searchSpan: 4,
              searchLabelWidth: 76,
            },
            {
              label: "发送状态",
              prop: "sendStatus",
              type: "switch",
              align: 'center',
              search: true,
              searchSpan: 3,
              searchLabelWidth: 76,
              // 1:待发送，2.:发送成功 3：发送失败
              dicData: [{
                  label: "待发送",
                  value: 1
                },
                {
                  label: "发送成功",
                  value: 2
                }, {
                  label: "发送失败",
                  value: 3
                },
              ],
            },
            {
              label: "发送时间",
              prop: "createTime",
              type: "input",
              align: 'center'
            },
          ]
        },
        data: [],
      }
    },
    computed: {
        ...mapGetters(["permission", "userInfo"]),
        permissionList () {
            return {
                addBtn: this.vaildData(this.permission.email_add, false),
                viewBtn: this.vaildData(this.permission.email_view, false),
                delBtn: this.vaildData(this.permission.email_delete, false),
                editBtn: this.vaildData(this.permission.email_edit, false)
            }
        },
        ids () {
            let ids = []
            this.selectionList.forEach(ele => {
                ids.push(ele.id)
            })
            return ids.join(",")
      ...mapGetters(["permission", "userInfo"]),
      permissionList() {
        return {
          addBtn: this.vaildData(this.permission.email_add, false),
          viewBtn: this.vaildData(this.permission.email_view, false),
          delBtn: this.vaildData(this.permission.email_delete, false),
          editBtn: this.vaildData(this.permission.email_edit, false)
        }
      },
      ids() {
        let ids = []
        this.selectionList.forEach(ele => {
          ids.push(ele.id)
        })
        return ids.join(",")
      }
    },
    methods: {
        handleSubmit (form, done) {
            console.log(form, "+++++++++")
      handleSubmit(form, done) {
        console.log(form, "+++++++++")

            form.emails = form.emails.split(",")
        form.emails = form.emails.split(",")

            sendEmail(form).then(res => {
                this.$message({
                    type: "success",
                    message: "发送成功!"
                })
            })
            done()
        },
        rowSave (row, done, loading) {
            add(row).then(() => {
                this.onLoad(this.page)
                this.$message({
                    type: "success",
                    message: "操作成功!"
                })
                done()
            }, error => {
                loading()
                window.console.log(error)
            })
        },
        rowUpdate (row, index, done, loading) {
            update(row).then(() => {
                this.onLoad(this.page)
                this.$message({
                    type: "success",
                    message: "操作成功!"
                })
                done()
            }, error => {
                loading()
                console.log(error)
            })
        },
        rowDel (row) {
            this.$confirm("确定将选择数据删除?", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    return remove(row.id)
                })
                .then(() => {
                    this.onLoad(this.page)
                    this.$message({
                        type: "success",
                        message: "操作成功!"
                    })
                })
        },

        handleEnable (row) {
            this.$confirm("是否确定启用这条配置?", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    return enable(row.id)
                })
                .then(() => {
                    this.onLoad(this.page)
                    this.$message({
                        type: "success",
                        message: "操作成功!"
                    })
                    this.$refs.crud.toggleSelection()
                })
        },
        handleDelete () {
            if (this.selectionList.length === 0) {
                this.$message.warning("请选择至少一条数据")
                return
            }
            this.$confirm("确定将选择数据删除?", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    return remove(this.ids)
                })
                .then(() => {
                    this.onLoad(this.page)
                    this.$message({
                        type: "success",
                        message: "操作成功!"
                    })
                    this.$refs.crud.toggleSelection()
                })
        },
        beforeOpen (done, type) {
            if (["edit", "view"].includes(type)) {
                getDetail(this.form.id).then(res => {
                    this.form = res.data.data
                })
            }
            done()
        },
        searchReset () {
            this.query = {}
        sendEmail(form).then(res => {
          this.$message({
            type: "success",
            message: "发送成功!"
          })
        })
        done()
      },
      rowSave(row, done, loading) {
        add(row).then(() => {
          this.onLoad(this.page)
          this.$message({
            type: "success",
            message: "操作成功!"
          })
          done()
        }, error => {
          loading()
          window.console.log(error)
        })
      },
      rowUpdate(row, index, done, loading) {
        update(row).then(() => {
          this.onLoad(this.page)
          this.$message({
            type: "success",
            message: "操作成功!"
          })
          done()
        }, error => {
          loading()
          console.log(error)
        })
      },
      rowDel(row) {
        this.$confirm("确定将选择数据删除?", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
          .then(() => {
            return remove(row.id)
          })
          .then(() => {
            this.onLoad(this.page)
        },
        searchChange (params, done) {
            this.query = params
            this.page.currentPage = 1
            this.onLoad(this.page, params)
            done()
        },
        selectionChange (list) {
            this.selectionList = list
        },
        selectionClear () {
            this.selectionList = []
            this.$refs.crud.toggleSelection()
        },
        currentChange (currentPage) {
            this.page.currentPage = currentPage
        },
        sizeChange (pageSize) {
            this.page.pageSize = pageSize
        },
        refreshChange () {
            this.onLoad(this.page, this.query)
        },
        onLoad (page, params = {}) {
            this.loading = true
            getMessageUserPage(page.currentPage, page.pageSize, Object.assign(params, {})).then(res => {
                const data = res.data.data
                this.page.total = data.total
                this.data = data.records
                this.loading = false
                this.selectionClear()
            this.$message({
              type: "success",
              message: "操作成功!"
            })
          })
      },

      handleEnable(row) {
        this.$confirm("是否确定启用这条配置?", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
          .then(() => {
            return enable(row.id)
          })
          .then(() => {
            this.onLoad(this.page)
            this.$message({
              type: "success",
              message: "操作成功!"
            })
            this.$refs.crud.toggleSelection()
          })
      },
      handleDelete() {
        if (this.selectionList.length === 0) {
          this.$message.warning("请选择至少一条数据")
          return
        }
        this.$confirm("确定将选择数据删除?", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
          .then(() => {
            return remove(this.ids)
          })
          .then(() => {
            this.onLoad(this.page)
            this.$message({
              type: "success",
              message: "操作成功!"
            })
            this.$refs.crud.toggleSelection()
          })
      },
      beforeOpen(done, type) {
        if (["edit", "view"].includes(type)) {
          getDetail(this.form.id).then(res => {
            this.form = res.data.data
          })
        }
        done()
      },
      searchReset() {
        this.query = {}
        this.onLoad(this.page)
      },
      searchChange(params, done) {
        this.query = params
        this.page.currentPage = 1
        this.onLoad(this.page, params)
        done()
      },
      selectionChange(list) {
        this.selectionList = list
      },
      selectionClear() {
        this.selectionList = []
        this.$refs.crud.toggleSelection()
      },
      currentChange(currentPage) {
        this.page.currentPage = currentPage
      },
      sizeChange(pageSize) {
        this.page.pageSize = pageSize
      },
      refreshChange() {
        this.onLoad(this.page, this.query)
      },
      onLoad(page, params = {}) {
        this.loading = true
        getMessageUserPage(page.currentPage, page.pageSize, Object.assign(params, {
          type: 2
        })).then(res => {
          const data = res.data.data
          this.page.total = data.total
          this.data = data.records
          this.loading = false
          this.selectionClear()
        })
      }
    }
}
  }
</script>

<style></style>
<style></style>

 src/views/system/email/emailTemplates.vue

@@ -1,226 +1,240 @@
<template>
    <basic-container>
        <avue-crud :option="option" :table-loading="loading" :data="data" :page.sync="page" :permission="permissionList"
            :before-open="beforeOpen" v-model="form" ref="crud" @row-update="rowUpdate" @row-save="rowSave"
            @row-del="rowDel" @search-change="searchChange" @search-reset="searchReset"
            @selection-change="selectionChange" @current-change="currentChange" @size-change="sizeChange"
            @refresh-change="refreshChange" @on-load="onLoad">
            <template slot-scope="{ row, size, index }" slot="menu">
                <el-button :size="size" type="text" icon="el-icon-circle-check" @click.stop="handleEnable(row)">复制
                </el-button>
            </template>
        </avue-crud>
    </basic-container>
  <basic-container>
    <avue-crud :option="option" :table-loading="loading" :data="data" :page.sync="page" :permission="permissionList"
      :before-open="beforeOpen" v-model="form" ref="crud" @row-update="rowUpdate" @row-save="rowSave" @row-del="rowDel"
      @search-change="searchChange" @search-reset="searchReset" @selection-change="selectionChange"
      @current-change="currentChange" @size-change="sizeChange" @refresh-change="refreshChange" @on-load="onLoad">
    </avue-crud>
  </basic-container>
</template>

<script>
import { getEmailTemplateList, saveEmailTemplateList, updateEmailTemplateList, detailEmailTemplateList, removeEmailTemplateList } from "@/api/system/email"
import { mapGetters } from "vuex"
  import {
    getEmailTemplateList,
    saveEmailTemplateList,
    updateEmailTemplateList,
    detailEmailTemplateList,
    removeEmailTemplateList
  } from "@/api/system/email"
  import {
    mapGetters
  } from "vuex"

export default {
    data () {
        return {
            form: {},
            query: {},
            loading: true,
            page: {
                pageSize: 10,
                currentPage: 1,
                total: 0
  export default {
    data() {
      return {
        form: {},
        query: {},
        loading: true,
        page: {
          pageSize: 10,
          currentPage: 1,
          total: 0
        },
        selectionList: [],
        option: {
          height: 'auto',
          calcHeight: 30,
          tip: false,
          searchShow: true,
          searchMenuSpan: 6,
          border: true,
          index: true,
          viewBtn: false,
          selection: true,
          dialogClickModal: false,
          menuWidth: 350,
          column: [{
              label: "标题",
              prop: "title",
              type: "input",
              align: 'center',
              row: true,
              search: true,
              searchSpan: 4,
              searchLabelWidth: 56,
            },
            selectionList: [],
            option: {
                height: 'auto',
                calcHeight: 30,
                tip: false,
                searchShow: true,
                searchMenuSpan: 6,
                border: true,
                index: true,
                viewBtn: false,
                selection: true,
                dialogClickModal: false,
                menuWidth: 350,
                column: [
                    {
                        label: "标题",
                        prop: "title",
                        type: "input",
                        align: 'center'
                    },
                    {
                        label: "正文内容",
                        prop: "content",
                        type: "input",
                        align: 'center'
                    },
                ]
            {
              label: "正文内容",
              prop: "content",
              align: 'center',
              type: 'textarea',
              rows: 5
            },
            data: [],
        }
            {
              label: "创建时间",
              prop: "createTime",
              type: "input",
              align: 'center',
              display: false
            },
          ]
        },
        data: [],
      }
    },
    computed: {
        ...mapGetters(["permission", "userInfo"]),
        permissionList () {
            return {
                addBtn: this.vaildData(this.permission.email_add, false),
                viewBtn: this.vaildData(this.permission.email_view, false),
                delBtn: this.vaildData(this.permission.email_delete, false),
                editBtn: this.vaildData(this.permission.email_edit, false)
            }
        },
        ids () {
            let ids = []
            this.selectionList.forEach(ele => {
                ids.push(ele.id)
            })
            return ids.join(",")
      ...mapGetters(["permission", "userInfo"]),
      permissionList() {
        return {
          addBtn: this.vaildData(this.permission.email_add, false),
          viewBtn: this.vaildData(this.permission.email_view, false),
          delBtn: this.vaildData(this.permission.email_delete, false),
          editBtn: this.vaildData(this.permission.email_edit, false)
        }
      },
      ids() {
        let ids = []
        this.selectionList.forEach(ele => {
          ids.push(ele.id)
        })
        return ids.join(",")
      }
    },
    methods: {
        handleSubmit (form, done) {
            console.log(form, "+++++++++")
      handleSubmit(form, done) {
        console.log(form, "+++++++++")

            form.emails = form.emails.split(",")
        form.emails = form.emails.split(",")

            sendEmail(form).then(res => {
                this.$message({
                    type: "success",
                    message: "发送成功!"
                })
            })
            done()
        },
        rowSave (row, done, loading) {
            saveEmailTemplateList(row).then(() => {
                this.onLoad(this.page)
                this.$message({
                    type: "success",
                    message: "操作成功!"
                })
                done()
            }, error => {
                loading()
                window.console.log(error)
            })
        },
        rowUpdate (row, index, done, loading) {
            updateEmailTemplateList(row).then(() => {
                this.onLoad(this.page)
                this.$message({
                    type: "success",
                    message: "操作成功!"
                })
                done()
            }, error => {
                loading()
                console.log(error)
            })
        },
        rowDel (row) {
            this.$confirm("确定将选择数据删除?", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    return removeEmailTemplateList(row.id)
                })
                .then(() => {
                    this.onLoad(this.page)
                    this.$message({
                        type: "success",
                        message: "操作成功!"
                    })
                })
        },

        handleEnable (row) {
            this.$confirm("是否确定启用这条配置?", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    return enable(row.id)
                })
                .then(() => {
                    this.onLoad(this.page)
                    this.$message({
                        type: "success",
                        message: "操作成功!"
                    })
                    this.$refs.crud.toggleSelection()
                })
        },
        handleDelete () {
            if (this.selectionList.length === 0) {
                this.$message.warning("请选择至少一条数据")
                return
            }
            this.$confirm("确定将选择数据删除?", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    return removeEmailTemplateList(this.ids)
                })
                .then(() => {
                    this.onLoad(this.page)
                    this.$message({
                        type: "success",
                        message: "操作成功!"
                    })
                    this.$refs.crud.toggleSelection()
                })
        },
        beforeOpen (done, type) {
            if (["edit", "view"].includes(type)) {
                detailEmailTemplateList(this.form.id).then(res => {
                    this.form = res.data.data
                })
            }
            done()
        },
        searchReset () {
            this.query = {}
        sendEmail(form).then(res => {
          this.$message({
            type: "success",
            message: "发送成功!"
          })
        })
        done()
      },
      rowSave(row, done, loading) {
        saveEmailTemplateList(row).then(() => {
          this.onLoad(this.page)
          this.$message({
            type: "success",
            message: "操作成功!"
          })
          done()
        }, error => {
          loading()
          window.console.log(error)
        })
      },
      rowUpdate(row, index, done, loading) {
        updateEmailTemplateList(row).then(() => {
          this.onLoad(this.page)
          this.$message({
            type: "success",
            message: "操作成功!"
          })
          done()
        }, error => {
          loading()
          console.log(error)
        })
      },
      rowDel(row) {
        this.$confirm("确定将选择数据删除?", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
          .then(() => {
            return removeEmailTemplateList(row.id)
          })
          .then(() => {
            this.onLoad(this.page)
        },
        searchChange (params, done) {
            this.query = params
            this.page.currentPage = 1
            this.onLoad(this.page, params)
            done()
        },
        selectionChange (list) {
            this.selectionList = list
        },
        selectionClear () {
            this.selectionList = []
            this.$refs.crud.toggleSelection()
        },
        currentChange (currentPage) {
            this.page.currentPage = currentPage
        },
        sizeChange (pageSize) {
            this.page.pageSize = pageSize
        },
        refreshChange () {
            this.onLoad(this.page, this.query)
        },
        onLoad (page, params = {}) {
            this.loading = true
            getEmailTemplateList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
                const data = res.data.data
                this.page.total = data.total
                this.data = data.records
                this.loading = false
                this.selectionClear()
            this.$message({
              type: "success",
              message: "操作成功!"
            })
          })
      },

      handleEnable(row) {
        this.$confirm("是否确定启用这条配置?", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
          .then(() => {
            return enable(row.id)
          })
          .then(() => {
            this.onLoad(this.page)
            this.$message({
              type: "success",
              message: "操作成功!"
            })
            this.$refs.crud.toggleSelection()
          })
      },
      handleDelete() {
        if (this.selectionList.length === 0) {
          this.$message.warning("请选择至少一条数据")
          return
        }
        this.$confirm("确定将选择数据删除?", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
          .then(() => {
            return removeEmailTemplateList(this.ids)
          })
          .then(() => {
            this.onLoad(this.page)
            this.$message({
              type: "success",
              message: "操作成功!"
            })
            this.$refs.crud.toggleSelection()
          })
      },
      beforeOpen(done, type) {
        if (["edit", "view"].includes(type)) {
          detailEmailTemplateList(this.form.id).then(res => {
            this.form = res.data.data
          })
        }
        done()
      },
      searchReset() {
        this.query = {}
        this.onLoad(this.page)
      },
      searchChange(params, done) {
        this.query = params
        this.page.currentPage = 1
        this.onLoad(this.page, params)
        done()
      },
      selectionChange(list) {
        this.selectionList = list
      },
      selectionClear() {
        this.selectionList = []
        this.$refs.crud.toggleSelection()
      },
      currentChange(currentPage) {
        this.page.currentPage = currentPage
      },
      sizeChange(pageSize) {
        this.page.pageSize = pageSize
      },
      refreshChange() {
        this.onLoad(this.page, this.query)
      },
      onLoad(page, params = {}) {
        this.loading = true
        getEmailTemplateList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
          const data = res.data.data
          this.page.total = data.total
          this.data = data.records
          this.loading = false
          this.selectionClear()
        })
      }
    }
}
  }
</script>

<style></style>
<style></style>