完成硬件信息部分页面剩余内容

src/views/mes/hw/information/index.vue

@@ -8,53 +8,54 @@
       v-show="showSearch"
       label-width="100px"
     >
-      <el-form-item label="硬件编码" prop="repairCode">
-        <el-input
-          v-model="queryParams.repairCode"
-          placeholder="请输入硬件编码"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="硬件名称" prop="repairName">
-        <el-input
-          v-model="queryParams.repairName"
-          placeholder="请输入硬件名称"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-
-      <el-form-item label="状态" prop="status">
-        <el-select
-          v-model="queryParams.status"
-          placeholder="请选择硬件状态"
-          clearable
-        >
-          <el-option
-            v-for="dict in dict.type.mes_order_status"
-            :key="dict.value"
-            :label="dict.label"
-            :value="dict.value"
+      <el-row>
+        <el-form-item label="硬件编码" prop="repairCode">
+          <el-input
+            v-model="queryParams.repairCode"
+            placeholder="请输入硬件编码"
+            clearable
+            @keyup.enter.native="handleQuery"
           />
-        </el-select>
-      </el-form-item>
-
-      <el-form-item label="硬件类型" prop="status">
-        <el-select
-          v-model="queryParams.status"
-          placeholder="请选择硬件类型"
-          clearable
-        >
-          <el-option
-            v-for="dict in dict.type.mes_order_status"
-            :key="dict.value"
-            :label="dict.label"
-            :value="dict.value"
+        </el-form-item>
+        <el-form-item label="硬件名称" prop="repairName">
+          <el-input
+            v-model="queryParams.repairName"
+            placeholder="请输入硬件名称"
+            clearable
+            @keyup.enter.native="handleQuery"
           />
-        </el-select>
-      </el-form-item>
+        </el-form-item>
 
+        <el-form-item label="状态" prop="status">
+          <el-select
+            v-model="queryParams.status"
+            placeholder="请选择硬件状态"
+            clearable
+          >
+            <el-option
+              v-for="dict in dict.type.mes_order_status"
+              :key="dict.value"
+              :label="dict.label"
+              :value="dict.value"
+            />
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="硬件类型" prop="status">
+          <el-select
+            v-model="queryParams.status"
+            placeholder="请选择硬件类型"
+            clearable
+          >
+            <el-option
+              v-for="dict in dict.type.mes_order_status"
+              :key="dict.value"
+              :label="dict.label"
+              :value="dict.value"
+            />
+          </el-select>
+        </el-form-item>
+      </el-row>
       <el-form-item label="规格型号" prop="machineryCode">
         <el-input
           v-model="queryParams.machineryCode"
@@ -72,6 +73,7 @@
           start-placeholder="开始日期"
           end-placeholder="结束日期"
           align="right"
+          style="width: 540px"
         >
         </el-date-picker>
       </el-form-item>
@@ -90,7 +92,7 @@
         </el-select>
       </el-form-item>
 
-      <el-form-item>
+      <el-form-item style="margin-left: 50px">
         <el-button
           type="primary"
           icon="el-icon-search"
@@ -230,91 +232,151 @@
     />
 
     <!-- 添加或修改设备维修单对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="960px" append-to-body>
+    <el-dialog
+      :title="title"
+      :visible.sync="open"
+      width="1100px"
+      append-to-body
+    >
       <el-form ref="form" :model="form" :rules="rules" label-width="120px">
