若依前端框架增删改查

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']">