基于Vue3和C#.Net6的在线聊天室系统设计源码

<!-- * @Descripttion: (${genTable.functionName}/${genTable.tableName}) * @version: (1.0) * @Author: (${replaceDto.Author}) * @Date: (${replaceDto.AddTime}) * @LastEditors: (${replaceDto.Author}) * @LastEditTime: (${replaceDto.AddTime}) --> <template> <div class="app-container"> <!-- :model属性用于表单验证使用 比如下面的el-form-item 的 prop属性用于对表单值进行验证操作 --> <el-form :model="queryParams" label-position="right" inline ref="queryRef" v-show="showSearch" @submit.prevent> $foreach(column in genTable.Columns) $set(labelName = "") $set(columnName = "") $set(numLabel = "") $if(column.IsQuery == true) $set(columnName = column.CsharpFieldFl) $if(column.ColumnComment != "") $set(labelName = column.ColumnComment) $else $set(labelName = column.CsharpFieldFl) $end $if(column.CsharpType == "int" || column.CsharpType == "long") $set(numLabel = ".number") $end $if(column.HtmlType == "datetime") <el-form-item label="$labelName"> <el-date-picker v-model="dateRange${column.CsharpField}" style="width: 240px" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" placeholder="请选择$labelName" :picker-options="{ firstDayOfWeek: 1}"></el-date-picker> </el-form-item> $elseif(column.HtmlType == "select" || column.HtmlType == "radio") <el-form-item label="${labelName}" prop="${columnName}"> <el-select v-model="queryParams.${columnName}" placeholder="请选择${labelName}"> <el-option v-for="item in $if(column.DictType != "") ${column.DictType} $else ${column.CsharpFieldFl}Options$end" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue"></el-option> </el-select> </el-form-item> $else <el-form-item label="${labelName}" prop="${columnName}"> <el-input v-model${numLabel}="queryParams.${columnName}" placeholder="请输入${labelName}" /> </el-form-item> $end $end $end <el-form-item> <el-button icon="search" type="primary" @click="handleQuery">{{ ${t}t('btn.search') }}</el-button> <el-button icon="refresh" @click="resetQuery">{{ ${t}t('btn.reset') }}</el-button> </el-form-item> </el-form> <!-- 工具区域 --> <el-row :gutter="10" class="mb8"> $if(replaceDto.ShowBtnAdd) <el-col :span="1.5"> <el-button type="primary" v-hasPermi="['${replaceDto.PermissionPrefix}:add']" plain icon="plus" @click="handleAdd"> {{ ${t}t('btn.add') }} </el-button> </el-col> $end <el-col :span="1.5"> <el-button type="info" plain icon="sort" @click="toggleExpandAll">展开/折叠</el-button> </el-col> $if(replaceDto.ShowBtnDelete) <el-col :span="1.5"> <el-button type="danger" :disabled="multiple" v-hasPermi="['${replaceDto.PermissionPrefix}:delete']" plain icon="delete" @click="handleDelete"> {{ ${t}t('btn.delete') }} </el-button> </el-col> $end $if(replaceDto.ShowBtnExport) <el-col :span="1.5"> <el-button type="warning" plain icon="download" @click="handleExport" v-hasPermi="['${replaceDto.PermissionPrefix}:export']"> {{ ${t}t('btn.export') }} </el-button> </el-col> $end <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar> </el-row> <!-- 数据区域 --> <el-table v-if="refreshTable" :data="dataList" v-loading="loading" ref="tableRef" border highlight-current-row @selection-change="handleSelectionChange" :default-expand-all="isExpandAll" row-key="${tool.FirstLowerCase(genTable.Options.TreeCode)}" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" > <el-table-column type="selection" width="50" align="center"/> $foreach(column in genTable.Columns) $set(labelName = "") $set(checkboxHtml = "") $set(showToolTipHtml = "") $set(columnName = column.CsharpFieldFl) $if(column.CsharpType == "string" || column.HtmlType == "datetime") $set(showToolTipHtml = " :show-overflow-tooltip=\"true\"") $end $if(column.ColumnComment != "") $set(labelName = column.ColumnComment) $else $set(labelName = column.CsharpFieldFl) $end $if(column.IsList == true) $if(column.HtmlType == "customInput" && column.IsPk == false) <el-table-column prop="${columnName}" label="${labelName}" width="90" sortable align="center"> <template #default="scope"> <span v-show="editIndex != scope.$${index}index" @click="editCurrRow(scope.$${index}index)">{{scope.row.${columnName}}}</span> <el-input :id="scope.$${index}index" v-show="(editIndex == scope.$${index}index)" v-model="scope.row.${columnName}" @blur="handleChangeSort(scope.row)"></el-input> </template> </el-table-column> $elseif(column.HtmlType == "imageUpload") <el-table-column prop="${columnName}" label="${labelName}" align="center"> <template #default="scope"> <el-image preview-teleported :hide-on-click-modal="true" lazy class="table-td-thumb" fit="contain" :src="scope.row.${columnName}" :preview-src-list="[scope.row.${columnName}]"> <div><el-icon :size="15"><document /></el-icon></div> </el-image> </template> </el-table-column> $elseif(column.HtmlType == "checkbox" || column.HtmlType == "select" || column.HtmlType == "radio") <el-table-column prop="${columnName}" label="${labelName}" align="center"> <template #default="scope"> $if(column.HtmlType == "checkbox") <dict-tag :options="$if(column.DictType != "") ${column.DictType} $else ${column.CsharpFieldFl}Options$end" :value="scope.row.${columnName} ? scope.row.${columnName}.split(',') : []" /> $else <dict-tag :options="$if(column.DictType != "") ${column.DictType} $else ${column.CsharpFieldFl}Options$end" :value="scope.row.${columnName}" /> $end </template> </el-table-column> $else <el-table-column prop="${columnName}" label="${labelName}" align="center"${showToolTipHtml} /> $end $end $end <el-table-column label="操作" align="center" width="140"> <template #default="scope"> $if(replaceDto.ShowBtnEdit) <el-button v-hasPermi="['${replaceDto.PermissionPrefix}:edit']" type="success" icon="edit" title="编辑" @click="handleUpdate(scope.row)"></el-button> $end $if(replaceDto.ShowBtnDelete) <el-button v-hasPermi="['${replaceDto.PermissionPrefix}:delete']" type="danger" icon="delete" title="删除" @click="handleDelete(scope.row)"></el-button> $end </template> </el-table-column> </el-table> <!-- 添加或修改${genTable.functionName}对话框 --> <el-dialog :title="title" :lock-scroll="false" v-model="open" > <el-form ref="formRef" :model="form" :rules="rules" label-width="100px"> <el-row :gutter="20"> $foreach(column in genTable.Columns) $set(labelName = "") $set(labelDisabled = "") $set(columnName = column.CsharpFieldFl) $set(value = "item.dictValue") $if(column.ColumnComment != "") $set(labelName = column.ColumnComment) $else $set(labelName = column.CsharpFieldFl) $end $if(column.IsPk == true) $set(labelDisabled = ":disabled=true") $end $if(column.CsharpType == "int" || column.CsharpType == "long") $set(value = "parseInt(item.dictValue)") $end $if(column.IsInsert == false && column.IsEdit == false) <el-col :lg="12" v-if="opertype == 2"> <el-form-item label="${labelName}">{{form.${columnName}}}</el-form-item> </el-col> $elseif(tool.CheckTree(genTable ,column.CsharpField)) <el-col :lg="24"> <el-form-item label="父级id" prop="${columnName}"> <el-cascader class="w100" :options="dataList" :props="{ checkStrictly: true, value: '${treeCode}', label: '${treeName}', emitPath: false }" placehold