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>

點擊確認按鈕后：

1. 當你調用 this.$refs["form"].validate 時，它會根據 rules 中的定義，逐個驗證表單字段的輸入是否合法。
2. 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']">