xins
/
hwmom-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改表单构建

Browse Source
master
夜笙歌 1 month ago
parent d29340b968
commit a99abb089c
5 changed files with 103 additions and 30 deletions
Show Stats Download Patch File Download Diff File

82
src/views/system/user/index.vue
Unescape Escape View File

@ -20,20 +20,24 @@
</el-card>
</el-col>
<el-col :lg="20" :xs="24">
<transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
<transition :enter-active-class="proxy?.animate.searchAnimate.enter"
:leave-active-class="proxy?.animate.searchAnimate.leave">
<div v-show="showSearch" class="mb-[10px]">
<el-card shadow="hover">
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
<el-form-item label="用户名称" prop="userName">
<el-input v-model="queryParams.userName" placeholder="请输入用户名称" clearable @keyup.enter="handleQuery" />
<el-input v-model="queryParams.userName" placeholder="请输入用户名称" clearable
@keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="手机号码" prop="phonenumber">
<el-input v-model="queryParams.phonenumber" placeholder="请输入手机号码" clearable @keyup.enter="handleQuery" />
<el-input v-model="queryParams.phonenumber" placeholder="请输入手机号码" clearable
@keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="状态" prop="status">
<el-select v-model="queryParams.status" placeholder="用户状态" clearable>
<el-option v-for="dict in sys_normal_disable" :key="dict.value" :label="dict.label" :value="dict.value" />
<el-option v-for="dict in sys_normal_disable" :key="dict.value" :label="dict.label"
:value="dict.value" />
</el-select>
</el-form-item>
<el-form-item label="创建时间" style="width: 308px">
@ -60,15 +64,19 @@
<template #header>
<el-row :gutter="10">
<el-col :span="1.5">
<el-button v-has-permi="['system:user:add']" type="primary" plain icon="Plus" @click="handleAdd()">新增</el-button>
<el-button v-has-permi="['system:user:add']" type="primary" plain icon="Plus" @click="handleAdd()">
新增
</el-button>
</el-col>
<el-col :span="1.5">
<el-button v-has-permi="['system:user:add']" type="success" plain :disabled="single" icon="Edit" @click="handleUpdate()">
<el-button v-has-permi="['system:user:add']" type="success" plain :disabled="single" icon="Edit"
@click="handleUpdate()">
修改
</el-button>
</el-col>
<el-col :span="1.5">
<el-button v-has-permi="['system:user:delete']" type="danger" plain :disabled="multiple" icon="Delete" @click="handleDelete()">
<el-button v-has-permi="['system:user:delete']" type="danger" plain :disabled="multiple" icon="Delete"
@click="handleDelete()">
删除
</el-button>
</el-col>
@ -76,8 +84,11 @@
<el-dropdown class="mt-[1px]">
<el-button plain type="info">
更多
<el-icon class="el-icon--right"><arrow-down /></el-icon
></el-button>
<el-icon class="el-icon--right">
<arrow-down />
</el-icon
>
</el-button>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item icon="Download" @click="importTemplate">下载模板</el-dropdown-item>
@ -87,20 +98,26 @@
</template>
</el-dropdown>
</el-col>
<right-toolbar v-model:showSearch="showSearch" :columns="columns" :search="true" @query-table="getList"></right-toolbar>
<right-toolbar v-model:showSearch="showSearch" :columns="columns" :search="true"
@query-table="getList"></right-toolbar>
</el-row>
</template>
<el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="50" align="center" />
<el-table-column v-if="columns[0].visible" key="userId" label="用户编号" align="center" prop="userId" />
<el-table-column v-if="columns[1].visible" key="userName" label="用户名称" align="center" prop="userName" :show-overflow-tooltip="true" />
<el-table-column v-if="columns[2].visible" key="nickName" label="用户昵称" align="center" prop="nickName" :show-overflow-tooltip="true" />
<el-table-column v-if="columns[3].visible" key="deptName" label="部门" align="center" prop="deptName" :show-overflow-tooltip="true" />
<el-table-column v-if="columns[4].visible" key="phonenumber" label="手机号码" align="center" prop="phonenumber" width="120" />
<el-table-column v-if="columns[1].visible" key="userName" label="用户名称" align="center" prop="userName"
:show-overflow-tooltip="true" />
<el-table-column v-if="columns[2].visible" key="nickName" label="用户昵称" align="center" prop="nickName"
:show-overflow-tooltip="true" />
<el-table-column v-if="columns[3].visible" key="deptName" label="部门" align="center" prop="deptName"
:show-overflow-tooltip="true" />
<el-table-column v-if="columns[4].visible" key="phonenumber" label="手机号码" align="center"
prop="phonenumber" width="120" />
<el-table-column v-if="columns[5].visible" key="status" label="状态" align="center">
<template #default="scope">
<el-switch v-model="scope.row.status" active-value="0" inactive-value="1" @change="handleStatusChange(scope.row)"></el-switch>
<el-switch v-model="scope.row.status" active-value="0" inactive-value="1"
@change="handleStatusChange(scope.row)"></el-switch>
</template>
</el-table-column>
@ -113,18 +130,22 @@
<el-table-column label="操作" fixed="right" width="180" class-name="small-padding fixed-width">
<template #default="scope">
<el-tooltip v-if="scope.row.userId !== 1" content="修改" placement="top">
<el-button v-hasPermi="['system:user:edit']" link type="primary" icon="Edit" @click="handleUpdate(scope.row)"></el-button>
<el-button v-hasPermi="['system:user:edit']" link type="primary" icon="Edit"
@click="handleUpdate(scope.row)"></el-button>
</el-tooltip>
<el-tooltip v-if="scope.row.userId !== 1" content="删除" placement="top">
<el-button v-hasPermi="['system:user:remove']" link type="primary" icon="Delete" @click="handleDelete(scope.row)"></el-button>
<el-button v-hasPermi="['system:user:remove']" link type="primary" icon="Delete"
@click="handleDelete(scope.row)"></el-button>
</el-tooltip>
<el-tooltip v-if="scope.row.userId !== 1" content="重置密码" placement="top">
<el-button v-hasPermi="['system:user:resetPwd']" link type="primary" icon="Key" @click="handleResetPwd(scope.row)"></el-button>
<el-button v-hasPermi="['system:user:resetPwd']" link type="primary" icon="Key"
@click="handleResetPwd(scope.row)"></el-button>
</el-tooltip>
<el-tooltip v-if="scope.row.userId !== 1" content="分配角色" placement="top">
<el-button v-hasPermi="['system:user:edit']" link type="primary" icon="CircleCheck" @click="handleAuthRole(scope.row)"></el-button>
<el-button v-hasPermi="['system:user:edit']" link type="primary" icon="CircleCheck"
@click="handleAuthRole(scope.row)"></el-button>
</el-tooltip>
</template>
</el-table-column>
@ -142,7 +163,8 @@
</el-row>
<!-- 添加或修改用户配置对话框 -->
<el-dialog ref="formDialogRef" v-model="dialog.visible" :title="dialog.title" width="600px" append-to-body @close="closeDialog">
<el-dialog ref="formDialogRef" v-model="dialog.visible" :title="dialog.title" width="600px" append-to-body
@close="closeDialog">
<el-form ref="userFormRef" :model="form" :rules="rules" label-width="80px">
<el-row>
<el-col :span="12">
@ -184,7 +206,8 @@
</el-col>
<el-col :span="12">
<el-form-item v-if="form.userId == undefined" label="用户密码" prop="password">
<el-input v-model="form.password" placeholder="请输入用户密码" type="password" maxlength="20" show-password />
<el-input v-model="form.password" placeholder="请输入用户密码" type="password" maxlength="20"
show-password />
</el-form-item>
</el-col>
</el-row>
@ -192,14 +215,16 @@
<el-col :span="12">
<el-form-item label="用户性别">
<el-select v-model="form.sex" placeholder="请选择">
<el-option v-for="dict in sys_user_sex" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
<el-option v-for="dict in sys_user_sex" :key="dict.value" :label="dict.label"
:value="dict.value"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="状态">
<el-radio-group v-model="form.status">
<el-radio v-for="dict in sys_normal_disable" :key="dict.value" :value="dict.value">{{ dict.label }}</el-radio>
<el-radio v-for="dict in sys_normal_disable" :key="dict.value" :value="dict.value">{{ dict.label }}
</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
@ -268,9 +293,14 @@
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
<template #tip>
<div class="text-center el-upload__tip">
<div class="el-upload__tip"><el-checkbox v-model="upload.updateSupport" />是否更新已经存在的用户数据</div>
<div class="el-upload__tip">
<el-checkbox v-model="upload.updateSupport" />
是否更新已经存在的用户数据
</div>
<span>仅允许导入xls、xlsx格式文件。</span>
<el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline" @click="importTemplate">下载模板</el-link>
<el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline"
@click="importTemplate">下载模板
</el-link>
</div>
</template>
</el-upload>
@ -553,7 +583,7 @@ const handleFileSuccess = (response: any, file: UploadFile) => {
upload.open = false;
upload.isUploading = false;
uploadRef.value?.handleRemove(file);
ElMessageBox.alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + '</div>', '导入结果', {
ElMessageBox.alert('<div style=\'overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;\'>' + response.msg + '</div>', '导入结果', {
dangerouslyUseHTMLString: true
});
getList();

10
src/views/tool/draggable/exportConfig/form.js
Unescape Escape View File

@ -1,5 +1,5 @@
import {
addVariables
addVariables, addFunction
} from './script.js';
import {
@ -31,7 +31,7 @@ const getFormCode = (data) => {
addCode(`<div> `);
}
tier.push(formData.options.key || ('form-' + formData.options.uuid));
// code += `<el-form :model="pageForm['${formData.options.key || ('form-' + formData.options.uuid)}']" label-width="${formData.options.labelWidth}" >`;
// code+ = `<el-form :model="pageForm['${formData.options.key || ('form-' + formData.options.uuid)}']" label-width="${formData.options.labelWidth}" >`;
addCode(`<el-form :model="pageForm['${formData.options.key || ('form-' + formData.options.uuid)}']" label-width="${formData.options.labelWidth}" >`);
formData.tasks.forEach(task => {
@ -50,9 +50,13 @@ const getFormCode = (data) => {
// code += `</el-form>`;
addCode(` <el-form-item>
<el-button type="primary" >${formData.options.submitBottomName}</el-button>
<el-button type="primary" @click="${(formData.options.key || ('form_' + formData.options.uuid))}Submit">${formData.options.submitBottomName}</el-button>
<el-button>${formData.options.resetBottomName}</el-button>
</el-form-item>`);
addFunction(`
const ${formData.options.key || ('form_' + formData.options.uuid)}Submit = (formData, formDataOperation, localData))=>{
${formData.options.submitFunction}}
`);
addCode(`</el-form>`);
if (isForm) {
// code += `</el-form-item>`;

2
src/views/tool/draggable/exportConfig/script.js
Unescape Escape View File

@ -5,6 +5,8 @@ let functionData = ``;
const scriptCombined = () => {
return `
${start}
import request from '@/utils/request';
const formDataOperation = ref({})
${getVariablesData()}
${functionData}
${end}

36
src/views/tool/draggable/exportConfig/table.js
Unescape Escape View File

@ -0,0 +1,36 @@
import { addCode, templateCombined, resetTemplate } from './template.js';
import { getInputCode } from './input.js';
import { getFormCode } from './form.js';
import { scriptCombined, resetScript } from './script.js';
import Download from '@/plugins/download';
const reset = () => {
resetScript();
resetTemplate();
};
const elementEnum = {
'hw-input': getInputCode, 'hw-form': getFormCode
};
const exportConfig = (e) => {
reset();
const noFun = () => {
};
e.map(v => {
(elementEnum[v.type] || noFun)({
isForm: false, elementData: v, formData: {}
});
});
let template = templateCombined();
let script = scriptCombined();
let codeStr = template + script;
console.log(codeStr);
const blob = new Blob([codeStr], { type: 'text/plain;charset=utf-8' });
// Download.saveAs(blob, Date.now() + '.vue');
};
export {
exportConfig
};

3
src/views/tool/draggable/index.vue
Unescape Escape View File

@ -79,6 +79,7 @@ interface type {
id: number
}
const optionsData = ref({});
const getOptions = (e) => {
optionsData.value = e;
@ -211,7 +212,7 @@ const isDrag = ref(false);
const onClone = (e) => {
let item = JSON.parse(JSON.stringify(e));
item.id = Date.now();
item.options.uuid = getUuid();
item.options.uuid = getUuid().replaceAll('-', '_');
return item;
};
const onStartLeft = (e) => {

Write Preview
Loading…
Cancel
Save