ncs_ui/src/views/message-center/message-template/index.vue

<template>
  <div>
    <ag-grid-layout
        toolbar
        :table-height="tableHeight"
        theme="ag-theme-alpine"
        :column-defs="columnDefs"
        :row-data="rowData"
        :locale-text="localeText"
        :grid-options="gridOptions"
        :default-col-def="defaultColDef"
        :animate-rows="true"
        :row-selection="rowSelection"
        :enable-cell-change-flash="true"
        @filterChanged="filterModifed"
        @sortChanged="gridSortChange"
    >
      <!--        @rowDoubleClicked="getList"-->
      <div slot="toolbar" class="inner-toolbar">
        <div class="toolbar-search">
          <en-table-search :placeholder="this.$t('action.keywords')" @search="handlerSearch"/>
        </div>
        <div class="toolbar-btns">
          <el-button type="primary" size="mini" @click="createMessageType">{{
              this.$t('mc.messageTemplateModule.addMessageTemplate')
            }}
          </el-button>
        </div>
      </div>
      <el-pagination
          v-if="pageData"
          slot="pagination"
          :current-page="pageData.page_no"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageData.page_size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageData.data_total"
          @size-change="handlePageSizeChange"
          @current-change="handlePageCurrentChange"
      />
    </ag-grid-layout>
    <el-dialog :title.sync="formtitle" :visible.sync="formshow"  width="35%">
      <div style="position: relative;" @click="closeMenu">
        <el-form ref="editform" :rules="rules" label-width="120px" :model="formmodel">

          <el-row>
            <el-col :span="24">
              <el-form-item :label="this.$t('mc.messageTemplateModule.templateTitle')" prop="template_title">
                <el-input
                    v-model="formmodel.template_title"
                    clearable
                    :maxlength="100"
                    :placeholder="this.$t('mc.messageTemplateModule.templateTitle')"
                />
              </el-form-item>

              <el-form-item   :label="this.$t('mc.messageTemplateModule.templateContent')" prop="template_content">
                <el-input
                    v-model="formmodel.template_content"
                    clearable
                    ref="template_content"
                    type="textarea"
                    @focus="closeMenu"
                    @blur="recordCursorPosition"
                    @contextmenu.prevent.native="openMenu($event)"
                    :placeholder="this.$t('mc.messageTemplateModule.templateContent')"
                />
                <span>{{this.$t('mc.messageTemplateModule.insertParamerTip')}}</span>
              </el-form-item>

              <el-form-item label="" prop="bool_shared">
                <el-checkbox v-model="formmodel.bool_shared" :true-label="1" :false-label="0">
                  {{ this.$t('mc.messageTemplateModule.boolShared') }}
                </el-checkbox>
              </el-form-item>

            </el-col>
          </el-row>
        </el-form>

      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="formshow = false">{{ this.$t('action.cancel') }}</el-button>
        <el-button type="primary" :disabled="this.formmodel.part_id!==Number(this.$store.getters.partId)" @click="handlerFormSubmit('editform')">{{ this.$t('action.yes') }}</el-button>
      </div>

      <ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
        <li @click="insertAtCursor(item)" v-for="item in templateParamers" :key="item.id">{{ item.param_name }}</li>
      </ul>
    </el-dialog>

  </div>
</template>


<script>
import ButtonCellRenderList from "@/components/AgGridCellRender/ButtonCellRenderList.vue";
import ButtonCellRender from "@/components/AgGridCellRender/ButtonCellRender.vue";
import ListFilter from "@/components/AgGridCustomFilter/ListFilter.vue";
import RadioFilter from "@/components/AgGridCustomFilter/RadioFilter.vue";
import {AG_GRID_LOCALE_CN} from "@/utils/AgGridVueLocaleCn";
import * as API_MessageTemplate from "@/api/message_template";
import {unix2Date} from "@/utils/Foundation";
import * as API_TemplateParamer from "@/api/template_paramer";

