若依前端框架增删改查

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.rows

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