1.下拉列表根据数据库加载
这个是用来查询框
绑定了 @change 事件来处理站点选择变化后的查询逻辑。
<el-form-item label="站点选择" prop="stationId" v-has-permi="['ch:m:y']"><el-select v-model="queryParams.stationId" placeholder="请选择站点"@change="handleQuery"><el-option v-for="station in stationOptions" :key="station.stationId":label="station.stationName":value="station.stationId"></el-option></el-select></el-form-item>这个是用在修改弹框中显示数据的，用于表单提交
<el-form-item label="站点"><el-select v-model="form.stationId" placeholder="请选择站点"><el-option v-for="station in stationOptions" :key="station.stationId":label="station.stationName":value="station.stationId"></el-option></el-select></el-form-item> data() {return {// 站点选项stationOptions: undefined
}
,
created() {// 站点列表,挂载的时候加载this.getStationList()},
methods: {/** 查询站点选项框 */getStationList() {listStation().then(response => {this.stationOptions = response.rowsconsole.log(this.stationOptions)})},还需要引入方法，这个是查询所有站点的表
import { listStation } from '@/api/system/station'2.多租户：
首先要在表中加入部门id和创建人id（name也行）
使用：
还是来到web端，系统管理->角色管理->更多->数据权限
3.给一个框设置权限，只有超级管理员能看到
v-has-permi="['ch:m:y']"4.查询：
查询参数要改成对应的搜索框的参数
这个列表是用来存后端返回来的数据的，一共在三个地方有
2.data中
3.查询方法中
解析代码：
这个getList是用来搜索到全部代码的
.then() 是 JavaScript 中 Promise 对象的方法，用于处理异步操作完成后的结果。当 listStaff 请求完成后，返回的 response 对象将作为参数传递给 .then() 的回调函数。
getList() {this.loading = true;//遮罩，有加载的图案listStaff(this.addDateRange(this.queryParams, this.dateRange)).then(response => {this.staffList = response.rows;this.total = response.total;this.loading = false;
}
5.新增：
表单中的参数要改
要点击新增弹窗出来首先要设open=true,打开弹窗
:visible.sync="open" 是 Vue.js 中的一个特殊绑定语法，它结合了 Vue 的 v-bind 和 .sync 修饰符，用来控制组件或元素的可见性，并同步更新状态。
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body><el-form ref="form" :model="form" :rules="rules" label-width="100px"><el-form-item label="加气员名字" prop="staffName"><el-input v-model="form.staffName" placeholder="请输入加气员名字" /></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button type="primary" @click="submitForm">确 定</el-button><el-button @click="cancel">取 消</el-button></div></el-dialog>点击确认按钮后：
- 当你调用
this.$refs["form"].validate时，它会根据rules中的定义，逐个验证表单字段的输入是否合法。 this.$modal.msgSuccess("修改成功");是一个用来显示成功消息的语句，通常出现在基于 Vue.js 或类似框架的项目中
/** 提交按钮 */submitForm: function() {this.$refs["form"].validate(valid => {if (valid) {if (this.form.staffId != undefined) {updateStaff(this.form).then(response => {this.$modal.msgSuccess("修改成功");this.open = false;this.getList();});} else {addStaff(this.form).then(response => {this.$modal.msgSuccess("新增成功");this.open = false;this.getList();});}}});},表示该插入操作将接收一个 SysStaff 类型的对象作为参数。
useGeneratedKeys 属性设置为 true 表示在执行插入操作时，MyBatis 会使用数据库自动生成的主键值。 keyProperty 属性指定插入操作后，自动生成的主键值会被设置到哪个属性中。
<!-- -->
<insert id="xx" parameterType="SysStaff" useGeneratedKeys="true" keyProperty="staffId"></insert>点击表单的取消按钮，重置这里面的东西
6.修改：
多选框选择的id值
点击表单的取消按钮，重置这里面的东西
细节：
1.必填项：
]
rules: {photoCarhead: [{ required: true, message: '请上传原车头照片', trigger: 'change' }]},2.禁止修改
readonly：用户可以选择和复制文本，但不能编辑。disabled：完全禁止用户编辑，且不允许选择文本。
3.序号列：
<!-- 序号列 --><el-table-column label="序号" width="80" align="center"><template slot-scope="scope">{{ scope.$index + 1 }}</template></el-table-column>4.必填项：
加上rules
<el-form-item label="车牌号" prop="carLicence" :rules="rules.carLicence"><el-input v-model="form.carLicence" placeholder="请输入车牌号" />
</el-form-item>在return中的rules中加上必填项
data() {return {form: {carLicence: ''},rules: {carLicence: [{ required: true, message: '车牌号为必填项', trigger: 'blur' }// ... existing validation rules ...]}}
}1. 在el-form上添加:rules="rules"。
2. 在data的return中定义rules，包含carLicence的必填验证。
3. 可能需要添加trigger和validator，但基本的required已经足够。5.给下拉列表加权限
这样只能admin能看，随便设的权限，其他人看不了
<el-form-item label="站点选择" prop="stationId" v-has-permi="['ch:m:y']">