-        <el-form-item label="硬件编码" prop="repairCode">
-          <el-input v-model="form.repairCode" placeholder="请输入硬件编码" />
-        </el-form-item>
-        <el-form-item label="硬件类型" prop="status">
-          <el-select
-            v-model="queryParams.status"
-            placeholder="请选择硬件类型"
-            clearable
-          >
-            <el-option
-              v-for="dict in dict.type.mes_order_status"
-              :key="dict.value"
-              :label="dict.label"
-              :value="dict.value"
-            />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="硬件名称" prop="repairName">
-          <el-input v-model="form.repairName" placeholder="请输入硬件名称" />
-        </el-form-item>
-        <el-form-item label="规格型号" prop="repairName">
-          <el-input v-model="form.repairName" placeholder="请输入规格型号" />
-        </el-form-item>
-        <el-form-item label="启用日期" prop="requireDate">
-          <el-date-picker
-            clearable
-            v-model="form.requireDate"
-            style="width: 187px"
-            type="date"
-            value-format="yyyy-MM-dd"
-            placeholder="请选择启用日期"
-          >
-          </el-date-picker>
-        </el-form-item>
-        <el-form-item label="所属车间" prop="status">
-          <el-select
-            v-model="queryParams.status"
-            placeholder="请选择所属车间"
-            clearable
-          >
-            <el-option
-              v-for="dict in dict.type.mes_order_status"
-              :key="dict.value"
-              :label="dict.label"
-              :value="dict.value"
-            />
-          </el-select>
-        </el-form-item>
+        <el-row>
+          <el-col :span="11">
+            <el-form-item label="硬件编码" prop="repairCode">
+              <el-input
+                v-model="form.repairCode"
+                placeholder="请输入硬件编码"
+                style="width: 100%"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="11">
+            <el-form-item label="硬件类型" prop="status">
+              <el-select
+                v-model="queryParams.status"
+                placeholder="请选择硬件类型"
+                clearable
+                style="width: 100%"
+              >
+                <el-option
+                  v-for="dict in dict.type.mes_order_status"
+                  :key="dict.value"
+                  :label="dict.label"
+                  :value="dict.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="11">
+            <el-form-item label="硬件名称" prop="repairName">
+              <el-input
+                v-model="form.repairName"
+                placeholder="请输入硬件名称"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="11">
+            <el-form-item label="规格型号" prop="repairName">
+              <el-input
+                v-model="form.repairName"
+                placeholder="请输入规格型号"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="11">
+            <el-form-item label="启用日期" prop="requireDate">
+              <el-date-picker
+                clearable
+                v-model="form.requireDate"
+                style="width: 100%"
+                type="date"
+                value-format="yyyy-MM-dd"
+                placeholder="请选择启用日期"
+              >
+              </el-date-picker> </el-form-item
+          ></el-col>
+          <el-col :span="11">
+            <el-form-item label="所属车间" prop="status">
+              <el-select
+                v-model="queryParams.status"
+                placeholder="请选择所属车间"
+                clearable
+                style="width: 100%"
+              >
+                <el-option
+                  v-for="dict in dict.type.mes_order_status"
+                  :key="dict.value"
+                  :label="dict.label"
+                  :value="dict.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="11">
+            <el-form-item label="可用次数" prop="acceptedName">
+              <el-input
+                v-model="form.acceptedName"
+                readonly="readonly"
+                placeholder="请输入可用次数"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="11">
+            <el-form-item label="已用次数" prop="acceptedName">
+              <el-input
+                v-model="form.acceptedName"
+                readonly="readonly"
+                placeholder="请输入已用次数"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="11">
+            <el-form-item label="可用寿命" prop="acceptedName">
+              <el-input
+                v-model="form.acceptedName"
+                readonly="readonly"
+                placeholder="请输入可用寿命"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="11">
+            <el-form-item label="已用寿命" prop="acceptedName">
+              <el-input
+                v-model="form.acceptedName"
+                readonly="readonly"
+                placeholder="请输入已用寿命"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
 
-        <el-form-item label="可用次数" prop="acceptedName">
-          <el-input
-            v-model="form.acceptedName"
-            readonly="readonly"
-            placeholder="请输入可用次数"
-          />
-        </el-form-item>
-        <el-form-item label="已用次数" prop="acceptedName">
-          <el-input
-            v-model="form.acceptedName"
-            readonly="readonly"
-            placeholder="请输入已用次数"
-          />
+        <el-form-item label="状态" prop="acceptedName">
+          <el-radio-group v-model="radio">
+            <el-radio :label="3"
+              ><img
+                src="@/assets/images/success.png"
+                alt=""
+                class="imgstatus"
+              />
+              在线</el-radio
+            >
+            <el-radio :label="6"
+              ><img src="@/assets/images/error.png" alt="" class="imgstatus" />
+              离线</el-radio
+            >
+            <el-radio :label="9"
+              ><img src="@/assets/images/warn.png" alt="" class="imgstatus" />
+              异常</el-radio
+            >
+          </el-radio-group>
         </el-form-item>
-        <el-form-item label="可用寿命" prop="acceptedName">
-          <el-input
-            v-model="form.acceptedName"
-            readonly="readonly"
-            placeholder="请输入可用寿命"
-          />
-        </el-form-item>
-        <el-form-item label="已用寿命" prop="acceptedName">
-          <el-input
-            v-model="form.acceptedName"
-            readonly="readonly"
-            placeholder="请输入已用寿命"
-          />
-        </el-form-item>
-        <!-- <el-form-item
-          label="状态"
-          prop="acceptedName"
-        >
-        
-        </el-form-item> -->
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button
@@ -456,6 +518,8 @@ export default {
         ],
       },
       value2: "",
+      // 新增状态
+      radio: 3,
     };
   },
   created() {
@@ -609,3 +673,29 @@ export default {
   },
 };
 </script>
+<style scoped>
+.imgstatus {
+  position: relative;
+  top: 1px;
+  left: 0px;
+}
+/deep/ .el-radio__inner {
+  border-radius: 2px;
+}
+/deep/.el-radio__input.is-checked .el-radio__inner::after {
+  content: "";
+  width: 8px;
+  height: 3px;
+  border: 1px solid white;
+  border-top: transparent;
+  border-right: transparent;
+  text-align: center;
+  display: block;
+  position: absolute;
+  top: 3px;
+  left: 2px;
+  transform: rotate(-45deg);
+  border-radius: 0pc;
+  background: none;
+}
+</style>