| | |
| | | # 页颿 é¢
|
| | | VITE_APP_TITLE = å·¥èºæ¥è¦ä¼å管çç³»ç»
|
| | | VITE_APP_TITLE = æ¿å
å管çç³»ç»
|
| | |
|
| | | # å¼åç¯å¢é
ç½®
|
| | | VITE_APP_ENV = 'development'
|
| | |
| | | # 页颿 é¢
|
| | | VITE_APP_TITLE = å·¥èºæ¥è¦ä¼å管çç³»ç»
|
| | | VITE_APP_TITLE = æ¿å
å管çç³»ç»
|
| | |
|
| | | # ç产ç¯å¢é
ç½®
|
| | | VITE_APP_ENV = 'production'
|
| | |
| | | app.config.globalProperties.addDateRange = addDateRange;
|
| | | app.config.globalProperties.selectDictLabel = selectDictLabel;
|
| | | app.config.globalProperties.selectDictLabels = selectDictLabels;
|
| | | app.config.globalProperties.javaApi = "http://10.136.12.71:8016";
|
| | | app.config.globalProperties.javaApi = "http://10.136.12.71:8018";
|
| | | app.config.globalProperties.HaveJson = (val) => {
|
| | | return JSON.parse(JSON.stringify(val));
|
| | | };
|
| ¶Ô±ÈÐÂÎļþ |
| | |
| | | <template> |
| | | <div class="app-container"> |
| | | <el-form |
| | | :model="queryParams" |
| | | ref="queryRef" |
| | | :inline="true" |
| | | v-show="showSearch" |
| | | label-width="90px" |
| | | > |
| | | <el-form-item label="èµäº§åç§°" prop="assetName"> |
| | | <el-input |
| | | v-model="queryParams.assetName" |
| | | placeholder="请è¾å
¥èµäº§åç§°" |
| | | clearable |
| | | style="width: 220px" |
| | | @keyup.enter="handleQuery" |
| | | /> |
| | | </el-form-item> |
| | | <el-form-item label="èµäº§ç¼å·" prop="assetCode"> |
| | | <el-input |
| | | v-model="queryParams.assetCode" |
| | | placeholder="请è¾å
¥èµäº§ç¼å·" |
| | | clearable |
| | | style="width: 240px" |
| | | @keyup.enter="handleQuery" |
| | | /> |
| | | </el-form-item> |
| | | <el-form-item label="æå±æ¿å
å" prop="contractorId"> |
| | | <el-select |
| | | v-model="queryParams.contractorId" |
| | | placeholder="è¯·éæ©æ¿å
å" |
| | | clearable |
| | | style="width: 240px" |
| | | > |
| | | <el-option |
| | | v-for="contractor in contractorOptions" |
| | | :key="contractor.contractorId" |
| | | :label="contractor.contractorName" |
| | | :value="contractor.contractorId" |
| | | /> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label="èµäº§ç¶æ" prop="status"> |
| | | <el-select |
| | | v-model="queryParams.status" |
| | | placeholder="èµäº§ç¶æ" |
| | | clearable |
| | | style="width: 240px" |
| | | > |
| | | <el-option |
| | | v-for="dict in asset_status" |
| | | :key="dict.value" |
| | | :label="dict.label" |
| | | :value="dict.value" |
| | | /> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item> |
| | | <el-button type="primary" icon="Search" @click="handleQuery" |
| | | >æç´¢</el-button |
| | | > |
| | | <el-button icon="Refresh" @click="resetQuery">éç½®</el-button> |
| | | </el-form-item> |
| | | </el-form> |
| | | |
| | | <el-row :gutter="10" class="mb8"> |
| | | <el-col :span="1.5"> |
| | | <el-button |
| | | type="primary" |
| | | plain |
| | | icon="Plus" |
| | | @click="handleAdd" |
| | | >æ°å¢</el-button |
| | | > |
| | | </el-col> |
| | | <el-col :span="1.5"> |
| | | <el-button |
| | | type="success" |
| | | plain |
| | | icon="Edit" |
| | | :disabled="single" |
| | | @click="handleUpdate" |
| | | >ä¿®æ¹</el-button |
| | | > |
| | | </el-col> |
| | | <el-col :span="1.5"> |
| | | <el-button |
| | | type="danger" |
| | | plain |
| | | icon="Delete" |
| | | :disabled="multiple" |
| | | @click="handleDelete" |
| | | >å é¤</el-button |
| | | > |
| | | </el-col> |
| | | <right-toolbar |
| | | v-model:showSearch="showSearch" |
| | | @queryTable="getList" |
| | | :columns="columns" |
| | | ></right-toolbar> |
| | | </el-row> |
| | | |
| | | <el-table |
| | | v-loading="loading" |
| | | :data="assetList" |
| | | @selection-change="handleSelectionChange" |
| | | stripe |
| | | > |
| | | <el-table-column type="selection" width="50" align="center" /> |
| | | <el-table-column |
| | | label="èµäº§ç¼å·" |
| | | align="center" |
| | | key="assetId" |
| | | prop="assetId" |
| | | v-if="columns[0].visible" |
| | | /> |
| | | <el-table-column |
| | | label="èµäº§åç§°" |
| | | align="center" |
| | | key="assetName" |
| | | prop="assetName" |
| | | v-if="columns[1].visible" |
| | | :show-overflow-tooltip="true" |
| | | /> |
| | | <el-table-column |
| | | label="èµäº§ç¼å·" |
| | | align="center" |
| | | key="assetCode" |
| | | prop="assetCode" |
| | | v-if="columns[2].visible" |
| | | /> |
| | | <el-table-column |
| | | label="æå±æ¿å
å" |
| | | align="center" |
| | | key="contractorName" |
| | | prop="contractorName" |
| | | v-if="columns[3].visible" |
| | | :show-overflow-tooltip="true" |
| | | /> |
| | | <el-table-column |
| | | label="èµäº§ç±»å" |
| | | align="center" |
| | | key="assetType" |
| | | prop="assetType" |
| | | v-if="columns[4].visible" |
| | | > |
| | | <template #default="scope"> |
| | | {{ getAssetTypeLabel(scope.row.assetType) }} |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column |
| | | label="èµäº§ä»·å¼" |
| | | align="center" |
| | | key="assetValue" |
| | | prop="assetValue" |
| | | v-if="columns[5].visible" |
| | | > |
| | | <template #default="scope"> |
| | | {{ scope.row.assetValue.toFixed(2) }} |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column |
| | | label="ç¶æ" |
| | | align="center" |
| | | key="status" |
| | | v-if="columns[6].visible" |
| | | > |
| | | <template #default="scope"> |
| | | <el-switch |
| | | v-model="scope.row.status" |
| | | active-value="0" |
| | | inactive-value="1" |
| | | @change="handleStatusChange(scope.row)" |
| | | ></el-switch> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column |
| | | label="å建æ¶é´" |
| | | align="center" |
| | | prop="createTime" |
| | | v-if="columns[7].visible" |
| | | width="160" |
| | | > |
| | | <template #default="scope"> |
| | | <span>{{ parseTime(scope.row.createTime) }}</span> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column |
| | | label="æä½" |
| | | align="center" |
| | | width="150" |
| | | class-name="small-padding fixed-width" |
| | | > |
| | | <template #default="scope"> |
| | | <el-tooltip |
| | | content="ä¿®æ¹" |
| | | placement="top" |
| | | > |
| | | <el-button |
| | | link |
| | | type="primary" |
| | | icon="Edit" |
| | | @click="handleUpdate(scope.row)" |
| | | ></el-button> |
| | | </el-tooltip> |
| | | <el-tooltip |
| | | content="å é¤" |
| | | placement="top" |
| | | > |
| | | <el-button |
| | | link |
| | | type="primary" |
| | | icon="Delete" |
| | | @click="handleDelete(scope.row)" |
| | | ></el-button> |
| | | </el-tooltip> |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | <pagination |
| | | v-show="total > 0" |
| | | :total="total" |
| | | v-model:page="queryParams.pageNum" |
| | | v-model:limit="queryParams.pageSize" |
| | | @pagination="getList" |
| | | /> |
| | | |
| | | <!-- æ·»å æä¿®æ¹èµäº§é
ç½®å¯¹è¯æ¡ --> |
| | | <el-dialog :title="title" v-model="open" width="600px" append-to-body> |
| | | <el-form :model="form" :rules="rules" ref="assetRef" label-width="80px"> |
| | | <el-row> |
| | | <el-col :span="12"> |
| | | <el-form-item label="èµäº§åç§°" prop="assetName"> |
| | | <el-input |
| | | v-model="form.assetName" |
| | | placeholder="请è¾å
¥èµäº§åç§°" |
| | | maxlength="50" |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="èµäº§ç¼å·" prop="assetCode"> |
| | | <el-input |
| | | v-model="form.assetCode" |
| | | placeholder="请è¾å
¥èµäº§ç¼å·" |
| | | maxlength="20" |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row> |
| | | <el-col :span="12"> |
| | | <el-form-item label="æå±æ¿å
å" prop="contractorId"> |
| | | <el-select |
| | | v-model="form.contractorId" |
| | | placeholder="è¯·éæ©æ¿å
å" |
| | | clearable |
| | | > |
| | | <el-option |
| | | v-for="contractor in contractorOptions" |
| | | :key="contractor.contractorId" |
| | | :label="contractor.contractorName" |
| | | :value="contractor.contractorId" |
| | | /> |
| | | </el-select> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="èµäº§ç±»å" prop="assetType"> |
| | | <el-select |
| | | v-model="form.assetType" |
| | | placeholder="è¯·éæ©èµäº§ç±»å" |
| | | clearable |
| | | > |
| | | <el-option |
| | | v-for="type in asset_types" |
| | | :key="type.value" |
| | | :label="type.label" |
| | | :value="type.value" |
| | | /> |
| | | </el-select> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row> |
| | | <el-col :span="12"> |
| | | <el-form-item label="èµäº§ä»·å¼" prop="assetValue"> |
| | | <el-input |
| | | v-model="form.assetValue" |
| | | placeholder="请è¾å
¥èµäº§ä»·å¼" |
| | | type="number" |
| | | step="0.01" |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="ç¶æ"> |
| | | <el-radio-group v-model="form.status"> |
| | | <el-radio |
| | | v-for="dict in sys_normal_disable" |
| | | :key="dict.value" |
| | | :value="dict.value" |
| | | >{{ dict.label }}</el-radio |
| | | > |
| | | </el-radio-group> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row> |
| | | <el-col :span="24"> |
| | | <el-form-item label="夿³¨"> |
| | | <el-input |
| | | v-model="form.remark" |
| | | type="textarea" |
| | | placeholder="请è¾å
¥å
容" |
| | | ></el-input> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | </el-form> |
| | | <template #footer> |
| | | <div class="dialog-footer"> |
| | | <el-button type="primary" @click="submitForm">ç¡® å®</el-button> |
| | | <el-button @click="cancel">å æ¶</el-button> |
| | | </div> |
| | | </template> |
| | | </el-dialog> |
| | | </div> |
| | | </template> |
| | | |
| | | <script setup name="ContractorAssets"> |
| | | import { ref, reactive, toRefs, watch, onMounted } from 'vue'; |
| | | import { ElMessage } from 'element-plus'; |
| | | import { parseTime } from '@/utils/ruoyi'; |
| | | |
| | | const assetList = ref([]); |
| | | const open = ref(false); |
| | | const loading = ref(true); |
| | | const showSearch = ref(true); |
| | | const ids = ref([]); |
| | | const single = ref(true); |
| | | const multiple = ref(true); |
| | | const total = ref(0); |
| | | const title = ref(""); |
| | | |
| | | // åæ¾éä¿¡æ¯ |
| | | const columns = ref([ |
| | | { key: 0, label: `èµäº§ç¼å·`, visible: true }, |
| | | { key: 1, label: `èµäº§åç§°`, visible: true }, |
| | | { key: 2, label: `èµäº§ç¼å·`, visible: true }, |
| | | { key: 3, label: `æå±æ¿å
å`, visible: true }, |
| | | { key: 4, label: `èµäº§ç±»å`, visible: true }, |
| | | { key: 5, label: `èµäº§ä»·å¼`, visible: true }, |
| | | { key: 6, label: `ç¶æ`, visible: true }, |
| | | { key: 7, label: `å建æ¶é´`, visible: true }, |
| | | ]); |
| | | |
| | | const data = reactive({ |
| | | form: { |
| | | assetId: undefined, |
| | | assetName: undefined, |
| | | assetCode: undefined, |
| | | contractorId: undefined, |
| | | contractorName: undefined, |
| | | assetType: undefined, |
| | | assetValue: 0, |
| | | status: "0", |
| | | remark: undefined, |
| | | }, |
| | | queryParams: { |
| | | pageNum: 1, |
| | | pageSize: 10, |
| | | assetName: undefined, |
| | | assetCode: undefined, |
| | | contractorId: undefined, |
| | | status: undefined, |
| | | }, |
| | | rules: { |
| | | assetName: [ |
| | | { required: true, message: "èµäº§åç§°ä¸è½ä¸ºç©º", trigger: "blur" }, |
| | | ], |
| | | assetCode: [ |
| | | { required: true, message: "èµäº§ç¼å·ä¸è½ä¸ºç©º", trigger: "blur" }, |
| | | ], |
| | | contractorId: [ |
| | | { required: true, message: "æå±æ¿å
åä¸è½ä¸ºç©º", trigger: "blur" }, |
| | | ], |
| | | assetType: [ |
| | | { required: true, message: "èµäº§ç±»åä¸è½ä¸ºç©º", trigger: "blur" }, |
| | | ], |
| | | assetValue: [ |
| | | { required: true, message: "èµäº§ä»·å¼ä¸è½ä¸ºç©º", trigger: "blur" }, |
| | | { type: "number", message: "请è¾å
¥æ£ç¡®çæ°å", trigger: "blur" }, |
| | | ], |
| | | }, |
| | | }); |
| | | |
| | | const { queryParams, form, rules } = toRefs(data); |
| | | |
| | | // æ¨¡ææ¿å
åæ°æ® |
| | | const contractorOptions = ref([ |
| | | { contractorId: 1, contractorName: "å京建工éå¢" }, |
| | | { contractorId: 2, contractorName: "䏿µ·å建éå¢" }, |
| | | { contractorId: 3, contractorName: "广å·å»ºçéå¢" }, |
| | | { contractorId: 4, contractorName: "æ·±å³å»ºå·¥éå¢" }, |
| | | { contractorId: 5, contractorName: "æå·å»ºå·¥éå¢" }, |
| | | ]); |
| | | |
| | | // èµäº§ç±»ååå
¸ |
| | | const asset_types = ref([ |
| | | { value: "equipment", label: "设å¤" }, |
| | | { value: "material", label: "ææ" }, |
| | | { value: "vehicle", label: "车è¾" }, |
| | | { value: "tool", label: "å·¥å
·" }, |
| | | { value: "other", label: "å
¶ä»" }, |
| | | ]); |
| | | |
| | | // èµäº§ç¶æåå
¸ |
| | | const asset_status = ref([ |
| | | { value: "0", label: "æ£å¸¸" }, |
| | | { value: "1", label: "ç¦ç¨" }, |
| | | { value: "2", label: "ç»´ä¿®ä¸" }, |
| | | { value: "3", label: "å·²æ¥åº" }, |
| | | ]); |
| | | |
| | | // æ£å¸¸ç¦ç¨åå
¸ |
| | | const sys_normal_disable = ref([ |
| | | { value: "0", label: "æ£å¸¸" }, |
| | | { value: "1", label: "ç¦ç¨" }, |
| | | ]); |
| | | |
| | | // 模æèµäº§æ°æ® |
| | | const mockAssets = [ |
| | | { |
| | | assetId: 1, |
| | | assetName: "æææº", |
| | | assetCode: "ASSET001", |
| | | contractorId: 1, |
| | | contractorName: "å京建工éå¢", |
| | | assetType: "equipment", |
| | | assetValue: 500000.00, |
| | | status: "0", |
| | | createTime: "2024-01-01 10:00:00", |
| | | remark: "大忿æº", |
| | | }, |
| | | { |
| | | assetId: 2, |
| | | assetName: "æ··ååæ
ææº", |
| | | assetCode: "ASSET002", |
| | | contractorId: 2, |
| | | contractorName: "䏿µ·å建éå¢", |
| | | assetType: "equipment", |
| | | assetValue: 150000.00, |
| | | status: "0", |
| | | createTime: "2024-01-02 10:00:00", |
| | | remark: "æ··ååæ
æè®¾å¤", |
| | | }, |
| | | { |
| | | assetId: 3, |
| | | assetName: "è£
è½½æº", |
| | | assetCode: "ASSET003", |
| | | contractorId: 3, |
| | | contractorName: "广å·å»ºçéå¢", |
| | | assetType: "equipment", |
| | | assetValue: 300000.00, |
| | | status: "1", |
| | | createTime: "2024-01-03 10:00:00", |
| | | remark: "è£
è½½æºè®¾å¤", |
| | | }, |
| | | { |
| | | assetId: 4, |
| | | assetName: "è¿è¾å¡è½¦", |
| | | assetCode: "ASSET004", |
| | | contractorId: 4, |
| | | contractorName: "æ·±å³å»ºå·¥éå¢", |
| | | assetType: "vehicle", |
| | | assetValue: 400000.00, |
| | | status: "0", |
| | | createTime: "2024-01-04 10:00:00", |
| | | remark: "éåè¿è¾å¡è½¦", |
| | | }, |
| | | { |
| | | assetId: 5, |
| | | assetName: "é¢çåææº", |
| | | assetCode: "ASSET005", |
| | | contractorId: 5, |
| | | contractorName: "æå·å»ºå·¥éå¢", |
| | | assetType: "tool", |
| | | assetValue: 20000.00, |
| | | status: "0", |
| | | createTime: "2024-01-05 10:00:00", |
| | | remark: "é¢çå 工设å¤", |
| | | }, |
| | | ]); |
| | | |
| | | /** è·åèµäº§ç±»åæ ç¾ */ |
| | | function getAssetTypeLabel(value) { |
| | | const type = asset_types.value.find(item => item.value === value); |
| | | return type ? type.label : value; |
| | | } |
| | | |
| | | /** æ¥è¯¢èµäº§å表 */ |
| | | function getList() { |
| | | loading.value = true; |
| | | // 模æAPI请æ±å»¶è¿ |
| | | setTimeout(() => { |
| | | let data = [...mockAssets]; |
| | | // 模ææç´¢è¿æ»¤ |
| | | if (queryParams.value.assetName) { |
| | | data = data.filter(item => item.assetName.includes(queryParams.value.assetName)); |
| | | } |
| | | if (queryParams.value.assetCode) { |
| | | data = data.filter(item => item.assetCode.includes(queryParams.value.assetCode)); |
| | | } |
| | | if (queryParams.value.contractorId) { |
| | | data = data.filter(item => item.contractorId === queryParams.value.contractorId); |
| | | } |
| | | if (queryParams.value.status) { |
| | | data = data.filter(item => item.status === queryParams.value.status); |
| | | } |
| | | // 模æå页 |
| | | const start = (queryParams.value.pageNum - 1) * queryParams.value.pageSize; |
| | | const end = start + queryParams.value.pageSize; |
| | | assetList.value = data.slice(start, end); |
| | | total.value = data.length; |
| | | loading.value = false; |
| | | }, 500); |
| | | } |
| | | |
| | | /** æç´¢æé®æä½ */ |
| | | function handleQuery() { |
| | | queryParams.value.pageNum = 1; |
| | | getList(); |
| | | } |
| | | |
| | | /** éç½®æé®æä½ */ |
| | | function resetQuery() { |
| | | Object.assign(queryParams.value, { |
| | | assetName: undefined, |
| | | assetCode: undefined, |
| | | contractorId: undefined, |
| | | status: undefined, |
| | | }); |
| | | handleQuery(); |
| | | } |
| | | |
| | | /** å é¤æé®æä½ */ |
| | | function handleDelete(row) { |
| | | const assetIds = row.assetId || ids.value; |
| | | ElMessage.confirm(`æ¯å¦ç¡®è®¤å é¤èµäº§ç¼å·ä¸º"${assetIds}"çæ°æ®é¡¹ï¼`).then(() => { |
| | | // 模æå é¤æä½ |
| | | ElMessage.success("å 餿å"); |
| | | getList(); |
| | | }).catch(() => {}); |
| | | } |
| | | |
| | | /** ç¶æä¿®æ¹ */ |
| | | function handleStatusChange(row) { |
| | | let text = row.status === "0" ? "å¯ç¨" : "åç¨"; |
| | | ElMessage.confirm(`确认è¦"${text}""${row.assetName}"èµäº§å?`).then(() => { |
| | | // 模æç¶æä¿®æ¹ |
| | | ElMessage.success(text + "æå"); |
| | | getList(); |
| | | }).catch(() => { |
| | | row.status = row.status === "0" ? "1" : "0"; |
| | | }); |
| | | } |
| | | |
| | | /** éæ©æ¡æ° */ |
| | | function handleSelectionChange(selection) { |
| | | ids.value = selection.map((item) => item.assetId); |
| | | single.value = selection.length != 1; |
| | | multiple.value = !selection.length; |
| | | } |
| | | |
| | | /** éç½®æä½è¡¨å */ |
| | | function reset() { |
| | | form.value = { |
| | | assetId: undefined, |
| | | assetName: undefined, |
| | | assetCode: undefined, |
| | | contractorId: undefined, |
| | | contractorName: undefined, |
| | | assetType: undefined, |
| | | assetValue: 0, |
| | | status: "0", |
| | | remark: undefined, |
| | | }; |
| | | } |
| | | |
| | | /** åæ¶æé® */ |
| | | function cancel() { |
| | | open.value = false; |
| | | reset(); |
| | | } |
| | | |
| | | /** æ°å¢æé®æä½ */ |
| | | function handleAdd() { |
| | | reset(); |
| | | open.value = true; |
| | | title.value = "æ·»å èµäº§"; |
| | | } |
| | | |
| | | /** ä¿®æ¹æé®æä½ */ |
| | | function handleUpdate(row) { |
| | | reset(); |
| | | const assetId = row.assetId || ids.value; |
| | | // 模æè·å详æ
|
| | | const asset = mockAssets.find(item => item.assetId === assetId); |
| | | if (asset) { |
| | | form.value = { ...asset }; |
| | | open.value = true; |
| | | title.value = "ä¿®æ¹èµäº§"; |
| | | } |
| | | } |
| | | |
| | | /** æäº¤æé® */ |
| | | function submitForm() { |
| | | // 模æè¡¨åéªè¯ |
| | | const requiredFields = ['assetName', 'assetCode', 'contractorId', 'assetType', 'assetValue']; |
| | | const isInvalid = requiredFields.some(field => !form.value[field]); |
| | | |
| | | if (isInvalid) { |
| | | ElMessage.error("请填åå¿
å¡«åæ®µ"); |
| | | return; |
| | | } |
| | | |
| | | // 模ææäº¤æä½ |
| | | ElMessage.success(title.value === "æ·»å èµäº§" ? "æ°å¢æå" : "ä¿®æ¹æå"); |
| | | open.value = false; |
| | | getList(); |
| | | } |
| | | |
| | | onMounted(() => { |
| | | getList(); |
| | | }); |
| | | </script> |
| ¶Ô±ÈÐÂÎļþ |
| | |
| | | <template> |
| | | <div class="app-container"> |
| | | <el-form |
| | | :model="queryParams" |
| | | ref="queryRef" |
| | | :inline="true" |
| | | v-show="showSearch" |
| | | label-width="90px" |
| | | > |
| | | <el-form-item label="åè§åç§°" prop="complianceName"> |
| | | <el-input |
| | | v-model="queryParams.complianceName" |
| | | placeholder="请è¾å
¥åè§åç§°" |
| | | clearable |
| | | style="width: 220px" |
| | | @keyup.enter="handleQuery" |
| | | /> |
| | | </el-form-item> |
| | | <el-form-item label="åè§ç¼å·" prop="complianceCode"> |
| | | <el-input |
| | | v-model="queryParams.complianceCode" |
| | | placeholder="请è¾å
¥åè§ç¼å·" |
| | | clearable |
| | | style="width: 240px" |
| | | @keyup.enter="handleQuery" |
| | | /> |
| | | </el-form-item> |
| | | <el-form-item label="æå±æ¿å
å" prop="contractorId"> |
| | | <el-select |
| | | v-model="queryParams.contractorId" |
| | | placeholder="è¯·éæ©æ¿å
å" |
| | | clearable |
| | | style="width: 240px" |
| | | > |
| | | <el-option |
| | | v-for="contractor in contractorOptions" |
| | | :key="contractor.contractorId" |
| | | :label="contractor.contractorName" |
| | | :value="contractor.contractorId" |
| | | /> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label="åè§ç¶æ" prop="status"> |
| | | <el-select |
| | | v-model="queryParams.status" |
| | | placeholder="åè§ç¶æ" |
| | | clearable |
| | | style="width: 240px" |
| | | > |
| | | <el-option |
| | | v-for="dict in compliance_status" |
| | | :key="dict.value" |
| | | :label="dict.label" |
| | | :value="dict.value" |
| | | /> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item> |
| | | <el-button type="primary" icon="Search" @click="handleQuery" |
| | | >æç´¢</el-button |
| | | > |
| | | <el-button icon="Refresh" @click="resetQuery">éç½®</el-button> |
| | | </el-form-item> |
| | | </el-form> |
| | | |
| | | <el-row :gutter="10" class="mb8"> |
| | | <el-col :span="1.5"> |
| | | <el-button |
| | | type="primary" |
| | | plain |
| | | icon="Plus" |
| | | @click="handleAdd" |
| | | >æ°å¢</el-button |
| | | > |
| | | </el-col> |
| | | <el-col :span="1.5"> |
| | | <el-button |
| | | type="success" |
| | | plain |
| | | icon="Edit" |
| | | :disabled="single" |
| | | @click="handleUpdate" |
| | | >ä¿®æ¹</el-button |
| | | > |
| | | </el-col> |
| | | <el-col :span="1.5"> |
| | | <el-button |
| | | type="danger" |
| | | plain |
| | | icon="Delete" |
| | | :disabled="multiple" |
| | | @click="handleDelete" |
| | | >å é¤</el-button |
| | | > |
| | | </el-col> |
| | | <right-toolbar |
| | | v-model:showSearch="showSearch" |
| | | @queryTable="getList" |
| | | :columns="columns" |
| | | ></right-toolbar> |
| | | </el-row> |
| | | |
| | | <el-table |
| | | v-loading="loading" |
| | | :data="complianceList" |
| | | @selection-change="handleSelectionChange" |
| | | stripe |
| | | > |
| | | <el-table-column type="selection" width="50" align="center" /> |
| | | <el-table-column |
| | | label="åè§ID" |
| | | align="center" |
| | | key="complianceId" |
| | | prop="complianceId" |
| | | v-if="columns[0].visible" |
| | | /> |
| | | <el-table-column |
| | | label="åè§åç§°" |
| | | align="center" |
| | | key="complianceName" |
| | | prop="complianceName" |
| | | v-if="columns[1].visible" |
| | | :show-overflow-tooltip="true" |
| | | /> |
| | | <el-table-column |
| | | label="åè§ç¼å·" |
| | | align="center" |
| | | key="complianceCode" |
| | | prop="complianceCode" |
| | | v-if="columns[2].visible" |
| | | /> |
| | | <el-table-column |
| | | label="æå±æ¿å
å" |
| | | align="center" |
| | | key="contractorName" |
| | | prop="contractorName" |
| | | v-if="columns[3].visible" |
| | | :show-overflow-tooltip="true" |
| | | /> |
| | | <el-table-column |
| | | label="åè§ç±»å" |
| | | align="center" |
| | | key="complianceType" |
| | | prop="complianceType" |
| | | v-if="columns[4].visible" |
| | | > |
| | | <template #default="scope"> |
| | | {{ getComplianceTypeLabel(scope.row.complianceType) }} |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column |
| | | label="æææå¼å§" |
| | | align="center" |
| | | key="validStartDate" |
| | | prop="validStartDate" |
| | | v-if="columns[5].visible" |
| | | width="140" |
| | | /> |
| | | <el-table-column |
| | | label="æææç»æ" |
| | | align="center" |
| | | key="validEndDate" |
| | | prop="validEndDate" |
| | | v-if="columns[6].visible" |
| | | width="140" |
| | | /> |
| | | <el-table-column |
| | | label="ç¶æ" |
| | | align="center" |
| | | key="status" |
| | | v-if="columns[7].visible" |
| | | > |
| | | <template #default="scope"> |
| | | <el-switch |
| | | v-model="scope.row.status" |
| | | active-value="0" |
| | | inactive-value="1" |
| | | @change="handleStatusChange(scope.row)" |
| | | ></el-switch> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column |
| | | label="å建æ¶é´" |
| | | align="center" |
| | | prop="createTime" |
| | | v-if="columns[8].visible" |
| | | width="160" |
| | | > |
| | | <template #default="scope"> |
| | | <span>{{ parseTime(scope.row.createTime) }}</span> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column |
| | | label="æä½" |
| | | align="center" |
| | | width="150" |
| | | class-name="small-padding fixed-width" |
| | | > |
| | | <template #default="scope"> |
| | | <el-tooltip |
| | | content="ä¿®æ¹" |
| | | placement="top" |
| | | > |
| | | <el-button |
| | | link |
| | | type="primary" |
| | | icon="Edit" |
| | | @click="handleUpdate(scope.row)" |
| | | ></el-button> |
| | | </el-tooltip> |
| | | <el-tooltip |
| | | content="å é¤" |
| | | placement="top" |
| | | > |
| | | <el-button |
| | | link |
| | | type="primary" |
| | | icon="Delete" |
| | | @click="handleDelete(scope.row)" |
| | | ></el-button> |
| | | </el-tooltip> |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | <pagination |
| | | v-show="total > 0" |
| | | :total="total" |
| | | v-model:page="queryParams.pageNum" |
| | | v-model:limit="queryParams.pageSize" |
| | | @pagination="getList" |
| | | /> |
| | | |
| | | <!-- æ·»å æä¿®æ¹åè§é
ç½®å¯¹è¯æ¡ --> |
| | | <el-dialog :title="title" v-model="open" width="600px" append-to-body> |
| | | <el-form :model="form" :rules="rules" ref="complianceRef" label-width="80px"> |
| | | <el-row> |
| | | <el-col :span="12"> |
| | | <el-form-item label="åè§åç§°" prop="complianceName"> |
| | | <el-input |
| | | v-model="form.complianceName" |
| | | placeholder="请è¾å
¥åè§åç§°" |
| | | maxlength="50" |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="åè§ç¼å·" prop="complianceCode"> |
| | | <el-input |
| | | v-model="form.complianceCode" |
| | | placeholder="请è¾å
¥åè§ç¼å·" |
| | | maxlength="20" |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row> |
| | | <el-col :span="12"> |
| | | <el-form-item label="æå±æ¿å
å" prop="contractorId"> |
| | | <el-select |
| | | v-model="form.contractorId" |
| | | placeholder="è¯·éæ©æ¿å
å" |
| | | clearable |
| | | > |
| | | <el-option |
| | | v-for="contractor in contractorOptions" |
| | | :key="contractor.contractorId" |
| | | :label="contractor.contractorName" |
| | | :value="contractor.contractorId" |
| | | /> |
| | | </el-select> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="åè§ç±»å" prop="complianceType"> |
| | | <el-select |
| | | v-model="form.complianceType" |
| | | placeholder="è¯·éæ©åè§ç±»å" |
| | | clearable |
| | | > |
| | | <el-option |
| | | v-for="type in compliance_types" |
| | | :key="type.value" |
| | | :label="type.label" |
| | | :value="type.value" |
| | | /> |
| | | </el-select> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row> |
| | | <el-col :span="12"> |
| | | <el-form-item label="æææå¼å§" prop="validStartDate"> |
| | | <el-date-picker |
| | | v-model="form.validStartDate" |
| | | type="date" |
| | | placeholder="éæ©å¼å§æ¥æ" |
| | | value-format="YYYY-MM-DD" |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="æææç»æ" prop="validEndDate"> |
| | | <el-date-picker |
| | | v-model="form.validEndDate" |
| | | type="date" |
| | | placeholder="éæ©ç»ææ¥æ" |
| | | value-format="YYYY-MM-DD" |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row> |
| | | <el-col :span="12"> |
| | | <el-form-item label="ç¶æ"> |
| | | <el-radio-group v-model="form.status"> |
| | | <el-radio |
| | | v-for="dict in sys_normal_disable" |
| | | :key="dict.value" |
| | | :value="dict.value" |
| | | >{{ dict.label }}</el-radio |
| | | > |
| | | </el-radio-group> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row> |
| | | <el-col :span="24"> |
| | | <el-form-item label="夿³¨"> |
| | | <el-input |
| | | v-model="form.remark" |
| | | type="textarea" |
| | | placeholder="请è¾å
¥å
容" |
| | | ></el-input> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | </el-form> |
| | | <template #footer> |
| | | <div class="dialog-footer"> |
| | | <el-button type="primary" @click="submitForm">ç¡® å®</el-button> |
| | | <el-button @click="cancel">å æ¶</el-button> |
| | | </div> |
| | | </template> |
| | | </el-dialog> |
| | | </div> |
| | | </template> |
| | | |
| | | <script setup name="ContractorCompliance"> |
| | | import { ref, reactive, toRefs, watch, onMounted } from 'vue'; |
| | | import { ElMessage } from 'element-plus'; |
| | | import { parseTime } from '@/utils/ruoyi'; |
| | | |
| | | const complianceList = ref([]); |
| | | const open = ref(false); |
| | | const loading = ref(true); |
| | | const showSearch = ref(true); |
| | | const ids = ref([]); |
| | | const single = ref(true); |
| | | const multiple = ref(true); |
| | | const total = ref(0); |
| | | const title = ref(""); |
| | | |
| | | // åæ¾éä¿¡æ¯ |
| | | const columns = ref([ |
| | | { key: 0, label: `åè§ID`, visible: true }, |
| | | { key: 1, label: `åè§åç§°`, visible: true }, |
| | | { key: 2, label: `åè§ç¼å·`, visible: true }, |
| | | { key: 3, label: `æå±æ¿å
å`, visible: true }, |
| | | { key: 4, label: `åè§ç±»å`, visible: true }, |
| | | { key: 5, label: `æææå¼å§`, visible: true }, |
| | | { key: 6, label: `æææç»æ`, visible: true }, |
| | | { key: 7, label: `ç¶æ`, visible: true }, |
| | | { key: 8, label: `å建æ¶é´`, visible: true }, |
| | | ]); |
| | | |
| | | const data = reactive({ |
| | | form: { |
| | | complianceId: undefined, |
| | | complianceName: undefined, |
| | | complianceCode: undefined, |
| | | contractorId: undefined, |
| | | contractorName: undefined, |
| | | complianceType: undefined, |
| | | validStartDate: undefined, |
| | | validEndDate: undefined, |
| | | status: "0", |
| | | remark: undefined, |
| | | }, |
| | | queryParams: { |
| | | pageNum: 1, |
| | | pageSize: 10, |
| | | complianceName: undefined, |
| | | complianceCode: undefined, |
| | | contractorId: undefined, |
| | | status: undefined, |
| | | }, |
| | | rules: { |
| | | complianceName: [ |
| | | { required: true, message: "åè§åç§°ä¸è½ä¸ºç©º", trigger: "blur" }, |
| | | ], |
| | | complianceCode: [ |
| | | { required: true, message: "åè§ç¼å·ä¸è½ä¸ºç©º", trigger: "blur" }, |
| | | ], |
| | | contractorId: [ |
| | | { required: true, message: "æå±æ¿å
åä¸è½ä¸ºç©º", trigger: "blur" }, |
| | | ], |
| | | complianceType: [ |
| | | { required: true, message: "åè§ç±»åä¸è½ä¸ºç©º", trigger: "blur" }, |
| | | ], |
| | | validStartDate: [ |
| | | { required: true, message: "æææå¼å§ä¸è½ä¸ºç©º", trigger: "blur" }, |
| | | ], |
| | | validEndDate: [ |
| | | { required: true, message: "æææç»æä¸è½ä¸ºç©º", trigger: "blur" }, |
| | | ], |
| | | }, |
| | | }); |
| | | |
| | | const { queryParams, form, rules } = toRefs(data); |
| | | |
| | | // æ¨¡ææ¿å
åæ°æ® |
| | | const contractorOptions = ref([ |
| | | { contractorId: 1, contractorName: "å京建工éå¢" }, |
| | | { contractorId: 2, contractorName: "䏿µ·å建éå¢" }, |
| | | { contractorId: 3, contractorName: "广å·å»ºçéå¢" }, |
| | | { contractorId: 4, contractorName: "æ·±å³å»ºå·¥éå¢" }, |
| | | { contractorId: 5, contractorName: "æå·å»ºå·¥éå¢" }, |
| | | ]); |
| | | |
| | | // åè§ç±»ååå
¸ |
| | | const compliance_types = ref([ |
| | | { value: "license", label: "许å¯è¯" }, |
| | | { value: "certificate", label: "è¯ä¹¦" }, |
| | | { value: "regulation", label: "æ³è§éµå¾ª" }, |
| | | { value: "standard", label: "æ ååè§" }, |
| | | { value: "other", label: "å
¶ä»" }, |
| | | ]); |
| | | |
| | | // åè§ç¶æåå
¸ |
| | | const compliance_status = ref([ |
| | | { value: "0", label: "æ£å¸¸" }, |
| | | { value: "1", label: "ç¦ç¨" }, |
| | | { value: "2", label: "å³å°è¿æ" }, |
| | | { value: "3", label: "å·²è¿æ" }, |
| | | ]); |
| | | |
| | | // æ£å¸¸ç¦ç¨åå
¸ |
| | | const sys_normal_disable = ref([ |
| | | { value: "0", label: "æ£å¸¸" }, |
| | | { value: "1", label: "ç¦ç¨" }, |
| | | ]); |
| | | |
| | | // 模æåè§æ°æ® |
| | | const mockCompliances = ref([ |
| | | { |
| | | complianceId: 1, |
| | | complianceName: "å»ºçæ½å·¥è®¸å¯è¯", |
| | | complianceCode: "COMP001", |
| | | contractorId: 1, |
| | | contractorName: "å京建工éå¢", |
| | | complianceType: "license", |
| | | validStartDate: "2024-01-01", |
| | | validEndDate: "2025-12-31", |
| | | status: "0", |
| | | createTime: "2024-01-01 10:00:00", |
| | | remark: "å»ºçæ½å·¥è®¸å¯è¯", |
| | | }, |
| | | { |
| | | complianceId: 2, |
| | | complianceName: "å®å
¨ç产许å¯è¯", |
| | | complianceCode: "COMP002", |
| | | contractorId: 2, |
| | | contractorName: "䏿µ·å建éå¢", |
| | | complianceType: "license", |
| | | validStartDate: "2024-01-02", |
| | | validEndDate: "2025-12-31", |
| | | status: "0", |
| | | createTime: "2024-01-02 10:00:00", |
| | | remark: "å®å
¨ç产许å¯è¯", |
| | | }, |
| | | { |
| | | complianceId: 3, |
| | | complianceName: "è´¨é管çä½ç³»è®¤è¯", |
| | | complianceCode: "COMP003", |
| | | contractorId: 3, |
| | | contractorName: "广å·å»ºçéå¢", |
| | | complianceType: "certificate", |
| | | validStartDate: "2024-01-03", |
| | | validEndDate: "2025-12-31", |
| | | status: "1", |
| | | createTime: "2024-01-03 10:00:00", |
| | | remark: "ISO9001è´¨é管çä½ç³»è®¤è¯", |
| | | }, |
| | | { |
| | | complianceId: 4, |
| | | complianceName: "ç¯å¢ç®¡çä½ç³»è®¤è¯", |
| | | complianceCode: "COMP004", |
| | | contractorId: 4, |
| | | contractorName: "æ·±å³å»ºå·¥éå¢", |
| | | complianceType: "certificate", |
| | | validStartDate: "2024-01-04", |
| | | validEndDate: "2025-12-31", |
| | | status: "0", |
| | | createTime: "2024-01-04 10:00:00", |
| | | remark: "ISO14001ç¯å¢ç®¡çä½ç³»è®¤è¯", |
| | | }, |
| | | { |
| | | complianceId: 5, |
| | | complianceName: "èä¸å¥åº·å®å
¨ç®¡çä½ç³»è®¤è¯", |
| | | complianceCode: "COMP005", |
| | | contractorId: 5, |
| | | contractorName: "æå·å»ºå·¥éå¢", |
| | | complianceType: "certificate", |
| | | validStartDate: "2024-01-05", |
| | | validEndDate: "2025-12-31", |
| | | status: "0", |
| | | createTime: "2024-01-05 10:00:00", |
| | | remark: "ISO45001èä¸å¥åº·å®å
¨ç®¡çä½ç³»è®¤è¯", |
| | | }, |
| | | ]); |
| | | |
| | | /** è·ååè§ç±»åæ ç¾ */ |
| | | function getComplianceTypeLabel(value) { |
| | | const type = compliance_types.value.find(item => item.value === value); |
| | | return type ? type.label : value; |
| | | } |
| | | |
| | | /** æ¥è¯¢åè§å表 */ |
| | | function getList() { |
| | | loading.value = true; |
| | | // 模æAPI请æ±å»¶è¿ |
| | | setTimeout(() => { |
| | | let data = [...mockCompliances.value]; |
| | | // 模ææç´¢è¿æ»¤ |
| | | if (queryParams.value.complianceName) { |
| | | data = data.filter(item => item.complianceName.includes(queryParams.value.complianceName)); |
| | | } |
| | | if (queryParams.value.complianceCode) { |
| | | data = data.filter(item => item.complianceCode.includes(queryParams.value.complianceCode)); |
| | | } |
| | | if (queryParams.value.contractorId) { |
| | | data = data.filter(item => item.contractorId === queryParams.value.contractorId); |
| | | } |
| | | if (queryParams.value.status) { |
| | | data = data.filter(item => item.status === queryParams.value.status); |
| | | } |
| | | // 模æå页 |
| | | const start = (queryParams.value.pageNum - 1) * queryParams.value.pageSize; |
| | | const end = start + queryParams.value.pageSize; |
| | | complianceList.value = data.slice(start, end); |
| | | total.value = data.length; |
| | | loading.value = false; |
| | | }, 500); |
| | | } |
| | | |
| | | /** æç´¢æé®æä½ */ |
| | | function handleQuery() { |
| | | queryParams.value.pageNum = 1; |
| | | getList(); |
| | | } |
| | | |
| | | /** éç½®æé®æä½ */ |
| | | function resetQuery() { |
| | | Object.assign(queryParams.value, { |
| | | complianceName: undefined, |
| | | complianceCode: undefined, |
| | | contractorId: undefined, |
| | | status: undefined, |
| | | }); |
| | | handleQuery(); |
| | | } |
| | | |
| | | /** å é¤æé®æä½ */ |
| | | function handleDelete(row) { |
| | | const complianceIds = row.complianceId || ids.value; |
| | | ElMessage.confirm(`æ¯å¦ç¡®è®¤å é¤åè§ç¼å·ä¸º"${complianceIds}"çæ°æ®é¡¹ï¼`).then(() => { |
| | | // 模æå é¤æä½ |
| | | ElMessage.success("å 餿å"); |
| | | getList(); |
| | | }).catch(() => {}); |
| | | } |
| | | |
| | | /** ç¶æä¿®æ¹ */ |
| | | function handleStatusChange(row) { |
| | | let text = row.status === "0" ? "å¯ç¨" : "åç¨"; |
| | | ElMessage.confirm(`确认è¦"${text}""${row.complianceName}"åè§è®°å½å?`).then(() => { |
| | | // 模æç¶æä¿®æ¹ |
| | | ElMessage.success(text + "æå"); |
| | | getList(); |
| | | }).catch(() => { |
| | | row.status = row.status === "0" ? "1" : "0"; |
| | | }); |
| | | } |
| | | |
| | | /** éæ©æ¡æ° */ |
| | | function handleSelectionChange(selection) { |
| | | ids.value = selection.map((item) => item.complianceId); |
| | | single.value = selection.length != 1; |
| | | multiple.value = !selection.length; |
| | | } |
| | | |
| | | /** éç½®æä½è¡¨å */ |
| | | function reset() { |
| | | form.value = { |
| | | complianceId: undefined, |
| | | complianceName: undefined, |
| | | complianceCode: undefined, |
| | | contractorId: undefined, |
| | | contractorName: undefined, |
| | | complianceType: undefined, |
| | | validStartDate: undefined, |
| | | validEndDate: undefined, |
| | | status: "0", |
| | | remark: undefined, |
| | | }; |
| | | } |
| | | |
| | | /** åæ¶æé® */ |
| | | function cancel() { |
| | | open.value = false; |
| | | reset(); |
| | | } |
| | | |
| | | /** æ°å¢æé®æä½ */ |
| | | function handleAdd() { |
| | | reset(); |
| | | open.value = true; |
| | | title.value = "æ·»å åè§è®°å½"; |
| | | } |
| | | |
| | | /** ä¿®æ¹æé®æä½ */ |
| | | function handleUpdate(row) { |
| | | reset(); |
| | | const complianceId = row.complianceId || ids.value; |
| | | // 模æè·å详æ
|
| | | const compliance = mockCompliances.find(item => item.complianceId === complianceId); |
| | | if (compliance) { |
| | | form.value = { ...compliance }; |
| | | open.value = true; |
| | | title.value = "ä¿®æ¹åè§è®°å½"; |
| | | } |
| | | } |
| | | |
| | | /** æäº¤æé® */ |
| | | function submitForm() { |
| | | // 模æè¡¨åéªè¯ |
| | | const requiredFields = ['complianceName', 'complianceCode', 'contractorId', 'complianceType', 'validStartDate', 'validEndDate']; |
| | | const isInvalid = requiredFields.some(field => !form.value[field]); |
| | | |
| | | if (isInvalid) { |
| | | ElMessage.error("请填åå¿
å¡«åæ®µ"); |
| | | return; |
| | | } |
| | | |
| | | // 模ææäº¤æä½ |
| | | ElMessage.success(title.value === "æ·»å åè§è®°å½" ? "æ°å¢æå" : "ä¿®æ¹æå"); |
| | | open.value = false; |
| | | getList(); |
| | | } |
| | | |
| | | onMounted(() => { |
| | | getList(); |
| | | }); |
| | | </script> |
| ¶Ô±ÈÐÂÎļþ |
| | |
| | | <template> |
| | | <div class="app-container"> |
| | | <el-form |
| | | :model="queryParams" |
| | | ref="queryRef" |
| | | :inline="true" |
| | | v-show="showSearch" |
| | | label-width="90px" |
| | | > |
| | | <el-form-item label="æ¿å
ååç§°" prop="contractorName"> |
| | | <el-input |
| | | v-model="queryParams.contractorName" |
| | | placeholder="请è¾å
¥æ¿å
ååç§°" |
| | | clearable |
| | | style="width: 220px" |
| | | @keyup.enter="handleQuery" |
| | | /> |
| | | </el-form-item> |
| | | <el-form-item label="è系人" prop="contactPerson"> |
| | | <el-input |
| | | v-model="queryParams.contactPerson" |
| | | placeholder="请è¾å
¥è系人" |
| | | clearable |
| | | style="width: 240px" |
| | | @keyup.enter="handleQuery" |
| | | /> |
| | | </el-form-item> |
| | | <el-form-item label="èç³»çµè¯" prop="contactPhone"> |
| | | <el-input |
| | | v-model="queryParams.contactPhone" |
| | | placeholder="请è¾å
¥èç³»çµè¯" |
| | | clearable |
| | | style="width: 240px" |
| | | @keyup.enter="handleQuery" |
| | | /> |
| | | </el-form-item> |
| | | <el-form-item label="ç¶æ" prop="status"> |
| | | <el-select |
| | | v-model="queryParams.status" |
| | | placeholder="æ¿å
åç¶æ" |
| | | clearable |
| | | style="width: 240px" |
| | | > |
| | | <el-option |
| | | v-for="dict in sys_normal_disable" |
| | | :key="dict.value" |
| | | :label="dict.label" |
| | | :value="dict.value" |
| | | /> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item> |
| | | <el-button type="primary" icon="Search" @click="handleQuery" |
| | | >æç´¢</el-button |
| | | > |
| | | <el-button icon="Refresh" @click="resetQuery">éç½®</el-button> |
| | | </el-form-item> |
| | | </el-form> |
| | | |
| | | <el-row :gutter="10" class="mb8"> |
| | | <el-col :span="1.5"> |
| | | <el-button |
| | | type="primary" |
| | | plain |
| | | icon="Plus" |
| | | @click="handleAdd" |
| | | >æ°å¢</el-button |
| | | > |
| | | </el-col> |
| | | <el-col :span="1.5"> |
| | | <el-button |
| | | type="success" |
| | | plain |
| | | icon="Edit" |
| | | :disabled="single" |
| | | @click="handleUpdate" |
| | | >ä¿®æ¹</el-button |
| | | > |
| | | </el-col> |
| | | <el-col :span="1.5"> |
| | | <el-button |
| | | type="danger" |
| | | plain |
| | | icon="Delete" |
| | | :disabled="multiple" |
| | | @click="handleDelete" |
| | | >å é¤</el-button |
| | | > |
| | | </el-col> |
| | | <right-toolbar |
| | | v-model:showSearch="showSearch" |
| | | @queryTable="getList" |
| | | :columns="columns" |
| | | ></right-toolbar> |
| | | </el-row> |
| | | |
| | | <el-table |
| | | v-loading="loading" |
| | | :data="contractorList" |
| | | @selection-change="handleSelectionChange" |
| | | stripe |
| | | > |
| | | <el-table-column type="selection" width="50" align="center" /> |
| | | <el-table-column |
| | | label="æ¿å
åç¼å·" |
| | | align="center" |
| | | key="contractorId" |
| | | prop="contractorId" |
| | | v-if="columns[0].visible" |
| | | /> |
| | | <el-table-column |
| | | label="æ¿å
ååç§°" |
| | | align="center" |
| | | key="contractorName" |
| | | prop="contractorName" |
| | | v-if="columns[1].visible" |
| | | :show-overflow-tooltip="true" |
| | | /> |
| | | <el-table-column |
| | | label="è系人" |
| | | align="center" |
| | | key="contactPerson" |
| | | prop="contactPerson" |
| | | v-if="columns[2].visible" |
| | | /> |
| | | <el-table-column |
| | | label="èç³»çµè¯" |
| | | align="center" |
| | | key="contactPhone" |
| | | prop="contactPhone" |
| | | v-if="columns[3].visible" |
| | | /> |
| | | <el-table-column |
| | | label="èç³»é®ç®±" |
| | | align="center" |
| | | key="contactEmail" |
| | | prop="contactEmail" |
| | | v-if="columns[4].visible" |
| | | :show-overflow-tooltip="true" |
| | | /> |
| | | <el-table-column |
| | | label="å°å" |
| | | align="center" |
| | | key="address" |
| | | prop="address" |
| | | v-if="columns[5].visible" |
| | | :show-overflow-tooltip="true" |
| | | /> |
| | | <el-table-column |
| | | label="ç¶æ" |
| | | align="center" |
| | | key="status" |
| | | v-if="columns[6].visible" |
| | | > |
| | | <template #default="scope"> |
| | | <el-switch |
| | | v-model="scope.row.status" |
| | | active-value="0" |
| | | inactive-value="1" |
| | | @change="handleStatusChange(scope.row)" |
| | | ></el-switch> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column |
| | | label="å建æ¶é´" |
| | | align="center" |
| | | prop="createTime" |
| | | v-if="columns[7].visible" |
| | | width="160" |
| | | > |
| | | <template #default="scope"> |
| | | <span>{{ parseTime(scope.row.createTime) }}</span> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column |
| | | label="æä½" |
| | | align="center" |
| | | width="150" |
| | | class-name="small-padding fixed-width" |
| | | > |
| | | <template #default="scope"> |
| | | <el-tooltip |
| | | content="ä¿®æ¹" |
| | | placement="top" |
| | | > |
| | | <el-button |
| | | link |
| | | type="primary" |
| | | icon="Edit" |
| | | @click="handleUpdate(scope.row)" |
| | | ></el-button> |
| | | </el-tooltip> |
| | | <el-tooltip |
| | | content="å é¤" |
| | | placement="top" |
| | | > |
| | | <el-button |
| | | link |
| | | type="primary" |
| | | icon="Delete" |
| | | @click="handleDelete(scope.row)" |
| | | ></el-button> |
| | | </el-tooltip> |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | <pagination |
| | | v-show="total > 0" |
| | | :total="total" |
| | | v-model:page="queryParams.pageNum" |
| | | v-model:limit="queryParams.pageSize" |
| | | @pagination="getList" |
| | | /> |
| | | |
| | | <!-- æ·»å æä¿®æ¹æ¿å
åé
ç½®å¯¹è¯æ¡ --> |
| | | <el-dialog :title="title" v-model="open" width="600px" append-to-body> |
| | | <el-form :model="form" :rules="rules" ref="contractorRef" label-width="80px"> |
| | | <el-row> |
| | | <el-col :span="12"> |
| | | <el-form-item label="æ¿å
ååç§°" prop="contractorName"> |
| | | <el-input |
| | | v-model="form.contractorName" |
| | | placeholder="请è¾å
¥æ¿å
ååç§°" |
| | | maxlength="50" |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="è系人" prop="contactPerson"> |
| | | <el-input |
| | | v-model="form.contactPerson" |
| | | placeholder="请è¾å
¥è系人" |
| | | maxlength="20" |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row> |
| | | <el-col :span="12"> |
| | | <el-form-item label="èç³»çµè¯" prop="contactPhone"> |
| | | <el-input |
| | | v-model="form.contactPhone" |
| | | placeholder="请è¾å
¥èç³»çµè¯" |
| | | maxlength="11" |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="èç³»é®ç®±" prop="contactEmail"> |
| | | <el-input |
| | | v-model="form.contactEmail" |
| | | placeholder="请è¾å
¥èç³»é®ç®±" |
| | | maxlength="50" |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row> |
| | | <el-col :span="24"> |
| | | <el-form-item label="å°å" prop="address"> |
| | | <el-input |
| | | v-model="form.address" |
| | | placeholder="请è¾å
¥å°å" |
| | | maxlength="100" |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row> |
| | | <el-col :span="12"> |
| | | <el-form-item label="ç¶æ"> |
| | | <el-radio-group v-model="form.status"> |
| | | <el-radio |
| | | v-for="dict in sys_normal_disable" |
| | | :key="dict.value" |
| | | :value="dict.value" |
| | | >{{ dict.label }}</el-radio |
| | | > |
| | | </el-radio-group> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row> |
| | | <el-col :span="24"> |
| | | <el-form-item label="夿³¨"> |
| | | <el-input |
| | | v-model="form.remark" |
| | | type="textarea" |
| | | placeholder="请è¾å
¥å
容" |
| | | ></el-input> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | </el-form> |
| | | <template #footer> |
| | | <div class="dialog-footer"> |
| | | <el-button type="primary" @click="submitForm">ç¡® å®</el-button> |
| | | <el-button @click="cancel">å æ¶</el-button> |
| | | </div> |
| | | </template> |
| | | </el-dialog> |
| | | </div> |
| | | </template> |
| | | |
| | | <script setup name="Contractor"> |
| | | import { ref, reactive, toRefs, watch, onMounted } from 'vue'; |
| | | import { ElMessage } from 'element-plus'; |
| | | import { parseTime } from '@/utils/ruoyi'; |
| | | |
| | | const contractorList = ref([]); |
| | | const open = ref(false); |
| | | const loading = ref(true); |
| | | const showSearch = ref(true); |
| | | const ids = ref([]); |
| | | const single = ref(true); |
| | | const multiple = ref(true); |
| | | const total = ref(0); |
| | | const title = ref(""); |
| | | |
| | | // åæ¾éä¿¡æ¯ |
| | | const columns = ref([ |
| | | { key: 0, label: `æ¿å
åç¼å·`, visible: true }, |
| | | { key: 1, label: `æ¿å
ååç§°`, visible: true }, |
| | | { key: 2, label: `è系人`, visible: true }, |
| | | { key: 3, label: `èç³»çµè¯`, visible: true }, |
| | | { key: 4, label: `èç³»é®ç®±`, visible: true }, |
| | | { key: 5, label: `å°å`, visible: true }, |
| | | { key: 6, label: `ç¶æ`, visible: true }, |
| | | { key: 7, label: `å建æ¶é´`, visible: true }, |
| | | ]); |
| | | |
| | | const data = reactive({ |
| | | form: { |
| | | contractorId: undefined, |
| | | contractorName: undefined, |
| | | contactPerson: undefined, |
| | | contactPhone: undefined, |
| | | contactEmail: undefined, |
| | | address: undefined, |
| | | status: "0", |
| | | remark: undefined, |
| | | }, |
| | | queryParams: { |
| | | pageNum: 1, |
| | | pageSize: 10, |
| | | contractorName: undefined, |
| | | contactPerson: undefined, |
| | | contactPhone: undefined, |
| | | status: undefined, |
| | | }, |
| | | rules: { |
| | | contractorName: [ |
| | | { required: true, message: "æ¿å
ååç§°ä¸è½ä¸ºç©º", trigger: "blur" }, |
| | | ], |
| | | contactPerson: [ |
| | | { required: true, message: "è系人ä¸è½ä¸ºç©º", trigger: "blur" }, |
| | | ], |
| | | contactPhone: [ |
| | | { required: true, message: "èç³»çµè¯ä¸è½ä¸ºç©º", trigger: "blur" }, |
| | | { pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请è¾å
¥æ£ç¡®çææºå·ç ", trigger: "blur" }, |
| | | ], |
| | | contactEmail: [ |
| | | { type: "email", message: "请è¾å
¥æ£ç¡®çé®ç®±å°å", trigger: ["blur", "change"] }, |
| | | ], |
| | | address: [ |
| | | { required: true, message: "å°åä¸è½ä¸ºç©º", trigger: "blur" }, |
| | | ], |
| | | }, |
| | | }); |
| | | |
| | | const { queryParams, form, rules } = toRefs(data); |
| | | |
| | | // æ¨¡ææ°æ® |
| | | const mockContractors = [ |
| | | { |
| | | contractorId: 1, |
| | | contractorName: "å京建工éå¢", |
| | | contactPerson: "å¼ ä¸", |
| | | contactPhone: "13800138001", |
| | | contactEmail: "zhangsan@example.com", |
| | | address: "åäº¬å¸æé³åºå»ºå½è·¯88å·", |
| | | status: "0", |
| | | createTime: "2024-01-01 10:00:00", |
| | | remark: "大åå»ºçæ½å·¥ä¼ä¸", |
| | | }, |
| | | { |
| | | contractorId: 2, |
| | | contractorName: "䏿µ·å建éå¢", |
| | | contactPerson: "æå", |
| | | contactPhone: "13800138002", |
| | | contactEmail: "lisi@example.com", |
| | | address: "䏿µ·å¸æµ¦ä¸æ°åºä¸çºªå¤§é100å·", |
| | | status: "0", |
| | | createTime: "2024-01-02 10:00:00", |
| | | remark: "åå¸åºç¡è®¾æ½å»ºè®¾ä¼ä¸", |
| | | }, |
| | | { |
| | | contractorId: 3, |
| | | contractorName: "广å·å»ºçéå¢", |
| | | contactPerson: "çäº", |
| | | contactPhone: "13800138003", |
| | | contactEmail: "wangwu@example.com", |
| | | address: "广å·å¸å¤©æ²³åºç æ±æ°åå¼æè·¯5å·", |
| | | status: "1", |
| | | createTime: "2024-01-03 10:00:00", |
| | | remark: "广ä¸çç¥å建çä¼ä¸", |
| | | }, |
| | | { |
| | | contractorId: 4, |
| | | contractorName: "æ·±å³å»ºå·¥éå¢", |
| | | contactPerson: "èµµå
", |
| | | contactPhone: "13800138004", |
| | | contactEmail: "zhaoliu@example.com", |
| | | address: "æ·±å³å¸ç¦ç°åºç¦ä¸ä¸è·¯1006å·", |
| | | status: "0", |
| | | createTime: "2024-01-04 10:00:00", |
| | | remark: "æ·±å³å¸éç¹å»ºçä¼ä¸", |
| | | }, |
| | | { |
| | | contractorId: 5, |
| | | contractorName: "æå·å»ºå·¥éå¢", |
| | | contactPerson: "åä¸", |
| | | contactPhone: "13800138005", |
| | | contactEmail: "sunqi@example.com", |
| | | address: "æå·å¸æ±å¹²åºé±æ±æ°å坿¥è·¯188å·", |
| | | status: "0", |
| | | createTime: "2024-01-05 10:00:00", |
| | | remark: "æµæ±çç¥å建çä¼ä¸", |
| | | }, |
| | | ]; |
| | | |
| | | /** æ¥è¯¢æ¿å
åå表 */ |
| | | function getList() { |
| | | loading.value = true; |
| | | // 模æAPI请æ±å»¶è¿ |
| | | setTimeout(() => { |
| | | let data = [...mockContractors]; |
| | | // 模ææç´¢è¿æ»¤ |
| | | if (queryParams.value.contractorName) { |
| | | data = data.filter(item => item.contractorName.includes(queryParams.value.contractorName)); |
| | | } |
| | | if (queryParams.value.contactPerson) { |
| | | data = data.filter(item => item.contactPerson.includes(queryParams.value.contactPerson)); |
| | | } |
| | | if (queryParams.value.contactPhone) { |
| | | data = data.filter(item => item.contactPhone.includes(queryParams.value.contactPhone)); |
| | | } |
| | | if (queryParams.value.status) { |
| | | data = data.filter(item => item.status === queryParams.value.status); |
| | | } |
| | | // 模æå页 |
| | | const start = (queryParams.value.pageNum - 1) * queryParams.value.pageSize; |
| | | const end = start + queryParams.value.pageSize; |
| | | contractorList.value = data.slice(start, end); |
| | | total.value = data.length; |
| | | loading.value = false; |
| | | }, 500); |
| | | } |
| | | |
| | | /** æç´¢æé®æä½ */ |
| | | function handleQuery() { |
| | | queryParams.value.pageNum = 1; |
| | | getList(); |
| | | } |
| | | |
| | | /** éç½®æé®æä½ */ |
| | | function resetQuery() { |
| | | Object.assign(queryParams.value, { |
| | | contractorName: undefined, |
| | | contactPerson: undefined, |
| | | contactPhone: undefined, |
| | | status: undefined, |
| | | }); |
| | | handleQuery(); |
| | | } |
| | | |
| | | /** å é¤æé®æä½ */ |
| | | function handleDelete(row) { |
| | | const contractorIds = row.contractorId || ids.value; |
| | | ElMessage.confirm(`æ¯å¦ç¡®è®¤å 餿¿å
åç¼å·ä¸º"${contractorIds}"çæ°æ®é¡¹ï¼`).then(() => { |
| | | // 模æå é¤æä½ |
| | | ElMessage.success("å 餿å"); |
| | | getList(); |
| | | }).catch(() => {}); |
| | | } |
| | | |
| | | /** ç¶æä¿®æ¹ */ |
| | | function handleStatusChange(row) { |
| | | let text = row.status === "0" ? "å¯ç¨" : "åç¨"; |
| | | ElMessage.confirm(`确认è¦"${text}""${row.contractorName}"æ¿å
åå?`).then(() => { |
| | | // 模æç¶æä¿®æ¹ |
| | | ElMessage.success(text + "æå"); |
| | | getList(); |
| | | }).catch(() => { |
| | | row.status = row.status === "0" ? "1" : "0"; |
| | | }); |
| | | } |
| | | |
| | | /** éæ©æ¡æ° */ |
| | | function handleSelectionChange(selection) { |
| | | ids.value = selection.map((item) => item.contractorId); |
| | | single.value = selection.length != 1; |
| | | multiple.value = !selection.length; |
| | | } |
| | | |
| | | /** éç½®æä½è¡¨å */ |
| | | function reset() { |
| | | form.value = { |
| | | contractorId: undefined, |
| | | contractorName: undefined, |
| | | contactPerson: undefined, |
| | | contactPhone: undefined, |
| | | contactEmail: undefined, |
| | | address: undefined, |
| | | status: "0", |
| | | remark: undefined, |
| | | }; |
| | | } |
| | | |
| | | /** åæ¶æé® */ |
| | | function cancel() { |
| | | open.value = false; |
| | | reset(); |
| | | } |
| | | |
| | | /** æ°å¢æé®æä½ */ |
| | | function handleAdd() { |
| | | reset(); |
| | | open.value = true; |
| | | title.value = "æ·»å æ¿å
å"; |
| | | } |
| | | |
| | | /** ä¿®æ¹æé®æä½ */ |
| | | function handleUpdate(row) { |
| | | reset(); |
| | | const contractorId = row.contractorId || ids.value; |
| | | // 模æè·å详æ
|
| | | const contractor = mockContractors.find(item => item.contractorId === contractorId); |
| | | if (contractor) { |
| | | form.value = { ...contractor }; |
| | | open.value = true; |
| | | title.value = "ä¿®æ¹æ¿å
å"; |
| | | } |
| | | } |
| | | |
| | | /** æäº¤æé® */ |
| | | function submitForm() { |
| | | // 模æè¡¨åéªè¯ |
| | | const requiredFields = ['contractorName', 'contactPerson', 'contactPhone', 'address']; |
| | | const isInvalid = requiredFields.some(field => !form.value[field]); |
| | | |
| | | if (isInvalid) { |
| | | ElMessage.error("请填åå¿
å¡«åæ®µ"); |
| | | return; |
| | | } |
| | | |
| | | // 模ææäº¤æä½ |
| | | ElMessage.success(title.value === "æ·»å æ¿å
å" ? "æ°å¢æå" : "ä¿®æ¹æå"); |
| | | open.value = false; |
| | | getList(); |
| | | } |
| | | |
| | | // 模æåå
¸æ°æ® |
| | | const sys_normal_disable = [ |
| | | { value: "0", label: "æ£å¸¸" }, |
| | | { value: "1", label: "ç¦ç¨" }, |
| | | ]; |
| | | |
| | | onMounted(() => { |
| | | getList(); |
| | | }); |
| | | </script> |
| | |
| | | const { VITE_APP_ENV } = env;
|
| | | const baseUrl =
|
| | | VITE_APP_ENV == "development"
|
| | | ? "http://127.0.0.1:7003" // å¼åç¯å¢å端æ¥å£
|
| | | : "http://10.136.12.71:8016"; // ç产ç¯å¢å端æ¥å£
|
| | | ? "http://127.0.0.1:8018" // å¼åç¯å¢å端æ¥å£
|
| | | : "http://10.136.12.71:8018"; // ç产ç¯å¢å端æ¥å£
|
| | |
|
| | | return {
|
| | | // é¨ç½²ç产ç¯å¢åå¼åç¯å¢ä¸çURLã
|