|
|
@@ -6,18 +6,16 @@
|
|
|
:model="queryParams"
|
|
|
label-width="140px"
|
|
|
label-position="left">
|
|
|
- <el-form-item label="発注検索">
|
|
|
- </el-form-item>
|
|
|
<el-form-item label="年月選択" prop="monthYear">
|
|
|
<el-select v-model="queryParams.monthYear" class="small-input">
|
|
|
<el-option v-for="option in timeOptions" :key="option.value" :label="option.label" :value="option.value" />
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="輸送パートナーID">
|
|
|
- <el-input v-model="queryParams.partnerCode" class="small-input"></el-input>
|
|
|
+ <el-input v-model="queryParams.partnerCode" class="small-input" :maxlength="10"></el-input>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="発注ID">
|
|
|
- <el-input v-model="queryParams.orderId" class="small-input"></el-input>
|
|
|
+ <el-input v-model="queryParams.orderId" class="small-input" :maxlength="64"></el-input>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="区間種別">
|
|
|
<el-checkbox-group v-model="queryParams.sectionType">
|
|
|
@@ -52,143 +50,92 @@
|
|
|
<el-table v-show="initLoadingCompleted" v-loading="listLoading"
|
|
|
:border="true"
|
|
|
:data="certificationItemList">
|
|
|
-<el-table-column align="left"
|
|
|
+ <el-table-column :align="left"
|
|
|
header-align="center"
|
|
|
label="エリア"
|
|
|
min-width="80"
|
|
|
prop="areaText">
|
|
|
- </el-table-column>
|
|
|
+ </el-table-column>
|
|
|
|
|
|
- <el-table-column :show-overflow-tooltip="true"
|
|
|
- align="left"
|
|
|
+ <el-table-column :show-overflow-tooltip="true"
|
|
|
+ :align="left"
|
|
|
header-align="center"
|
|
|
label="輸送パートナー名"
|
|
|
min-width="40"
|
|
|
prop="partnerName"/>
|
|
|
- <el-table-column label="発注ID" min-width="100">
|
|
|
- <template #default="scope">
|
|
|
- <el-button
|
|
|
- type="text"
|
|
|
- icon="el-icon-info"
|
|
|
- class="custom-btn"
|
|
|
- @click="handleViewDetail(scope.row)"
|
|
|
- >
|
|
|
- {{ scope.row.orderId }}
|
|
|
- </el-button>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
+ <el-table-column label="発注ID" min-width="100">
|
|
|
+ <template #default="scope">
|
|
|
+ <el-button
|
|
|
+ type="text"
|
|
|
+ icon="el-icon-info"
|
|
|
+ class="custom-btn"
|
|
|
+ @click="handleViewDetail(scope.row)"
|
|
|
+ >
|
|
|
+ {{ scope.row.orderId }}
|
|
|
+ </el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
|
|
|
- <el-table-column align="left"
|
|
|
+ <el-table-column :align="left"
|
|
|
header-align="center"
|
|
|
label="区間種別"
|
|
|
min-width="80"
|
|
|
prop="sectionTypeText">
|
|
|
- </el-table-column>
|
|
|
+ </el-table-column>
|
|
|
|
|
|
- <el-table-column :show-overflow-tooltip="true"
|
|
|
- align="left"
|
|
|
+ <el-table-column :show-overflow-tooltip="true"
|
|
|
+ :align="left"
|
|
|
header-align="center"
|
|
|
label="ステータス"
|
|
|
min-width="40"
|
|
|
prop="statusText"/>
|
|
|
|
|
|
- <el-table-column :show-overflow-tooltip="true"
|
|
|
+ <el-table-column :show-overflow-tooltip="true"
|
|
|
align="left"
|
|
|
header-align="center"
|
|
|
label="version"
|
|
|
min-width="40"
|
|
|
prop="version">
|
|
|
- </el-table-column>
|
|
|
+ </el-table-column>
|
|
|
|
|
|
- <el-table-column :show-overflow-tooltip="true"
|
|
|
- align="left"
|
|
|
+ <el-table-column :show-overflow-tooltip="true"
|
|
|
+ :align="left"
|
|
|
header-align="center"
|
|
|
label="指示書送付"
|
|
|
min-width="40"
|
|
|
prop="instructionDeliveryDate"
|
|
|
:formatter="formatDate"/>
|
|
|
|
|
|
- <el-table-column :show-overflow-tooltip="true"
|
|
|
- align="left"
|
|
|
+ <el-table-column :show-overflow-tooltip="true"
|
|
|
+ :align="left"
|
|
|
header-align="center"
|
|
|
label="承諾"
|
|
|
min-width="40"
|
|
|
prop="commitDate"
|
|
|
:formatter="formatDate"/>
|
|
|
-</el-table>
|
|
|
+ </el-table>
|
|
|
|
|
|
-<pagination v-show="listTotalCnt>0"
|
|
|
+ <pagination v-show="listTotalCnt>0"
|
|
|
v-model:limit="queryParams.pageSize"
|
|
|
v-model:page="queryParams.pageNum"
|
|
|
:total="listTotalCnt"
|
|
|
@pagination="getSearchList"/>
|
|
|
-
|
|
|
- <el-dialog v-model="open"
|
|
|
- :close-on-click-modal="false"
|
|
|
- class="eikin-dialog-edit"
|
|
|
- :title="title"
|
|
|
- append-to-body
|
|
|
- width="850px">
|
|
|
- <el-form-item>
|
|
|
- <template #label>
|
|
|
- <span style="font-weight: bold;">営業所情報詳細</span>
|
|
|
- </template>
|
|
|
- </el-form-item>
|
|
|
- <el-form ref="certificationItemRef"
|
|
|
- :model="form"
|
|
|
- label-position="left"
|
|
|
- label-width="120px">
|
|
|
- <el-form-item label="営業所ID" prop="businessOfficeId">
|
|
|
- <el-input v-model="form.businessOfficeId"/>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="営業所名" prop="businessName">
|
|
|
- <el-input v-model="form.businessName"/>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="エリア" prop="area">
|
|
|
- <el-select v-model="form.area">
|
|
|
- <el-option v-for="option in reasonOptions" :key="option.value" :label="option.label" :value="option.value" />
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="種別">
|
|
|
- <el-checkbox-group v-model="form.type">
|
|
|
- <el-checkbox label="ロベス" class="circle-checkbox">ロベス</el-checkbox>
|
|
|
- <el-checkbox label="ロケートベス" class="circle-checkbox">ロケートベス</el-checkbox>
|
|
|
- <el-checkbox label="営業所" class="circle-checkbox">営業所</el-checkbox>
|
|
|
- </el-checkbox-group>
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
- <template #footer>
|
|
|
- <div class="dialog-footer-button">
|
|
|
- <div>
|
|
|
- <el-button @click="cancel">キャンセル</el-button>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <el-button class="save-button6">保存</el-button>
|
|
|
- <el-button class="delete-button">削除</el-button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script name="OrderList" setup>
|
|
|
|
|
|
-import { listOrder, getOrder, delOrder, addOrder, updateOrder } from "@/api/bbib/order"
|
|
|
-import {computed} from 'vue';
|
|
|
-import {isEmpty} from "@/utils/validate"
|
|
|
-import {formatMsg,parseOneToTen,parseNoBlankInput,parseInteger64} from "@/utils/yamato";
|
|
|
-import {delay} from "@/utils/index.js";
|
|
|
-import {encryptField} from "@/utils/encrypt.js";
|
|
|
+import { listOrder} from "@/api/bbib/order"
|
|
|
import { useRouter } from 'vue-router'
|
|
|
|
|
|
-const {proxy} = getCurrentInstance();
|
|
|
-const submitFormLoading = ref(false);
|
|
|
-const updateBatchOrderNoLoading = ref(false);
|
|
|
-const multiSubmitFormLoading = ref(false);
|
|
|
+// ルーターインスタンスを取得
|
|
|
const router = useRouter();
|
|
|
+// 年月選択のオプションリストを格納するリアクティブ変数
|
|
|
const timeOptions = ref([]);
|
|
|
|
|
|
+/**
|
|
|
+ * 発注詳細画面に遷移するハンドラー
|
|
|
+ */
|
|
|
const handleViewDetail = (row) => {
|
|
|
router.push({
|
|
|
name: 'OrderDetail',
|
|
|
@@ -196,12 +143,15 @@ const handleViewDetail = (row) => {
|
|
|
})
|
|
|
}
|
|
|
|
|
|
-// 生成年月选项的函数
|
|
|
+/**
|
|
|
+ * 年月選択のオプションを生成する関数
|
|
|
+ * 現在の月を基準に過去12ヶ月から未来12ヶ月までのオプションを生成する
|
|
|
+ */
|
|
|
const generateTimeOptions = () => {
|
|
|
const currentDate = new Date();
|
|
|
const result = [];
|
|
|
|
|
|
- // 生成前12个月到后12个月的选项
|
|
|
+ // 過去12ヶ月から未来12ヶ月までのオプションを生成
|
|
|
for (let i = -12; i <= 12; i++) {
|
|
|
const date = new Date(currentDate.getFullYear(), currentDate.getMonth() + i, 1);
|
|
|
const year = date.getFullYear();
|
|
|
@@ -216,54 +166,44 @@ const generateTimeOptions = () => {
|
|
|
return result;
|
|
|
};
|
|
|
|
|
|
+/**
|
|
|
+ * コンポーネントのマウント後に実行されるライフサイクルフック
|
|
|
+ * 年月オプションの初期化と現在年月の設定を行う
|
|
|
+ */
|
|
|
onMounted(() => {
|
|
|
timeOptions.value = generateTimeOptions();
|
|
|
+ // デフォルトで現在の年月を選択状態にする
|
|
|
+ const now = new Date();
|
|
|
+ const currentMonthYear = `${now.getFullYear()}${String(now.getMonth() + 1).padStart(2, '0')}`;
|
|
|
+ queryParams.value.monthYear = currentMonthYear;
|
|
|
|
|
|
});
|
|
|
|
|
|
-// 辞書データを取得
|
|
|
-const {char_type, is_input, key_word} = proxy.useDict('char_type', 'is_input', 'key_word');
|
|
|
-// 認証項目テーブルリスト
|
|
|
+// 認証項目のテーブルデータを格納するリアクティブ変数
|
|
|
const certificationItemList = ref([]);
|
|
|
|
|
|
-const addButton = () => {
|
|
|
- open.value = true;
|
|
|
- title.value = "営業所マスタ管理";
|
|
|
- formReset();
|
|
|
-};
|
|
|
-
|
|
|
+/**
|
|
|
+ * 日付フォーマッター関数
|
|
|
+ * ハイフン区切りの日付をスラッシュ区切りに変換する
|
|
|
+ */
|
|
|
const formatDate = (row, column, cellValue) => {
|
|
|
if (!cellValue) return '';
|
|
|
return cellValue.replace(/-/g, '/');
|
|
|
};
|
|
|
|
|
|
-
|
|
|
-//営業所検索
|
|
|
-const officeSearchList = ref([]);
|
|
|
-
|
|
|
-// 認証項目Dialog定数
|
|
|
-const open = ref(false);
|
|
|
+// データ読み込み中のローディング状態を管理するリアクティブ変数
|
|
|
const listLoading = ref(false);
|
|
|
-const title = ref("");
|
|
|
+// 検索結果の総件数を格納するリアクティブ変数
|
|
|
const listTotalCnt = ref(0);
|
|
|
-
|
|
|
-// 検定種類のコンボボックス値
|
|
|
-const certificationTypeOptions = ref([]);
|
|
|
-
|
|
|
+// 初期ロードが完了したかどうかを示すリアクティブ変数
|
|
|
const initLoadingCompleted = ref(false);
|
|
|
-const editMode = ref(false); // 編集不可
|
|
|
-const orderNoEditDisabled = ref(true);
|
|
|
-const orderNoSaveDisabled = ref(true);
|
|
|
-const shiftFlag = ref(0);
|
|
|
-const preCertificationType = ref("");// 検定種類変更前の値
|
|
|
-const addButtonDisabled = ref(false);// 初期化時、検定種類が0件の場合、使用不可(true)
|
|
|
-const maxOrderDisabled = ref(false); // 並び順が10件を超える場合、使用不可(true)
|
|
|
-const keyWordDisabled = ref(false); // キーワードが010の場合、使用不可(true)
|
|
|
-const hasAttachInfo = ref(false); // 成績情報に紐付けされているかどうか
|
|
|
|
|
|
+/**
|
|
|
+ * コンポーネントの状態を管理するリアクティブオブジェクト
|
|
|
+ */
|
|
|
const data = reactive({
|
|
|
form: {},
|
|
|
- // 検索条件
|
|
|
+ // 検索条件を格納するオブジェクト
|
|
|
queryParams: {
|
|
|
pageNum: 1,
|
|
|
pageSize: 100,
|
|
|
@@ -273,18 +213,12 @@ const data = reactive({
|
|
|
},
|
|
|
});
|
|
|
|
|
|
+// リアクティブオブジェクトからプロパティを参照可能なオブジェクトに変換
|
|
|
const {queryParams, queryParamsRules, form, rules} = toRefs(data);
|
|
|
-/**
|
|
|
- * キャンセルボタン
|
|
|
- */
|
|
|
-function cancel() {
|
|
|
- open.value = false;
|
|
|
- // フォームのクリア
|
|
|
- formReset();
|
|
|
-}
|
|
|
|
|
|
/**
|
|
|
- * フォームのクリア
|
|
|
+ * フォーム内容をリセットする関数
|
|
|
+ * フォームの各項目を初期値に戻す
|
|
|
*/
|
|
|
function formReset() {
|
|
|
form.value = {
|
|
|
@@ -303,17 +237,13 @@ function formReset() {
|
|
|
businessOfficeId: null,
|
|
|
businessName: null,
|
|
|
area: null,
|
|
|
- // createBy: null,
|
|
|
- // createTime: null,
|
|
|
- // updateBy: null,
|
|
|
- // updateTime: null,
|
|
|
topVersion: null
|
|
|
};
|
|
|
- proxy.resetForm("certificationItemRef");
|
|
|
}
|
|
|
|
|
|
/**
|
|
|
- * 検索ボタンアクション
|
|
|
+ * 検索ボタンのクリックイベントハンドラー
|
|
|
+ * 検索条件を初期ページに設定して検索を実行する
|
|
|
*/
|
|
|
function handleQuery() {
|
|
|
queryParams.value.pageNum = 1;
|
|
|
@@ -321,7 +251,8 @@ function handleQuery() {
|
|
|
}
|
|
|
|
|
|
/**
|
|
|
- * 検定種類マスタリストを取得
|
|
|
+ * 発注リストを検索する関数
|
|
|
+ * APIを呼び出して検索条件に一致する発注データを取得する
|
|
|
*/
|
|
|
function getSearchList() {
|
|
|
listLoading.value = true;
|
|
|
@@ -342,17 +273,11 @@ function getSearchList() {
|
|
|
initLoadingCompleted.value = true;
|
|
|
});
|
|
|
}
|
|
|
+// コンポーネント初期化時に検索を実行
|
|
|
getSearchList();
|
|
|
</script>
|
|
|
|
|
|
<style>
|
|
|
-.eikin-dialog-edit {
|
|
|
- .el-form-item:not(.is-required) {
|
|
|
- .el-form-item__label {
|
|
|
- text-indent: 13px;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
|
|
|
.small-input {
|
|
|
width: 600px;
|