订单消耗数量字段

imcs-ui/src/views/zuihou/runManageCenter/orderMgr/components/draftOrder/components/MeterialSelect.vue

@@ -1,399 +1,399 @@
-<!-- 【原料炉批号】选择-列表 -->
-<template>
-  <el-dialog
-  	:close-on-click-modal="false"
-  	:close-on-press-escape="false"
-  	:title="title"
-  	:append-to-body="true"
-  	:visible.sync="isVisible"
-  	width="1060px"
-  	top="50px"
-  >
-    <el-form ref="form" :model="tenant" :rules="rules" label-position="right" label-width="130px">
-
-    	<div class="filter-container">
-    	<span>
-    		<span>物料牌号：{{ material.tradeMark ? material.tradeMark : '-' }}</span>
-    	</span>
-      <span style="margin-left: 15px;">
-    		<span>器材名称：{{ material.equipmentName ? material.equipmentName : '' }}</span>
-    	</span>
-    	<span style="margin-left: 15px;">
-    		<span>规格型号：{{ material.specification ? material.specification : '' }}</span>
-    	</span>
-    	<span style="margin-left: 15px;">
-    		<span>处理状态：{{ material.handleStatus ? material.handleStatus : '' }}</span>
-    	</span>
-    </div>
-
-	    <!-- 列表数据
-	    	:expand-row-keys="expands"
-	      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
-	    -->
-	    <el-table
-	      :key="tableKey"
-	      ref="table"
-	      v-loading="loading"
-	      :data="tableData.records"
-	      border
-	      fit
-	      row-key="id"
-	      highlight-current-row
-	      style="width: 100%;"
-	      @selection-change="onSelectChange"
-	      @cell-click="cellClick"
-	    >
-	      <!-- 序号 -->
-	    	<el-table-column :label='$t("common.serialNo")' width="55px" align="center">
-		      <template slot-scope="scope">
-		        <div>
-		          {{scope.$index+(queryParams.current - 1) * queryParams.size + 1}}
-		        </div>
-		      </template>
-	      </el-table-column>
-	      <!-- CheckBox -->
-	      <el-table-column align="center" type="selection" width="50" :reserve-selection="true" />
-	      <el-table-column prop="furnaceBatchNo" label='原炉（批）号' :show-overflow-tooltip="true" width="150px"></el-table-column>
-	      <el-table-column prop="meterialCode" label='物料编码' :show-overflow-tooltip="true" width="200px"></el-table-column>
-	      <el-table-column prop="tradeMark" label='材料牌号' :show-overflow-tooltip="true" width="150px"></el-table-column>
-		  	<el-table-column prop="factory" label='供应方名称' :show-overflow-tooltip="true" width="150px"></el-table-column>
-	      <el-table-column prop="meterialBatchNo" label='毛坯批号' :show-overflow-tooltip="true" width="150px"></el-table-column>
-	      <el-table-column prop="factoryDate" label='入厂日期' :show-overflow-tooltip="true" width="150px"></el-table-column>
-	      <el-table-column prop="batchStand" label='接收数量' :show-overflow-tooltip="true" width="150px"></el-table-column>
-	      <el-table-column prop="createUser" label='操作人员' :show-overflow-tooltip="true" width="150px"></el-table-column>
-	      <el-table-column prop="createTime" label='操作时间' :show-overflow-tooltip="true" width="150px"></el-table-column>
-	      <el-table-column prop="" label='订单消耗数量' :show-overflow-tooltip="true" width="150px"></el-table-column>
-	      <!--<el-table-column v-for="item in tableData.titleList" :key="item.id" :prop="item.field" :label='item.text' :show-overflow-tooltip="true" width="180px"></el-table-column>-->
-	    </el-table>
-
-	    <!-- 【分页组件】-->
-	    <pagination
-	      v-show="tableData.total > 0"
-	      :limit.sync="queryParams.size"
-	      :page.sync="queryParams.current"
-	      :total="Number(tableData.total)"
-	      @pagination="fetch"
-	    />
-
-    </el-form>
-    <div slot="footer" class="dialog-footer">
-      <el-button plain type="warning" @click="isVisible = false">{{ $t('common.cancel') }}</el-button>
-      <el-button plain type="primary" :disabled="confirmDisabled" @click="submitForm">{{ $t('common.confirm') }}</el-button>
-    </div>
-  </el-dialog>
-</template>
-<script>
-// 【夹具管理】-API
-import trayMgrApi from "@/api/prepareProductMgr/trayMgr"
-// 【分页】组件
-import Pagination from "@/components/Pagination"
-// 【BOM管理】-API
-import bomMgrApi from "@/api/prepareProductMgr/bomMgr"
-// 【原材料接收管理】-API
-import ReceiveApi from "@/api/prepareProductMgr/receive"
-// 【原材料管理】-API
-import MaterialApi from "@/api/prepareProductMgr/material"
-// 【共通】函数
-import { initQueryParams } from '@/utils/commons'
-export default {
-  name: 'TenantEdit',
-  components: { Pagination },
-  props: {
-    dialogVisible: {
-      type: Boolean,
-      default: false
-    },
-    title: {
-      type: String,
-      default: ''
-    }
-  },
-  data () {
-    return {
-    	expands: [], // 展开行的key
-    	qiyongStatus: [], //状态
-    	statusList: [], // 启用状态
-    	queryParams: initQueryParams({}),
-    	selection: [],
-    	loading: false,
-    	tableKey: 0,
-      type: 'add',
-      tableData: {
-        total: 0
-      },
-      material: {}, // 原材料详情信息
-      tenant: this.initTenant(),
-      screenWidth: 0,
-      width: this.initWidth(),
-      confirmDisabled: false,
-      roles: [],
-      rules: {
-        name: [
-        	{ required: true, message: this.$t("rules.require"), trigger: 'blur' }
-        ]
-      }
-    }
-  },
-  // 实例已经在内存中创建好，此时data和methods已将ok,如果要操作data中的数据或是调用methods中的方法，最早只能在created中操作
-  created() {
-  	// 加载列表数据
-  	this.fetch()
-  	// 调用常量-初始化值
-  	this.qiyongStatus = this.$constWKS.AUDIOLIST;
-  	this.statusList = this.$constWKS.STATUSORTHERLIST;
-	},
-  computed: {
-    isVisible: {
-      get () {
-        return this.dialogVisible
-      },
-      set () {
-        this.close()
-        this.reset()
-      }
-    }
-  },
-  mounted () {
-    window.onresize = () => {
-      return (() => {
-        this.width = this.initWidth()
-      })()
-    }
-  },
-  methods: {
-  	// 【新增】按钮-事件
-    addRes(){
-      this.tableData.push({
-      	key: "WKS_"+ Math.random(),
-      	id: '',
-      	positionSort: this.tableData.length + 1,
-      	size: '',
-      	remark: '',
-      	isEdit: true
-      })
-    },
-    // 【搜索】按钮-事件
-    search () {
-      this.fetch({
-        ...this.queryParams
-      })
-    },
-    // Table的选择事件
-    onSelectChange (selection) {
-      this.selection = selection
-    },
-    cellClick (row, column) {
-      if (column['columnKey'] === "operation") {
-        return
-      }
-      let flag = false
-      this.selection.forEach((item) => {
-        if (item.id === row.id) {
-          flag = true
-          this.$refs.table.toggleRowSelection(row)
-        }
-      })
-
-      if (!flag) {
-        this.$refs.table.toggleRowSelection(row, true)
-      }
-    },
-    // 【删除】按钮事件
-    singleDelete(row){
-    	this.$confirm(this.$t("tips.comTips"), this.$t("common.tips"), {
-      	distinguishCancelAndClose: true,
-        confirmButtonText: this.$t("common.confirm"),
-        cancelButtonText: this.$t("common.cancel"),
-        type: "warning"
-      }).then(() => {
-      	// 过滤符合条件的数据
-      	let arr = this.tableData.filter(item => item.key != row.key || item.id != row.id)
-      	// 给数据排序
-    		arr.forEach((item, index) => {
-    			item.positionSort = index + 1
-    		})
-      	// 给新的数据赋值
-    		this.tableData = arr;
-
-      }).catch(() => {})
-    },
-    // 【修改】按钮事件
-    edit(row){
-    	let list = new Array();
-    	this.tableData.forEach((item, index) => {
-    		// 当前编辑行
-    		if(!!item.id && item.id == row.id){
-    			item.isEdit = true
-    		}
-    		list.push(item)
-    	})
-    	// 赋值给当前
-    	this.tableData = list
-    },
-    initTenant () {
-      return {
-      	model: '',
-        name: '',
-        category: {
-          key: ''
-        },
-        brand: {
-          key: ''
-        },
-        status: '1'
-      }
-    },
-    initWidth () {
-      this.screenWidth = document.body.clientWidth
-      if (this.screenWidth < 991) {
-        return '90%'
-      } else if (this.screenWidth < 1400) {
-        return '45%'
-      } else {
-        return '800px'
-      }
-    },
-    setTenant (val) {
-    	if(val){
-    		console.log("dsfsfsfas === ", val)
-    		this.tenant = { ...val };
-    		// 获取原材料详情
-    		this.getMaterial(val.meterialId);
-    		// 获取。列表
-    		this.search();
-    	}
-    },
-    
-    // 获取原材料详情
-    getMaterial(id) {
-    	MaterialApi.get({ id }).then(res=> {
-    		res = res.data;
-    		console.log("获取【原材料】详情 === ", res)
-    		if(res.code == 0) {
-    			// 如果存在，才赋值
-    			if(res.data) {
-    				this.material = res.data;
-    			}
-    		}
-    	})
-    },
-    		
-    close () {
-      this.$emit('close')
-    },
-    // 【重置】按钮-事件
-    reset () {
-    	// 初始化表单
-      this.queryParams = initQueryParams({})
-      // 清空列表选中的数据
-      this.$refs.table.clearSelection()
-    },
-    submitForm () {
-    	if(this.selection && this.selection.length == 1) {
-    		// 把选择的数据提交到父组件
-    		this.$emit("success", this.selection[0]);
-    		// 关闭弹出框
-    		this.isVisible = false
-    	} else {
-    		this.$message({
-          message: "只能选择一条数据~~",
-          type: 'warning'
-        })
-    	}
-    },
-    save () {
-      trayMgrApi.save(this.tenant)
-        .then((response) => {
-          const res = response.data
-          if (res.isSuccess) {
-            this.isVisible = false
-            this.$message({
-              message: this.$t('tips.createSuccess'),
-              type: 'success'
-            })
-            // 通知列表
-	          this.$emit("success");
-	          // 通知列表-并关闭弹出框
-	          this.$emit("close");
-          }
-        }).finally(() => {
-          this.confirmDisabled = false
-          return true
-        })
-    },
-    update () {
-      trayMgrApi.update(this.tenant)
-        .then((response) => {
-          const res = response.data
-          if (res.isSuccess) {
-            this.isVisible = false
-            this.$message({
-              message: this.$t('tips.updateSuccess'),
-              type: 'success'
-            })
-            // 通知列表
-	          this.$emit("success");
-	          // 通知列表-并关闭弹出框
-	          this.$emit("close");
-          }
-        }).finally(() => {
-          this.confirmDisabled = false
-          return true
-        })
-    },
-    fetch (params = {}) {
-      this.loading = true
-
-			// 分页信息
-      this.queryParams.current = params.current ? params.current : this.queryParams.current
-      this.queryParams.size = params.size ? params.size : this.queryParams.size
-			// 必须传的参数
-			// this.queryParams.model.auditStatus = '2'
-			// 原材料Id
-			this.queryParams.model.meterialId = this.tenant.meterialId;
-			
-			// 测试数据，真实数据，请使用page
-      ReceiveApi.page(this.queryParams).then(response => {
-      	const res = response.data
-        console.log("列表的数据111122233：", res)
-        if (res.isSuccess) {
-        	// 总数
-        	this.tableData = res.data;
-        }
-        // eslint-disable-next-line no-return-assign
-      }).finally(() => this.loading = false)
-
-    },
-  }
-}
-</script>
-<style lang="scss" >
-.avatar-uploader .el-upload {
-  border: 1px dashed #d9d9d9;
-  border-radius: 6px;
-  cursor: pointer;
-  position: relative;
-  overflow: hidden;
-}
-.avatar-uploader .el-upload:hover {
-  border-color: #409eff;
-}
-.avatar-uploader-icon {
-  font-size: 28px;
-  color: #8c939d;
-  width: 100px;
-  height: 100px;
-  line-height: 100px;
-  text-align: center;
-}
-.avatar {
-  width: 100px;
-  height: 100px;
-  display: block;
-}
-.checkUsed{
-	display: inline-block;
-	margin-left: 10px;
-	color: #1890ff;
-}
-</style>
+<!-- 【原料炉批号】选择-列表 -->
+<template>
+  <el-dialog
+  	:close-on-click-modal="false"
+  	:close-on-press-escape="false"
+  	:title="title"
+  	:append-to-body="true"
+  	:visible.sync="isVisible"
+  	width="1060px"
+  	top="50px"
+  >
+    <el-form ref="form" :model="tenant" :rules="rules" label-position="right" label-width="130px">
+
+    	<div class="filter-container">
+    	<span>
+    		<span>物料牌号：{{ material.tradeMark ? material.tradeMark : '-' }}</span>
+    	</span>
+      <span style="margin-left: 15px;">
+    		<span>器材名称：{{ material.equipmentName ? material.equipmentName : '' }}</span>
+    	</span>
+    	<span style="margin-left: 15px;">
+    		<span>规格型号：{{ material.specification ? material.specification : '' }}</span>
+    	</span>
+    	<span style="margin-left: 15px;">
+    		<span>处理状态：{{ material.handleStatus ? material.handleStatus : '' }}</span>
+    	</span>
+    </div>
+
+	    <!-- 列表数据
+	    	:expand-row-keys="expands"
+	      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
+	    -->
+	    <el-table
+	      :key="tableKey"
+	      ref="table"
+	      v-loading="loading"
+	      :data="tableData.records"
+	      border
+	      fit
+	      row-key="id"
+	      highlight-current-row
+	      style="width: 100%;"
+	      @selection-change="onSelectChange"
+	      @cell-click="cellClick"
+	    >
+	      <!-- 序号 -->
+	    	<el-table-column :label='$t("common.serialNo")' width="55px" align="center">
+		      <template slot-scope="scope">
+		        <div>
+		          {{scope.$index+(queryParams.current - 1) * queryParams.size + 1}}
+		        </div>
+		      </template>
+	      </el-table-column>
+	      <!-- CheckBox -->
+	      <el-table-column align="center" type="selection" width="50" :reserve-selection="true" />
+	      <el-table-column prop="furnaceBatchNo" label='原炉（批）号' :show-overflow-tooltip="true" width="150px"></el-table-column>
+	      <el-table-column prop="meterialCode" label='物料编码' :show-overflow-tooltip="true" width="200px"></el-table-column>
+	      <el-table-column prop="tradeMark" label='材料牌号' :show-overflow-tooltip="true" width="150px"></el-table-column>
+		  	<el-table-column prop="factory" label='供应方名称' :show-overflow-tooltip="true" width="150px"></el-table-column>
+	      <el-table-column prop="meterialBatchNo" label='毛坯批号' :show-overflow-tooltip="true" width="150px"></el-table-column>
+	      <el-table-column prop="factoryDate" label='入厂日期' :show-overflow-tooltip="true" width="150px"></el-table-column>
+	      <el-table-column prop="batchStand" label='接收数量' :show-overflow-tooltip="true" width="150px"></el-table-column>
+	      <el-table-column prop="createUser" label='操作人员' :show-overflow-tooltip="true" width="150px"></el-table-column>
+	      <el-table-column prop="createTime" label='操作时间' :show-overflow-tooltip="true" width="150px"></el-table-column>
+	      <el-table-column prop="usedNum" label='订单消耗数量' :show-overflow-tooltip="true" width="150px"></el-table-column>
+	      <!--<el-table-column v-for="item in tableData.titleList" :key="item.id" :prop="item.field" :label='item.text' :show-overflow-tooltip="true" width="180px"></el-table-column>-->
+	    </el-table>
+
+	    <!-- 【分页组件】-->
+	    <pagination
+	      v-show="tableData.total > 0"
+	      :limit.sync="queryParams.size"
+	      :page.sync="queryParams.current"
+	      :total="Number(tableData.total)"
+	      @pagination="fetch"
+	    />
+
+    </el-form>
+    <div slot="footer" class="dialog-footer">
+      <el-button plain type="warning" @click="isVisible = false">{{ $t('common.cancel') }}</el-button>
+      <el-button plain type="primary" :disabled="confirmDisabled" @click="submitForm">{{ $t('common.confirm') }}</el-button>
+    </div>
+  </el-dialog>
+</template>
+<script>
+// 【夹具管理】-API
+import trayMgrApi from "@/api/prepareProductMgr/trayMgr"
+// 【分页】组件
+import Pagination from "@/components/Pagination"
+// 【BOM管理】-API
+import bomMgrApi from "@/api/prepareProductMgr/bomMgr"
+// 【原材料接收管理】-API
+import ReceiveApi from "@/api/prepareProductMgr/receive"
+// 【原材料管理】-API
+import MaterialApi from "@/api/prepareProductMgr/material"
+// 【共通】函数
+import { initQueryParams } from '@/utils/commons'
+export default {
+  name: 'TenantEdit',
+  components: { Pagination },
+  props: {
+    dialogVisible: {
+      type: Boolean,
+      default: false
+    },
+    title: {
+      type: String,
+      default: ''
+    }
+  },
+  data () {
+    return {
+    	expands: [], // 展开行的key
+    	qiyongStatus: [], //状态
+    	statusList: [], // 启用状态
+    	queryParams: initQueryParams({}),
+    	selection: [],
+    	loading: false,
+    	tableKey: 0,
+      type: 'add',
+      tableData: {
+        total: 0
+      },
+      material: {}, // 原材料详情信息
+      tenant: this.initTenant(),
+      screenWidth: 0,
+      width: this.initWidth(),
+      confirmDisabled: false,
+      roles: [],
+      rules: {
+        name: [
+        	{ required: true, message: this.$t("rules.require"), trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  // 实例已经在内存中创建好，此时data和methods已将ok,如果要操作data中的数据或是调用methods中的方法，最早只能在created中操作
+  created() {
+  	// 加载列表数据
+  	this.fetch()
+  	// 调用常量-初始化值
+  	this.qiyongStatus = this.$constWKS.AUDIOLIST;
+  	this.statusList = this.$constWKS.STATUSORTHERLIST;
+	},
+  computed: {
+    isVisible: {
+      get () {
+        return this.dialogVisible
+      },
+      set () {
+        this.close()
+        this.reset()
+      }
+    }
+  },
+  mounted () {
+    window.onresize = () => {
+      return (() => {
+        this.width = this.initWidth()
+      })()
+    }
+  },
+  methods: {
+  	// 【新增】按钮-事件
+    addRes(){
+      this.tableData.push({
+      	key: "WKS_"+ Math.random(),
+      	id: '',
+      	positionSort: this.tableData.length + 1,
+      	size: '',
+      	remark: '',
+      	isEdit: true
+      })
+    },
+    // 【搜索】按钮-事件
+    search () {
+      this.fetch({
+        ...this.queryParams
+      })
+    },
+    // Table的选择事件
+    onSelectChange (selection) {
+      this.selection = selection
+    },
+    cellClick (row, column) {
+      if (column['columnKey'] === "operation") {
+        return
+      }
+      let flag = false
+      this.selection.forEach((item) => {
+        if (item.id === row.id) {
+          flag = true
+          this.$refs.table.toggleRowSelection(row)
+        }
+      })
+
+      if (!flag) {
+        this.$refs.table.toggleRowSelection(row, true)
+      }
+    },
+    // 【删除】按钮事件
+    singleDelete(row){
+    	this.$confirm(this.$t("tips.comTips"), this.$t("common.tips"), {
+      	distinguishCancelAndClose: true,
+        confirmButtonText: this.$t("common.confirm"),
+        cancelButtonText: this.$t("common.cancel"),
+        type: "warning"
+      }).then(() => {
+      	// 过滤符合条件的数据
+      	let arr = this.tableData.filter(item => item.key != row.key || item.id != row.id)
+      	// 给数据排序
+    		arr.forEach((item, index) => {
+    			item.positionSort = index + 1
+    		})
+      	// 给新的数据赋值
+    		this.tableData = arr;
+
+      }).catch(() => {})
+    },
+    // 【修改】按钮事件
+    edit(row){
+    	let list = new Array();
+    	this.tableData.forEach((item, index) => {
+    		// 当前编辑行
+    		if(!!item.id && item.id == row.id){
+    			item.isEdit = true
+    		}
+    		list.push(item)
+    	})
+    	// 赋值给当前
+    	this.tableData = list
+    },
+    initTenant () {
+      return {
+      	model: '',
+        name: '',
+        category: {
+          key: ''
+        },
+        brand: {
+          key: ''
+        },
+        status: '1'
+      }
+    },
+    initWidth () {
+      this.screenWidth = document.body.clientWidth
+      if (this.screenWidth < 991) {
+        return '90%'
+      } else if (this.screenWidth < 1400) {
+        return '45%'
+      } else {
+        return '800px'
+      }
+    },
+    setTenant (val) {
+    	if(val){
+    		console.log("dsfsfsfas === ", val)
+    		this.tenant = { ...val };
+    		// 获取原材料详情
+    		this.getMaterial(val.meterialId);
+    		// 获取。列表
+    		this.search();
+    	}
+    },
+
+    // 获取原材料详情
+    getMaterial(id) {
+    	MaterialApi.get({ id }).then(res=> {
+    		res = res.data;
+    		console.log("获取【原材料】详情 === ", res)
+    		if(res.code == 0) {
+    			// 如果存在，才赋值
+    			if(res.data) {
+    				this.material = res.data;
+    			}
+    		}
+    	})
+    },
+
+    close () {
+      this.$emit('close')
+    },
+    // 【重置】按钮-事件
+    reset () {
+    	// 初始化表单
+      this.queryParams = initQueryParams({})
+      // 清空列表选中的数据
+      this.$refs.table.clearSelection()
+    },
+    submitForm () {
+    	if(this.selection && this.selection.length == 1) {
+    		// 把选择的数据提交到父组件
+    		this.$emit("success", this.selection[0]);
+    		// 关闭弹出框
+    		this.isVisible = false
+    	} else {
+    		this.$message({
+          message: "只能选择一条数据~~",
+          type: 'warning'
+        })
+    	}
+    },
+    save () {
+      trayMgrApi.save(this.tenant)
+        .then((response) => {
+          const res = response.data
+          if (res.isSuccess) {
+            this.isVisible = false
+            this.$message({
+              message: this.$t('tips.createSuccess'),
+              type: 'success'
+            })
+            // 通知列表
+	          this.$emit("success");
+	          // 通知列表-并关闭弹出框
+	          this.$emit("close");
+          }
+        }).finally(() => {
+          this.confirmDisabled = false
+          return true
+        })
+    },
+    update () {
+      trayMgrApi.update(this.tenant)
+        .then((response) => {
+          const res = response.data
+          if (res.isSuccess) {
+            this.isVisible = false
+            this.$message({
+              message: this.$t('tips.updateSuccess'),
+              type: 'success'
+            })
+            // 通知列表
+	          this.$emit("success");
+	          // 通知列表-并关闭弹出框
+	          this.$emit("close");
+          }
+        }).finally(() => {
+          this.confirmDisabled = false
+          return true
+        })
+    },
+    fetch (params = {}) {
+      this.loading = true
+
+			// 分页信息
+      this.queryParams.current = params.current ? params.current : this.queryParams.current
+      this.queryParams.size = params.size ? params.size : this.queryParams.size
+			// 必须传的参数
+			// this.queryParams.model.auditStatus = '2'
+			// 原材料Id
+			this.queryParams.model.meterialId = this.tenant.meterialId;
+
+			// 测试数据，真实数据，请使用page
+      ReceiveApi.page(this.queryParams).then(response => {
+      	const res = response.data
+        console.log("列表的数据111122233：", res)
+        if (res.isSuccess) {
+        	// 总数
+        	this.tableData = res.data;
+        }
+        // eslint-disable-next-line no-return-assign
+      }).finally(() => this.loading = false)
+
+    },
+  }
+}
+</script>
+<style lang="scss" >
+.avatar-uploader .el-upload {
+  border: 1px dashed #d9d9d9;
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+}
+.avatar-uploader .el-upload:hover {
+  border-color: #409eff;
+}
+.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 100px;
+  height: 100px;
+  line-height: 100px;
+  text-align: center;
+}
+.avatar {
+  width: 100px;
+  height: 100px;
+  display: block;
+}
+.checkUsed{
+	display: inline-block;
+	margin-left: 10px;
+	color: #1890ff;
+}
+</style>