export default {
  name: "index",
  components: {ButtonCellRenderList, ButtonCellRender, ListFilter, RadioFilter},
  data() {
    return {
      tableData: [],
      /** 列表参数 */
      params: {
        page_size: 20,
        page_no: 1,
        fixedCondition: ' part_id = ' + this.$store.getters.partId+' or bool_shared = 1',
      },
      /** 新建组织弹出参数 **/
      formtitle: this.$t('mc.messageTemplateModule.addMessageTemplate'),
      formshow: false,
      /** 频道订阅设置 */
      formSubscribe: false,
      formmodel: {
        part_id:this.$store.getters.partId
      },
      frameGroups: [],
      rules: {
        template_title: [
          {required: true, message: this.$t('mc.messageTemplateModule.templateTitleRequired'), trigger: 'blur'}
        ],
        template_content: [
          {required: true, message: this.$t('mc.messageTemplateModule.templateContentRequired'), trigger: 'blur'},
{validator: this.validateContent, trigger: 'blur'}
        ]
      },

      /** ag-grid参数 **/
      pageData: [],
      loading: false,
      columnDefs: null,
      rowData: null,
      defaultColDef: null,
      gridOptions: null,
      gridApi: null,
      columnApi: null,
      localeText: AG_GRID_LOCALE_CN,
      filterState: null,
      rowSelection: null,
      frameworkComponents: null,
      visible:false,
      left:0,
      top:0,
      selectionStart:0,
      selectionEnd:0,
      templateParamers: [],
      boolTransfer: [
        {key: this.$t('mc.templateParamerModule.yes'), value: 1},
        {key: this.$t('mc.templateParamerModule.no'), value: 0}
      ],
      /** 频道订阅者情况数组 */
      channelSubscribers: [],
      subscribeTitle: '',
      choiceAll: this.$t('action.choiceAll')
    }
  },
  computed: {
    tableHeight() {
      return this.mainAreaHeight - 130
    }

  },
  beforeMount() {
    this.gridOptions = {}
    this.columnDefs = [
      {
        headerName: '#',
        headerCheckboxSelection: true,
        headerCheckboxSelectionFilteredOnly: true,
        checkboxSelection: true,
        sortable: false, filter: false,
        width: 100,
        resizable: false,
        valueGetter: this.hashValueGetter
      },
      {headerName: 'ID', field: 'id', sortable: true, filter: 'agNumberColumnFilter', width: 130},
      {
        headerName: this.$t('mc.messageTemplateModule.templateTitle'),
        field: 'template_title',
        filter: 'agNumberColumnFilter',
        sortable: true,
        flex: 1
      },
      {
        headerName: this.$t('mc.messageTemplateModule.templateContent'),
        field: 'template_content',
        sortable: true,
        filter: 'agTextColumnFilter',
        flex: 1

      },
      {
        headerName: this.$t('mc.messageTemplateModule.boolShared'),
        field: 'bool_shared',
        sortable: true,
        filterFramework: 'RadioFilter',
        filterParams: {
          listData: this.boolTransfer
        },
        width: 150,
        cellRenderer: this.booleanFormatter
      },
      {
        headerName: this.$t('boardTitle.partId'), field: 'part_id', sortable: true, filter: 'agNumberColumnFilter', flex: 1
      },
      // lockPosition 锁定位置，会在第一列
      // lockPinned = true 不能拖动然后固定
      // resizeable 单元个大小是否可以调整

      {
        headerName: this.$t('action.handle'), field: 'id',
        cellRendererFramework: 'ButtonCellRenderList',
        cellRendererParams: param => {
          // console.log(param,Number(this.$store.getters.partId))
          return {
            list: [
              {
                onClick: this.handleEdit,
                label: this.$t('action.edit'),
                buttonType: 'primary',
                buttonSize: 'mini'
              },

              {
                onClick: this.deleteSingle,
                label: this.$t('action.delete'),
                buttonType: 'danger',
                buttonSize: 'mini',
                disabled: param.data.part_id!==Number(this.$store.getters.partId)
              }
            ]
          }
        },
        filter: false,
        pinned: 'right',
        lockPinned: true,
        minWidth: this.$i18n.locale === 'zh' ? 310 : 350,
        resizable: false,
        sortable: false
      }
    ]
    this.defaultColDef = {
      sortable: true,
      resizable: true,
      comparator: this.dateCustomComparator,
      filterParams: {
        debounceMs: 200,
        newRowsAction: 'keep',
        textCustomComparator: this.textCustomComparator,
        comparator: this.dateCustomComparator
      }
    }
    this.rowSelection = 'multiple'
  },
 async mounted() {
    window.onresize = this.windowResize
    this.templateParamers= await API_TemplateParamer.getAll()
    this.gridApi = this.gridOptions.api
    this.gridColumnApi = this.gridOptions.columnApi
    // 设置默认排序字段，应用列状态之后会触发 gridSortChange 函数，会调用getlist，后面不需要再调用this.getlist
    this.gridColumnApi.applyColumnState({
      state: [
        {
          colId: 'id',
          sort: 'asc'
        }
      ]
    })
  },
  methods: {
    windowResize() {
      this.$set(this, 'mainAreaHeight', Number(document.documentElement.clientHeight) - 84)
    },
    openMenu(e) {
      // console.log(e)
      const menuMinWidth = 105
      const offsetLeft = e.target.offsetWidth // container margin left
      const offsetWidth = this.$el.offsetWidth // container width
      const maxLeft = offsetWidth - menuMinWidth // left boundary
      const left = e.x  // 15: margin right
       this.left=left
      // if (left > maxLeft) {
      //   this.left = maxLeft
      // } else {
      //   this.left = left
      // }

      this.top = e.y+10
      this.visible = true
    },
    recordCursorPosition(e) {
      this.selectionStart = e.srcElement.selectionStart
      this.selectionEnd = e.srcElement.selectionEnd
    },
    insertAtCursor(item) {

      var val = this.formmodel.template_content;
      var start = this.selectionStart;
      var end = this.selectionEnd;
      // console.log('start',start,end)
      const text='${'+item.param_name+'}'
      this.formmodel.template_content = val.substring(0, start) + text + val.substring(end);
      this.$refs.template_content.selectionStart = this.$refs.template_content.selectionEnd = start + text.length;
      this.closeMenu()
    },
    closeMenu() {
       this.visible = false
    },

    handlerDelete(ids) {
      this.$confirm(this.$t('action.sureDelete'), this.$t('action.waring'), {
        confirmButtonText: this.$t('action.yes'),
        cancelButtonText: this.$t('action.cancel'),
        type: 'warning'
      }).then(() => {
        API_MessageTemplate.remove(ids).then(
            response => {
              this.getList()
              this.$message({
                type: 'success',
                message: this.$t('action.deleted')
              })
            }
        ).catch(response => {
          this.$message({
            type: 'info',
            message: response.message
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: this.$t('action.cancelDelete')
        })
      })
    },
    booleanFormatter(params) {
      if (params.value === null || params.value === undefined) return ''
      else{
        return params.value ? `<span style="color:green;">${this.$t('mc.templateParamerModule.yes')}</span>` :`<span style="color:red;">${this.$t('mc.templateParamerModule.no')}</span>`
      }
    },
    deleteSingle(row) {
      this.handlerDelete(row.id)
    },
    extractParams(template) {
      const pattern = /\$\{([^}]+)\}/g;
      let match;
      const params = [];

      while ((match = pattern.exec(template))) {
        params.push(match[1]); // 添加到params数组中
      }

      return params;
    },


    /**
     * 创建 消息类型
     */
    createMessageType() {
      this.formshow = true
      this.formmodel = {
        part_id:Number(this.$store.getters.partId),
        bool_shared:false
      }
      console.log(this.formmodel)
      this.formtitle=this.$t('mc.messageTemplateModule.addMessageTemplate')
    },
    /** 分页大小发生改变 */
    handlePageSizeChange(size) {
      this.params.page_size = size
      this.getList()
    },

    /** 分页页数发生改变 */
    handlePageCurrentChange(page) {
      this.params.page_no = page
      this.getList()
    },
    /** 加载列表数据 */
    getList() {
      this.loading = true
      const param = this.MixinClone(this.params)
      this.gridApi.showLoadingOverlay()
      API_MessageTemplate.getList(param).then(response => {
        this.loading = false
        // this.tableData = [...response.data]
        this.pageData = {
          page_no: response.page_no,
          page_size: response.page_size,
          data_total: response.data_total
        }
        this.$nextTick(() => {
          const node = this.gridApi.getDisplayedRowAtIndex(0)
          if (node !== null && node !== undefined) {
            node.setSelected(true)
          }
        })
        this.rowData = [...response.data]
        this.refreshPlayStatus()
      }).catch(() => {
        this.loading = false
      })
    },
    /** 处理搜索 */
    handlerSearch(keywords) {
      this.params.query = keywords
      this.getList()
    },
    /** 处理字段排序 */
    tableSort(column) {
      if (column.order !== null) {
        this.params.sort = column.prop
        this.params.dir = column.order === 'ascending' ? 'asc' : 'desc'
      } else {
        this.params.sort = null
        this.params.dir = null
      }
      this.getList()
    },
    /**
     * 格式化unix时间戳
     **/
    unixDateFormatter(param) {
      if (!param.value) return ''
      return unix2Date(param.value * 1000)
    },

    gridSortChange(param) {
      const columnState = param.columnApi.getColumnState()
      // 排序状态
      const sortState = columnState.filter(function (s) {
        return s.sort != null
      }).map(function (s) {
        return {
          colId: s.colId,
          sort: s.sort,
          sortIndex: s.sortIndex
        }
      }).sort(function (a, b) {
        return a.sortIndex - b.sortIndex
      })
      if (sortState.length > 0) {
        if (sortState.length === 1) {
          this.params.sort = sortState[0].colId
          this.params.dir = sortState[0].sort
        } else {
          let sortstring = ''
          sortState.forEach(function (item) {
            sortstring += item.colId + ' ' + item.sort + ','
          })
          this.params.sort = sortstring.substring(0, sortstring.length - 1)
          this.params.dir = ' '
        }
      } else {
        delete this.params.sort
        delete this.params.dir
      }
      this.getList()
    },

    filterModifed(param) { // todo 通过转换后的数值过滤，需要转回原始数值
      var model = param.api.getFilterModel()
      this.params.filter = JSON.stringify(model)
      this.getList()
    },

    handleEdit(row) {
      this.formtitle = this.$t('mc.messageTemplateModule.editMessageTemplate')
      this.formmodel = {
        ...row
      }
      this.formshow = true
    },
    validateContent(rule, value, callback) {
      // 自定义校验规则
      const paramers = this.extractParams(value)
      const _this=this
      if(paramers.length>0){
         paramers.forEach(item=>{
           if(!this.templateParamers.find(i=>i.param_name===item)){
             callback(new Error(_this.$t('mc.messageTemplateModule.templateContentError',[item])))
           }
         })
        callback()
      }else{
        callback()
      }

    },
    /**
     * 提交新增表单
     * @param formname
     */
    handlerFormSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (!this.formmodel.id) {
            /** 新增 */
            this.formmodel.part_id = this.$store.getters.partId

            API_MessageTemplate.add(this.formmodel).then(() => {
              this.formshow = false
              this.$message.success(this.$t('action.addSuccess'))
              this.getList()
            })
          } else {
            API_MessageTemplate.update(this.formmodel.id, this.formmodel).then(() => {
              this.formshow = false
              this.$message.success(this.$t('action.editSuccess'))
              this.getList()
            })
          }
        } else {
          this.$message.error(this.$t('action.fromError'))
        }
      })
    },


  }

}
</script>




<style scoped>
.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.contextmenu {
  margin: 0;
  background: #fff;
  z-index: 3000;
  position: fixed;
  list-style-type: none;
  padding: 5px 0;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 400;
  color: #333;
  box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
  li {
    margin: 0;
    padding: 7px 16px;
    cursor: pointer;
    &:hover {
      background: #eee;
    }
  }
}
</style>