From 28f1104e32c40273778eed24392bbf14ce03e7fe Mon Sep 17 00:00:00 2001
From: Houjie <714924425@qq.com>
Date: 星期六, 16 八月 2025 09:34:43 +0800
Subject: [PATCH] 安灯模块，相关功能表单页面样式调整
---
src/views/andon/modules/AndonResponseConfigForm.vue | 340 +++++++++++--------
src/views/andon/modules/AndonOrderForm.vue | 307 ++++++++---------
src/views/andon/modules/AndonButtonConfigForm.vue | 327 +++++++++++-------
3 files changed, 553 insertions(+), 421 deletions(-)
diff --git a/src/views/andon/modules/AndonButtonConfigForm.vue b/src/views/andon/modules/AndonButtonConfigForm.vue
index 7465026..cc47986 100644
--- a/src/views/andon/modules/AndonButtonConfigForm.vue
+++ b/src/views/andon/modules/AndonButtonConfigForm.vue
@@ -1,46 +1,59 @@
<template>
<a-spin :spinning="confirmLoading">
- <j-form-container :disabled="formDisabled">
+ <j-form-container :disabled="formDisabled" class="andon-button-form">
<a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
- <a-row>
+ <!-- 绗竴琛岋細瀹夌伅鍚嶇О + 瀹夌伅缂栫爜 -->
+ <a-row :gutter="24">
<a-col :span="12">
<a-form-model-item label="瀹夌伅鍚嶇О" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="buttonName">
- <a-input v-model="model.buttonName" placeholder="璇疯緭鍏ュ畨鐏悕绉�" ></a-input>
+ <a-input v-model="model.buttonName" placeholder="璇疯緭鍏�" />
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="瀹夌伅缂栫爜" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="buttonCode">
- <a-input v-model="model.buttonCode" placeholder="璇疯緭鍏ュ畨鐏紪鐮�" ></a-input>
+ <a-input v-model="model.buttonCode" placeholder="璇疯緭鍏�" />
+ </a-form-model-item>
+ </a-col>
+ </a-row>
+
+ <!-- 绗簩琛岋細鍗囩骇鍝嶅簲鏃堕暱 + 鍗囩骇澶勭悊鏃堕暱 -->
+ <a-row :gutter="24">
+ <a-col :span="12">
+ <a-form-model-item label="鍗囩骇鍝嶅簲" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="upgradeResponseDuration">
+ <a-input-number v-model="model.upgradeResponseDuration" placeholder="璇疯緭鍏�" style="width: 100%" />
</a-form-model-item>
</a-col>
<a-col :span="12">
- <a-form-model-item label="鍗囩骇鍝嶅簲鏃堕暱(鍒嗛挓)" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="upgradeResponseDuration">
- <a-input-number v-model="model.upgradeResponseDuration" placeholder="璇疯緭鍏ュ崌绾у搷搴旀椂闀�(鍒嗛挓)" style="width: 100%" />
+ <a-form-model-item label="鍗囩骇澶勭悊" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="upgradeProcessDuration">
+ <a-input-number v-model="model.upgradeProcessDuration" placeholder="璇疯緭鍏�" style="width: 100%" />
+ </a-form-model-item>
+ </a-col>
+ </a-row>
+
+ <!-- 绗笁琛岋細浜屾鍗囩骇鍝嶅簲鏃堕暱 + 浜屾鍗囩骇澶勭悊鏃堕暱 -->
+ <a-row :gutter="24">
+ <a-col :span="12">
+ <a-form-model-item label="浜屾鍗囩骇鍝嶅簲" :labelCol="labelColWide" :wrapperCol="wrapperColNarrow" prop="secondUpgradeResponseDuration">
+ <a-input-number v-model="model.secondUpgradeResponseDuration" placeholder="璇疯緭鍏�" style="width: 100%" />
</a-form-model-item>
</a-col>
<a-col :span="12">
- <a-form-model-item label="鍗囩骇澶勭悊鏃堕暱(鍒嗛挓)" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="upgradeProcessDuration">
- <a-input-number v-model="model.upgradeProcessDuration" placeholder="璇疯緭鍏ュ崌绾у鐞嗘椂闀�(鍒嗛挓)" style="width: 100%" />
+ <a-form-model-item label="浜屾鍗囩骇澶勭悊" :labelCol="labelColWide" :wrapperCol="wrapperColNarrow" prop="secondUpgradeProcessDuration">
+ <a-input-number v-model="model.secondUpgradeProcessDuration" placeholder="璇疯緭鍏�" style="width: 100%" />
</a-form-model-item>
</a-col>
+ </a-row>
+
+ <!-- 绗洓琛岋細瀹夌伅鎸夐挳鐘舵�� + 澶囨敞 -->
+ <a-row :gutter="24">
<a-col :span="12">
- <a-form-model-item label="浜屾鍗囩骇鍝嶅簲鏃堕暱(鍒嗛挓)" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="secondUpgradeResponseDuration">
- <a-input-number v-model="model.secondUpgradeResponseDuration" placeholder="璇疯緭鍏ヤ簩娆″崌绾у搷搴旀椂闀�(鍒嗛挓)" style="width: 100%" />
- </a-form-model-item>
- </a-col>
- <a-col :span="12">
- <a-form-model-item label="浜屾鍗囩骇澶勭悊鏃堕暱(鍒嗛挓)" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="secondUpgradeProcessDuration">
- <a-input-number v-model="model.secondUpgradeProcessDuration" placeholder="璇疯緭鍏ヤ簩娆″崌绾у鐞嗘椂闀�(鍒嗛挓)" style="width: 100%" />
- </a-form-model-item>
- </a-col>
- <a-col :span="12">
- <a-form-model-item label="瀹夌伅鎸夐挳鐘舵��" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="buttonStatus">
- <j-dict-select-tag type="list" v-model="model.buttonStatus" dictCode="button_status" placeholder="璇烽�夋嫨瀹夌伅鎸夐挳鐘舵��" />
+ <a-form-model-item label="鎸夐挳鐘舵��" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="buttonStatus">
+ <j-dict-select-tag type="list" v-model="model.buttonStatus" dictCode="button_status" placeholder="璇烽�夋嫨" />
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="澶囨敞" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="remark">
- <a-input v-model="model.remark" placeholder="璇疯緭鍏ュ娉�" ></a-input>
+ <a-input v-model="model.remark" placeholder="璇疯緭鍏�" />
</a-form-model-item>
</a-col>
</a-row>
@@ -50,111 +63,173 @@
</template>
<script>
+import { httpAction, getAction } from '@/api/manage'
+import { validateDuplicateValue } from '@/utils/util'
- import { httpAction, getAction } from '@/api/manage'
- import { validateDuplicateValue } from '@/utils/util'
-
- export default {
- name: 'AndonButtonConfigForm',
- components: {
- },
- props: {
- //琛ㄥ崟绂佺敤
- disabled: {
- type: Boolean,
- default: false,
- required: false
- }
- },
- data () {
- return {
- model:{
- },
- labelCol: {
- xs: { span: 24 },
- sm: { span: 5 },
- },
- wrapperCol: {
- xs: { span: 24 },
- sm: { span: 16 },
- },
- confirmLoading: false,
- validatorRules: {
- buttonName: [
- { required: true, message: '瀹夌伅鍚嶇О鏄繀閫夐」', trigger: 'change' }
- ],
- buttonCode: [
- { required: true, message: '瀹夌伅缂栫爜鏄繀閫夐」', trigger: 'change' }
- ],
- upgradeResponseDuration: [
- { required: true, message: '鍗囩骇鍝嶅簲鏃堕暱鏄繀閫夐」', trigger: 'change' }
- ],
- upgradeProcessDuration: [
- { required: true, message: '鍗囩骇澶勭悊鏃堕暱鏄繀閫夐」', trigger: 'change' }
- ],
- secondUpgradeResponseDuration: [
- { required: true, message: '浜屾鍗囩骇鍝嶅簲鏃堕暱鏄繀閫夐」', trigger: 'change' }
- ],
- secondUpgradeProcessDuration: [
- { required: true, message: '浜屾鍗囩骇澶勭悊鏃堕暱鏄繀閫夐」', trigger: 'change' }
- ],
- buttonStatus: [
- { required: true, message: '瀹夌伅鎸夐挳鐘舵�佹槸蹇呴�夐」', trigger: 'change' }
- ],
- },
- url: {
- add: "/andonbuttonconfig/andonButtonConfig/add",
- edit: "/andonbuttonconfig/andonButtonConfig/edit",
- queryById: "/andonbuttonconfig/andonButtonConfig/queryById"
- }
- }
- },
- computed: {
- formDisabled(){
- return this.disabled
- },
- },
- created () {
- //澶囦唤model鍘熷鍊�
- this.modelDefault = JSON.parse(JSON.stringify(this.model));
- },
- methods: {
- add () {
- this.edit(this.modelDefault);
- },
- edit (record) {
- this.model = Object.assign({}, record);
- this.visible = true;
- },
- submitForm () {
- const that = this;
- // 瑙﹀彂琛ㄥ崟楠岃瘉
- this.$refs.form.validate(valid => {
- if (valid) {
- that.confirmLoading = true;
- let httpurl = '';
- let method = '';
- if(!this.model.id){
- httpurl+=this.url.add;
- method = 'post';
- }else{
- httpurl+=this.url.edit;
- method = 'put';
- }
- httpAction(httpurl,this.model,method).then((res)=>{
- if(res.success){
- that.$message.success(res.message);
- that.$emit('ok');
- }else{
- that.$message.warning(res.message);
- }
- }).finally(() => {
- that.confirmLoading = false;
- })
- }
-
- })
- },
+export default {
+ name: 'AndonButtonConfigForm',
+ components: {},
+ props: {
+ disabled: {
+ type: Boolean,
+ default: false,
+ required: false
}
+ },
+ data() {
+ return {
+ model: {},
+ // 鏅�氭爣绛惧垪瀹藉害
+ labelCol: {
+ xs: { span: 24 },
+ sm: { span: 6 },
+ },
+ // 瀹芥爣绛惧垪锛堢敤浜庘�滀簩娆″崌绾у搷搴斺�濈瓑闀挎爣绛撅級
+ labelColWide: {
+ xs: { span: 24 },
+ sm: { span: 8 }, // 澧炲姞鏍囩瀹藉害
+ },
+ // 绐勮緭鍏ユ鍒楋紙閰嶅悎瀹芥爣绛撅紝淇濇寔甯冨眬骞宠 锛�
+ wrapperColNarrow: {
+ xs: { span: 24 },
+ sm: { span: 16 },
+ },
+ wrapperCol: {
+ xs: { span: 24 },
+ sm: { span: 18 },
+ },
+ confirmLoading: false,
+ validatorRules: {
+ buttonName: [
+ { required: true, message: '瀹夌伅鍚嶇О鏄繀閫夐」', trigger: 'change' }
+ ],
+ buttonCode: [
+ { required: true, message: '瀹夌伅缂栫爜鏄繀閫夐」', trigger: 'change' }
+ ],
+ upgradeResponseDuration: [
+ { required: true, message: '鍗囩骇鍝嶅簲鏃堕暱鏄繀閫夐」', trigger: 'change' }
+ ],
+ upgradeProcessDuration: [
+ { required: true, message: '鍗囩骇澶勭悊鏃堕暱鏄繀閫夐」', trigger: 'change' }
+ ],
+ secondUpgradeResponseDuration: [
+ { required: true, message: '浜屾鍗囩骇鍝嶅簲鏃堕暱鏄繀閫夐」', trigger: 'change' }
+ ],
+ secondUpgradeProcessDuration: [
+ { required: true, message: '浜屾鍗囩骇澶勭悊鏃堕暱鏄繀閫夐」', trigger: 'change' }
+ ],
+ buttonStatus: [
+ { required: true, message: '瀹夌伅鎸夐挳鐘舵�佹槸蹇呴�夐」', trigger: 'change' }
+ ],
+ },
+ url: {
+ add: '/andonbuttonconfig/andonButtonConfig/add',
+ edit: '/andonbuttonconfig/andonButtonConfig/edit',
+ queryById: '/andonbuttonconfig/andonButtonConfig/queryById'
+ }
+ }
+ },
+ computed: {
+ formDisabled() {
+ return this.disabled
+ },
+ },
+ created() {
+ this.modelDefault = JSON.parse(JSON.stringify(this.model));
+ },
+ methods: {
+ add() {
+ this.edit(this.modelDefault);
+ },
+ edit(record) {
+ this.model = Object.assign({}, record);
+ this.visible = true;
+ },
+ submitForm() {
+ const that = this;
+ this.$refs.form.validate(valid => {
+ if (valid) {
+ that.confirmLoading = true;
+ let httpurl = '';
+ let method = '';
+ if (!this.model.id) {
+ httpurl += this.url.add;
+ method = 'post';
+ } else {
+ httpurl += this.url.edit;
+ method = 'put';
+ }
+ httpAction(httpurl, this.model, method).then((res) => {
+ if (res.success) {
+ that.$message.success(res.message);
+ that.$emit('ok');
+ } else {
+ that.$message.warning(res.message);
+ }
+ }).finally(() => {
+ that.confirmLoading = false;
+ })
+ }
+ })
+ },
}
-</script>
\ No newline at end of file
+}
+</script>
+
+<style scoped>
+.andon-button-form {
+ padding: 24px;
+ background-color: #fff;
+ border-radius: 8px;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+/* 缁熶竴琛ㄥ崟椤瑰瀭鐩撮棿璺� */
+.a-form-model-item {
+ margin-bottom: 16px !important;
+}
+
+/* 鏍囩涓庤緭鍏ユ姘村钩闂磋窛锛堣В鍐虫枃瀛楁嫢鎸わ級 */
+.a-form-model-item-label {
+ margin-right: 12px !important;
+}
+
+/* 杈撳叆妗� & 鏁板瓧杈撳叆妗� 鍗犱綅绗︽牱寮忎紭鍖� */
+.a-input::placeholder,
+.a-input-number::placeholder {
+ color: #ccc;
+ font-style: italic;
+}
+
+/* 蹇呴�夋爣绛剧殑绾㈣壊鏄熷彿寮鸿皟 */
+.a-form-model-item-label > span:first-child {
+ color: #f5222d;
+ margin-right: 2px;
+}
+
+/* 鎸夐挳鍖哄煙鍙冲榻� & 鎸夐挳鏍峰紡浼樺寲 */
+.a-form-footer {
+ text-align: right;
+ margin-top: 32px;
+}
+
+.a-button-primary {
+ background-color: #1890ff;
+ border-color: #1890ff;
+ transition: all 0.3s ease;
+}
+
+.a-button-primary:hover {
+ background-color: #40a9ff;
+ border-color: #40a9ff;
+}
+
+.a-button-default {
+ border-color: #d9d9d9;
+ transition: all 0.3s ease;
+}
+
+.a-button-default:hover {
+ border-color: #bfbfbf;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/andon/modules/AndonOrderForm.vue b/src/views/andon/modules/AndonOrderForm.vue
index 84fff50..5950cf1 100644
--- a/src/views/andon/modules/AndonOrderForm.vue
+++ b/src/views/andon/modules/AndonOrderForm.vue
@@ -1,76 +1,58 @@
<template>
<a-spin :spinning="confirmLoading">
- <j-form-container :disabled="formDisabled">
+ <j-form-container :disabled="formDisabled" class="andon-order-form">
<a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
- <a-row>
- <a-col :span="24">
+ <!-- 绗竴琛岋細浜х嚎 + 瀹夌伅绫诲瀷 -->
+ <a-row :gutter="24">
+ <a-col :span="12">
<a-form-model-item label="浜х嚎" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="factoryId">
- <a-row :gutter="24">
- <a-col :span="24">
- <a-form-item
- :labelCol="labelCol"
- :wrapperCol="wrapperCol"
- label=""
- >
- <j-select-factory
- :disabled="disabled"
- v-model="model.factoryId"
- :multi="true"
- @back="backFactoryInfo"
- :backProduction="true"
- :treeProductOpera="true"
- ></j-select-factory>
- </a-form-item>
- </a-col>
- </a-row>
+ <j-select-factory
+ :disabled="disabled"
+ v-model="model.factoryId"
+ :multi="true"
+ @back="backFactoryInfo"
+ :backProduction="true"
+ :treeProductOpera="true"
+ ></j-select-factory>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="瀹夌伅绫诲瀷" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="buttonId">
- <j-search-select-tag v-model="model.buttonId" placeholder="璇疯緭鍏ュ畨鐏被鍨�"
- dict="andon_button_config,button_name,id"></j-search-select-tag>
+ <j-search-select-tag v-model="model.buttonId" placeholder="璇疯緭鍏ュ畨鐏被鍨�" dict="andon_button_config,button_name,id"></j-search-select-tag>
</a-form-model-item>
</a-col>
+ </a-row>
+
+ <!-- 绗簩琛岋細瀹夌伅浜� + 瀹夌伅鏃堕棿 -->
+ <a-row :gutter="24">
<a-col :span="12">
<a-form-model-item label="瀹夌伅浜�" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="operator">
- <j-select-user-by-dep :multi="false" v-model="model.operator" placeholder="璇疯緭鍏ュ畨鐏汉" ></j-select-user-by-dep>
+ <j-select-user-by-dep :multi="false" v-model="model.operator" placeholder="璇烽�夋嫨瀹夌伅浜�"></j-select-user-by-dep>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="瀹夌伅鏃堕棿" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="operateTime">
- <j-date placeholder="璇烽�夋嫨瀹夌伅鏃堕棿" v-model="model.operateTime" :show-time="true" date-format="YYYY-MM-DD HH:mm:ss" style="width: 100%" />
+ <j-date placeholder="璇烽�夋嫨瀹夌伅鏃堕棿" v-model="model.operateTime" :show-time="true" date-format="YYYY-MM-DD HH:mm:ss" style="width: 100%" />
</a-form-model-item>
</a-col>
+ </a-row>
+
+ <!-- 绗笁琛岋細瀹夌伅绛夌骇 + 瀹夌伅鐘舵�� -->
+ <a-row :gutter="24">
<a-col :span="12">
<a-form-model-item label="瀹夌伅绛夌骇" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="andonLevel">
<j-dict-select-tag type="list" v-model="model.andonLevel" dictCode="andon_level" placeholder="璇烽�夋嫨瀹夌伅绛夌骇" />
</a-form-model-item>
</a-col>
-<!-- <a-col :span="12">-->
-<!-- <a-form-model-item label="鍝嶅簲浜�" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="responder">-->
-<!-- <j-select-user-by-dep v-model="model.responder" placeholder="璇疯緭鍏ュ搷搴斾汉" ></j-select-user-by-dep>-->
-<!-- </a-form-model-item>-->
-<!-- </a-col>-->
-<!-- <a-col :span="12">-->
-<!-- <a-form-model-item label="鍝嶅簲鏃堕棿" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="responseTime">-->
-<!-- <j-date placeholder="璇烽�夋嫨鍝嶅簲鏃堕棿" v-model="model.responseTime" :show-time="true" date-format="YYYY-MM-DD HH:mm:ss" style="width: 100%" />-->
-<!-- </a-form-model-item>-->
-<!-- </a-col>-->
-<!-- <a-col :span="12">-->
-<!-- <a-form-model-item label="澶勭悊浜�" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="processor">-->
-<!-- <j-select-user-by-dep v-model="model.processor" placeholder="璇疯緭鍏ュ鐞嗕汉" ></j-select-user-by-dep>-->
-<!-- </a-form-model-item>-->
-<!-- </a-col>-->
-<!-- <a-col :span="12">-->
-<!-- <a-form-model-item label="澶勭悊瀹屾垚鏃堕棿" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="processTime">-->
-<!-- <j-date placeholder="璇烽�夋嫨澶勭悊瀹屾垚鏃堕棿" v-model="model.processTime" :show-time="true" date-format="YYYY-MM-DD HH:mm:ss" style="width: 100%" />-->
-<!-- </a-form-model-item>-->
-<!-- </a-col>-->
<a-col :span="12">
<a-form-model-item label="瀹夌伅鐘舵��" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="orderStatus">
<j-dict-select-tag type="list" v-model="model.orderStatus" dictCode="order_status" placeholder="璇烽�夋嫨瀹夌伅鐘舵��" />
</a-form-model-item>
</a-col>
+ </a-row>
+
+ <!-- 绗洓琛岋細闂鎻忚堪 + 澶勭悊缁撴灉鎻忚堪 -->
+ <a-row :gutter="24">
<a-col :span="12">
<a-form-model-item label="闂鎻忚堪" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="problemDescreption">
<a-textarea v-model="model.problemDescreption" rows="4" placeholder="璇疯緭鍏ラ棶棰樻弿杩�" />
@@ -81,9 +63,13 @@
<a-textarea v-model="model.resolutionDescreption" rows="4" placeholder="璇疯緭鍏ュ鐞嗙粨鏋滄弿杩�" />
</a-form-model-item>
</a-col>
+ </a-row>
+
+ <!-- 绗簲琛岋細澶勭悊缁撴灉鍥剧墖 -->
+ <a-row :gutter="24">
<a-col :span="12">
<a-form-model-item label="澶勭悊缁撴灉鍥剧墖" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="imageFiles">
- <j-image-upload isMultiple v-model="model.imageFiles" ></j-image-upload>
+ <j-image-upload isMultiple v-model="model.imageFiles"></j-image-upload>
</a-form-model-item>
</a-col>
</a-row>
@@ -93,117 +79,124 @@
</template>
<script>
+import { httpAction, getAction } from '@/api/manage'
+import { validateDuplicateValue } from '@/utils/util'
+import JSelectFactory from '@comp/jeecgbiz/JSelectFactory.vue'
- import { httpAction, getAction } from '@/api/manage'
- import { validateDuplicateValue } from '@/utils/util'
- import JSelectFactory from '@comp/jeecgbiz/JSelectFactory.vue'
-
- export default {
- name: 'AndonOrderForm',
- components: {
- JSelectFactory
- },
- props: {
- //琛ㄥ崟绂佺敤
- disabled: {
- type: Boolean,
- default: false,
- required: false
- }
- },
- data () {
- return {
- model:{
- },
- labelCol: {
- xs: { span: 24 },
- sm: { span: 5 },
- },
- wrapperCol: {
- xs: { span: 24 },
- sm: { span: 16 },
- },
- confirmLoading: false,
- validatorRules: {
- factoryId: [
- { required: true, message: '浜х嚎鏄繀閫夐」', trigger: 'change' }
- ],
- buttonId: [
- { required: true, message: '瀹夌伅绫诲瀷鏄繀閫夐」', trigger: 'change' }
- ],
- operator: [
- { required: true, message: '瀹夌伅浜烘槸蹇呴�夐」', trigger: 'change' }
- ],
- operateTime: [
- { required: true, message: '瀹夌伅鏃堕棿鏄繀閫夐」', trigger: 'change' }
- ],
- andonLevel: [
- { required: true, message: '瀹夌伅绛夌骇鏄繀閫夐」', trigger: 'change' }
- ],
- orderStatus: [
- { required: true, message: '瀹夌伅鐘舵�佹槸蹇呴�夐」', trigger: 'change' }
- ],
- },
- url: {
- add: "/andonorder/andonOrder/add",
- edit: "/andonorder/andonOrder/edit",
- queryById: "/andonorder/andonOrder/queryById"
- }
- }
- },
- computed: {
- formDisabled(){
- return this.disabled
- },
- },
- created () {
- //澶囦唤model鍘熷鍊�
- this.modelDefault = JSON.parse(JSON.stringify(this.model));
- },
- methods: {
- backFactoryInfo(info) {
- this.model.factoryIds = this.model.factoryId
- this.nextFactoryOptions = info.map((item, index, arr) => {
- let c = { label: item.text, value: item.value + '' }
- return c
- })
- },
- add () {
- this.edit(this.modelDefault);
- },
- edit (record) {
- this.model = Object.assign({}, record);
- this.visible = true;
- },
- submitForm () {
- const that = this;
- // 瑙﹀彂琛ㄥ崟楠岃瘉
- this.$refs.form.validate(valid => {
- if (valid) {
- that.confirmLoading = true;
- let httpurl = '';
- let method = '';
- if(!this.model.id){
- httpurl+=this.url.add;
- method = 'post';
- }else{
- httpurl+=this.url.edit;
- method = 'put';
- }
- httpAction(httpurl,this.model,method).then((res)=>{
- if(res.success){
- that.$message.success(res.message);
- that.$emit('ok');
- }else{
- that.$message.warning(res.message);
- }
- }).finally(() => {
- that.confirmLoading = false;
- })
- }
-
- })
- },
+export default {
+ name: 'AndonOrderForm',
+ components: {
+ JSelectFactory
+ },
+ props: {
+ disabled: {
+ type: Boolean,
+ default: false,
+ required: false
}
+ },
+ data() {
+ return {
+ model: {},
+ labelCol: {
+ xs: { span: 24 },
+ sm: { span: 6 }, // 璋冩暣鏍囩瀹藉害锛屾洿绱у噾
+ },
+ wrapperCol: {
+ xs: { span: 24 },
+ sm: { span: 16 },
+ },
+ confirmLoading: false,
+ validatorRules: {
+ factoryId: [{ required: true, message: '浜х嚎鏄繀閫夐」', trigger: 'change' }],
+ buttonId: [{ required: true, message: '瀹夌伅绫诲瀷鏄繀閫夐」', trigger: 'change' }],
+ operator: [{ required: true, message: '瀹夌伅浜烘槸蹇呴�夐」', trigger: 'change' }],
+ operateTime: [{ required: true, message: '瀹夌伅鏃堕棿鏄繀閫夐」', trigger: 'change' }],
+ andonLevel: [{ required: true, message: '瀹夌伅绛夌骇鏄繀閫夐」', trigger: 'change' }],
+ orderStatus: [{ required: true, message: '瀹夌伅鐘舵�佹槸蹇呴�夐」', trigger: 'change' }],
+ },
+ url: {
+ add: '/andonorder/andonOrder/add',
+ edit: '/andonorder/andonOrder/edit',
+ queryById: '/andonorder/andonOrder/queryById'
+ }
+ }
+ },
+ computed: {
+ formDisabled() {
+ return this.disabled
+ },
+ },
+ created() {
+ this.modelDefault = JSON.parse(JSON.stringify(this.model));
+ },
+ methods: {
+ backFactoryInfo(info) {
+ this.model.factoryIds = this.model.factoryId
+ this.nextFactoryOptions = info.map((item, index, arr) => {
+ let c = { label: item.text, value: item.value + '' }
+ return c
+ })
+ },
+ add() {
+ this.edit(this.modelDefault);
+ },
+ edit(record) {
+ this.model = Object.assign({}, record);
+ this.visible = true;
+ },
+ submitForm() {
+ const that = this;
+ this.$refs.form.validate(valid => {
+ if (valid) {
+ that.confirmLoading = true;
+ let httpurl = '';
+ let method = '';
+ if (!this.model.id) {
+ httpurl += this.url.add;
+ method = 'post';
+ } else {
+ httpurl += this.url.edit;
+ method = 'put';
+ }
+ httpAction(httpurl, this.model, method).then((res) => {
+ if (res.success) {
+ that.$message.success(res.message);
+ that.$emit('ok');
+ } else {
+ that.$message.warning(res.message);
+ }
+ }).finally(() => {
+ that.confirmLoading = false;
+ })
+ }
+ })
+ },
}
-</script>
\ No newline at end of file
+}
+</script>
+
+<style scoped>
+.andon-order-form {
+ padding: 24px;
+ background-color: #fff;
+ border-radius: 8px;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+/* 缁熶竴琛ㄥ崟椤归棿璺� */
+.a-form-model-item {
+ margin-bottom: 16px !important;
+}
+/* 璋冩暣鏂囨湰鍩熼珮搴﹀拰鍗犱綅绗︽牱寮� */
+.a-textarea {
+ resize: vertical;
+}
+.a-textarea::placeholder {
+ color: #ccc;
+}
+/* 鎸夐挳鍖哄煙鍙冲榻� */
+.a-form-footer {
+ text-align: right;
+ margin-top: 24px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/andon/modules/AndonResponseConfigForm.vue b/src/views/andon/modules/AndonResponseConfigForm.vue
index 131a263..e9cbdc2 100644
--- a/src/views/andon/modules/AndonResponseConfigForm.vue
+++ b/src/views/andon/modules/AndonResponseConfigForm.vue
@@ -1,49 +1,73 @@
<template>
<a-spin :spinning="confirmLoading">
- <j-form-container :disabled="formDisabled">
+ <j-form-container :disabled="formDisabled" class="andon-response-form">
<a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
- <a-row>
- <a-col :span="24">
+
+ <a-row :gutter="24">
+ <a-col :span="12">
<a-form-model-item label="浜х嚎" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="factoryId">
- <a-row :gutter="24">
- <a-col :span="24">
- <a-form-item
- :labelCol="labelCol"
- :wrapperCol="wrapperCol"
- label=""
- >
- <j-select-factory
- :disabled="disabled"
- v-model="model.factoryId"
- :multi="true"
- @back="backFactoryInfo"
- :backProduction="true"
- :treeProductOpera="true"
- ></j-select-factory>
- </a-form-item>
- </a-col>
- </a-row>
+ <j-select-factory
+ :disabled="disabled"
+ v-model="model.factoryId"
+ :multi="true"
+ @back="backFactoryInfo"
+ :backProduction="true"
+ :treeProductOpera="true"
+ ></j-select-factory>
</a-form-model-item>
</a-col>
+ </a-row>
+
+
+ <a-row :gutter="24">
<a-col :span="12">
<a-form-model-item label="瀹夌伅绫诲瀷" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="buttonId">
- <j-search-select-tag v-model="model.buttonId" placeholder="璇疯緭鍏ュ畨鐏被鍨�"
- dict="andon_button_config,button_name,id"></j-search-select-tag>
+ <j-search-select-tag
+ v-model="model.buttonId"
+ placeholder="璇烽�夋嫨"
+ dict="andon_button_config,button_name,id"
+ ></j-search-select-tag>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="鍒濆鍝嶅簲浜�" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="firsterResponder">
- <j-select-user-by-dep :multi="false" v-model="model.firsterResponder" placeholder="璇疯緭鍏ュ垵濮嬪搷搴斾汉" ></j-select-user-by-dep>
+ <j-select-user-by-dep
+ :multi="false"
+ v-model="model.firsterResponder"
+ placeholder="璇烽�夋嫨"
+ ></j-select-user-by-dep>
+ </a-form-model-item>
+ </a-col>
+ </a-row>
+
+ <!-- 浜岀骇鍝嶅簲浜� + 涓夌骇鍝嶅簲浜� -->
+ <a-row :gutter="24">
+ <a-col :span="12">
+ <a-form-model-item
+ label="浜岀骇鍝嶅簲浜�"
+ :labelCol="labelCol"
+ :wrapperCol="wrapperCol"
+ prop="secondResponder"
+ >
+ <j-select-user-by-dep
+ :multi="false"
+ v-model="model.secondResponder"
+ placeholder="璇烽�夋嫨"
+ ></j-select-user-by-dep>
</a-form-model-item>
</a-col>
<a-col :span="12">
- <a-form-model-item label="浜岀骇鍝嶅簲浜�(鍗囩骇涓�娆�)" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="secondResponder">
- <j-select-user-by-dep :multi="false" v-model="model.secondResponder" placeholder="璇疯緭鍏ヤ簩绾у搷搴斾汉(鍗囩骇涓�娆�)" ></j-select-user-by-dep>
- </a-form-model-item>
- </a-col>
- <a-col :span="12">
- <a-form-model-item label="涓夌骇鍝嶅簲浜�(鍗囩骇涓ゆ)" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="thirdResponder">
- <j-select-user-by-dep :multi="false" v-model="model.thirdResponder" placeholder="璇疯緭鍏ヤ笁绾у搷搴斾汉(鍗囩骇涓ゆ)" ></j-select-user-by-dep>
+ <a-form-model-item
+ label="涓夌骇鍝嶅簲浜�"
+ :labelCol="labelCol"
+ :wrapperCol="wrapperCol"
+ prop="thirdResponder"
+ >
+ <j-select-user-by-dep
+ :multi="false"
+ v-model="model.thirdResponder"
+ placeholder="璇烽�夋嫨"
+ ></j-select-user-by-dep>
</a-form-model-item>
</a-col>
</a-row>
@@ -53,113 +77,153 @@
</template>
<script>
+import { httpAction } from '@/api/manage'
+import JSelectFactory from '@comp/jeecgbiz/JSelectFactory.vue'
- import { httpAction, getAction } from '@/api/manage'
- import { validateDuplicateValue } from '@/utils/util'
- import JSelectFactory from '@comp/jeecgbiz/JSelectFactory.vue'
- export default {
- name: 'AndonResponseConfigForm',
- components: {
- JSelectFactory
- },
- props: {
- //琛ㄥ崟绂佺敤
- disabled: {
- type: Boolean,
- default: false,
- required: false
- }
- },
- data () {
- return {
- model:{
- },
- labelCol: {
- xs: { span: 24 },
- sm: { span: 5 },
- },
- wrapperCol: {
- xs: { span: 24 },
- sm: { span: 16 },
- },
- confirmLoading: false,
- validatorRules: {
- factoryId: [
- { required: true, message: '浜х嚎鏄繀閫夐」', trigger: 'change' }
- ],
- buttonId: [
- { required: true, message: '瀹夌伅绫诲瀷鏄繀閫夐」', trigger: 'change' }
- ],
- firsterResponder: [
- { required: true, message: '鍒濆鍝嶅簲浜烘槸蹇呴�夐」', trigger: 'change' }
- ],
- secondResponder: [
- { required: true, message: '浜岀骇鍝嶅簲浜烘槸蹇呴�夐」', trigger: 'change' }
- ],
- thirdResponder: [
- { required: true, message: '涓夌骇鍝嶅簲浜烘槸蹇呴�夐」', trigger: 'change' }
- ],
- },
- url: {
- add: "/andonresponseconfig/andonResponseConfig/add",
- edit: "/andonresponseconfig/andonResponseConfig/edit",
- queryById: "/andonresponseconfig/andonResponseConfig/queryById"
- }
- }
- },
- computed: {
- formDisabled(){
- return this.disabled
- },
- },
- created () {
- //澶囦唤model鍘熷鍊�
- this.modelDefault = JSON.parse(JSON.stringify(this.model));
- },
- methods: {
- backFactoryInfo(info) {
- this.model.factoryIds = this.model.factoryId
- this.nextFactoryOptions = info.map((item, index, arr) => {
- let c = { label: item.text, value: item.value + '' }
- return c
- })
- },
- add () {
- this.edit(this.modelDefault);
- },
- edit (record) {
- this.model = Object.assign({}, record);
- this.visible = true;
- },
- submitForm () {
- const that = this;
- // 瑙﹀彂琛ㄥ崟楠岃瘉
- this.$refs.form.validate(valid => {
- if (valid) {
- that.confirmLoading = true;
- let httpurl = '';
- let method = '';
- if(!this.model.id){
- httpurl+=this.url.add;
- method = 'post';
- }else{
- httpurl+=this.url.edit;
- method = 'put';
- }
- httpAction(httpurl,this.model,method).then((res)=>{
- if(res.success){
- that.$message.success(res.message);
- that.$emit('ok');
- }else{
- that.$message.warning(res.message);
- }
- }).finally(() => {
- that.confirmLoading = false;
- })
- }
-
- })
- },
+export default {
+ name: 'AndonResponseConfigForm',
+ components: {
+ JSelectFactory
+ },
+ props: {
+ disabled: {
+ type: Boolean,
+ default: false,
+ required: false
}
+ },
+ data () {
+ return {
+ model: {},
+ // 缁熶竴鏍囩鍒楀搴︼紙浜х嚎銆佸畨鐏被鍨嬬瓑鍏辩敤锛�
+ labelCol: {
+ xs: { span: 24 },
+ sm: { span: 6 },
+ },
+ // 缁熶竴杈撳叆妗嗗垪瀹藉害
+ wrapperCol: {
+ xs: { span: 24 },
+ sm: { span: 18 },
+ },
+ confirmLoading: false,
+ validatorRules: {
+ factoryId: [
+ { required: true, message: '浜х嚎鏄繀閫夐」', trigger: 'change' }
+ ],
+ buttonId: [
+ { required: true, message: '瀹夌伅绫诲瀷鏄繀閫夐」', trigger: 'change' }
+ ],
+ firsterResponder: [
+ { required: true, message: '鍒濆鍝嶅簲浜烘槸蹇呴�夐」', trigger: 'change' }
+ ],
+ secondResponder: [
+ { required: true, message: '浜岀骇鍝嶅簲浜烘槸蹇呴�夐」', trigger: 'change' }
+ ],
+ thirdResponder: [
+ { required: true, message: '涓夌骇鍝嶅簲浜烘槸蹇呴�夐」', trigger: 'change' }
+ ],
+ },
+ url: {
+ add: "/andonresponseconfig/andonResponseConfig/add",
+ edit: "/andonresponseconfig/andonResponseConfig/edit",
+ queryById: "/andonresponseconfig/andonResponseConfig/queryById"
+ }
+ }
+ },
+ computed: {
+ formDisabled(){
+ return this.disabled
+ },
+ },
+ created () {
+ this.modelDefault = JSON.parse(JSON.stringify(this.model));
+ },
+ methods: {
+ backFactoryInfo(info) {
+ this.model.factoryIds = this.model.factoryId
+ this.nextFactoryOptions = info.map((item, index, arr) => {
+ let c = { label: item.text, value: item.value + '' }
+ return c
+ })
+ },
+ add () {
+ this.edit(this.modelDefault);
+ },
+ edit (record) {
+ this.model = Object.assign({}, record);
+ this.visible = true;
+ },
+ submitForm () {
+ const that = this;
+ this.$refs.form.validate(valid => {
+ if (valid) {
+ that.confirmLoading = true;
+ let httpurl = '';
+ let method = '';
+ if(!this.model.id){
+ httpurl+=this.url.add;
+ method = 'post';
+ }else{
+ httpurl+=this.url.edit;
+ method = 'put';
+ }
+ httpAction(httpurl,this.model,method).then((res)=>{
+ if(res.success){
+ that.$message.success(res.message);
+ that.$emit('ok');
+ }else{
+ that.$message.warning(res.message);
+ }
+ }).finally(() => {
+ that.confirmLoading = false;
+ })
+ }
+ })
+ },
}
-</script>
\ No newline at end of file
+}
+</script>
+
+<style scoped>
+.andon-response-form {
+ padding: 24px;
+ background-color: #fff;
+ border-radius: 8px;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+.a-form-model-item {
+ margin-bottom: 20px !important;
+}
+.a-form-model-item-label {
+ margin-right: 16px !important;
+}
+.a-input::placeholder,
+.a-select-selection-placeholder {
+ color: #ccc;
+ font-style: italic;
+}
+.a-form-model-item-label > span:first-child {
+ color: #f5222d;
+ margin-right: 4px;
+}
+.a-form-footer {
+ text-align: right;
+ margin-top: 36px;
+}
+.a-button-primary {
+ background-color: #1890ff;
+ border-color: #1890ff;
+ transition: all 0.3s ease;
+}
+.a-button-primary:hover {
+ background-color: #40a9ff;
+ border-color: #40a9ff;
+}
+.a-button-default {
+ border-color: #d9d9d9;
+ transition: all 0.3s ease;
+}
+.a-button-default:hover {
+ border-color: #bfbfbf;
+}
+</style>
\ No newline at end of file
--
Gitblit v1.9.3