美军标图标 提交

src/views/equipment/equipmentModel.vue

@@ -34,9 +34,13 @@
         <el-table-column type="selection" width="55"/>
         <el-table-column type="index" label="序号" width="60"/>
         <el-table-column prop="zbTypeName" label="所属装备类型" width="120" align="center"/>
-        <el-table-column prop="zbModelName" label="装备型号名称" align="center" />
-        <el-table-column prop="zbModelRemark" label="装备型号备注" align="center" />
-        <el-table-column prop="zbModelIcon" label="美军标图标" align="center" />
+        <el-table-column prop="zbModelName" label="装备型号名称" align="center"/>
+        <el-table-column prop="zbModelRemark" label="装备型号备注" align="center"/>
+        <el-table-column prop="zbModelIcon" label="美军标图标" align="center">
+          <template slot-scope="{row}">
+            <vab-icon :icon="['fas', row.zbModelIcon]" />
+          </template>
+        </el-table-column>
         <el-table-column prop="userName" label="创建人" width="120" align="center" sortable/>
         <el-table-column prop="createTime" label="创建时间" width="180" align="center" sortable/>
         <el-table-column label="操作" fixed="right" align="center" width="100">
@@ -78,7 +82,8 @@
           <el-col :span="12">
             <el-form-item label="所属装备类型" prop="zbTypeName">
               <el-select v-model="addForm.zbTypeId" placeholder="请选择所属装备类型">
-                <el-option v-for="(item, index) in zbTypeList" :key="index" :label="item.zbTypeName" :value="item.id"></el-option>
+                <el-option v-for="(item, index) in zbTypeList" :key="index" :label="item.zbTypeName"
+                           :value="item.id"></el-option>
               </el-select>
             </el-form-item>
           </el-col>
@@ -89,9 +94,14 @@
           </el-col>
           <el-col :span="12">
             <el-form-item label="美军标图标" prop="zbModelIcon">
-              <el-select v-model="addForm.zbModelIcon" placeholder="请输入装备型号名称">
-                <el-option label="图标1" :value="1"></el-option>
-              </el-select>
+              <!--<el-select v-model="addForm.zbModelIcon" placeholder="请输入装备型号名称">-->
+              <!--  <el-option label="图标1" :value="1"></el-option>-->
+              <!--</el-select>-->
+              <el-input
+                v-model="addForm.zbModelIcon"
+                autocomplete="off"></el-input>
+              <el-button type="primary" icon="el-icon-search"
+                         class="input-btn-choose" @click="showIcon"></el-button>
             </el-form-item>
           </el-col>
           <el-col :span="24">
@@ -118,7 +128,8 @@
                 <el-table-column prop="sourceType" label="类型">
                   <template slot-scope="scope">
                     <el-select v-if="scope.row.isEditing" v-model="scope.row.sourceType">
-                      <el-option v-for="(item, index) in $getDictList('zb_filed_type')" :key="index" :label="item.dictName" :value="item.dictValue"></el-option>
+                      <el-option v-for="(item, index) in $getDictList('zb_filed_type')" :key="index"
+                                 :label="item.dictName" :value="item.dictValue"></el-option>
                     </el-select>
                     <span v-else>{{ scope.row.sourceType }}</span>
                   </template>
@@ -129,19 +140,22 @@
                       size="mini"
                       @click="dialogEdit(scope.row)"
                       v-if="!scope.row.isEditing"
-                    >编辑</el-button>
+                    >编辑
+                    </el-button>
                     <el-button
                       size="mini"
                       type="success"
                       @click="dialogSave(scope.row)"
                       v-if="scope.row.isEditing"
-                    >保存</el-button>
+                    >确定
+                    </el-button>
                     <el-button
                       size="mini"
                       type="danger"
                       @click="dialogCancle(scope.row)"
                       v-if="scope.row.isEditing"
-                    >取消</el-button>
+                    >取消
+                    </el-button>
                   </template>
                 </el-table-column>
               </el-table>
@@ -160,6 +174,12 @@
         <el-button type="primary" @click="handleAddSubmit">确 定</el-button>
       </div>
     </el-dialog>
+
+    <icon
+      v-on:icon="closeIcon"
+      ref="icon"
+    ></icon>
+
   </Container>
 </template>
 
@@ -172,9 +192,11 @@ import {
   getEquModelDetails,
   getAllEquTypes
 } from '@/api/equipment'
+import Icon from "@/components/opsli/icon/icon";
 
 export default {
   name: 'equipmentModel',
+  components: {Icon},
   data() {
     return {
       addOrUpdateTitle: '新建',
@@ -213,6 +235,13 @@ export default {
     this.getTypes()
   },
   methods: {
+    showIcon() {
+      this.$refs["icon"].showIcon();
+    },
+    // 选择完 icon 监听事件
+    closeIcon(icon){
+      this.addForm.zbModelIcon = icon;
+    },
     dialogEdit(row) {
       row.isEditing = true
     },
@@ -228,7 +257,7 @@ export default {
     // 获取所有装备类型
     getTypes() {
       getAllEquTypes().then(res => {
-        if (res.code !==0) {
+        if (res.code !== 0) {
           return
         }
         this.zbTypeList = res.data