apply-clients 3.3.222 → 3.4.2-FuGu-4

package/src/components/product/ServiceView.vue

@@ -1,5 +1,4 @@
 <template>
-
   <div class="select-overspread" style="background-color: #ffffff;padding: 20px;overflow: scroll">
     <form class="form-horizontal">
       <div class="form-group">
@@ -56,19 +55,19 @@
                    :class="item.label_bootstraped ? item.label_bootstraped + ' control-label-justify control-label' : 'control-label-justify control-label col-sm-3'">{{item.label}}</label>
             <div :style="item.value_style ? item.value_style:''"
                  :class="item.value_bootstraped ? item.value_bootstraped : 'col-sm-10'">
-          <textarea
-            :readonly="item.readonly"
-            :disabled="item.disabled"
-            class="form-control input_view"
-            style="width: 100%;height: 100%"
-            :rows="item.rows"
-            v-model="data.fields[index].value"
-            :value="data.fields[index].value"
-            @change="onchange(index)"
-            @blur="onblur(index)"
-            @input="oninput(index)"
-          >
-          </textarea>
+              <textarea
+                :readonly="item.readonly"
+                :disabled="item.disabled"
+                class="form-control input_view"
+                style="width: 100%;height: 100%"
+                :rows="item.rows"
+                v-model="data.fields[index].value"
+                :value="data.fields[index].value"
+                @change="onchange(index)"
+                @blur="onblur(index)"
+                @input="oninput(index)"
+              >
+              </textarea>
             </div>
           </div>
 
@@ -84,6 +83,7 @@
                 class="select select_list"
                 @blur="onblur(index)"
                 @change="onchange(index)"
+                @select-search="selectSearch($arguments,index)"
                 :readonly="item.readonly"
                 :disable="item.disabled"
                 :value.sync="data.fields[index].value"
@@ -118,7 +118,7 @@
 
       <!-- onetomany -->
       <div class="" v-for="(index,item) in data.onetomany">
-        <onetomany :onetomany="item" :index="index" v-if="item.device === 'pc' || !item.device"></onetomany>
+        <onetomany :selectdata="data" :onetomany="item" :index="index" v-if="item.device === 'pc' || !item.device"></onetomany>
       </div>
 
       <div v-for="(i,item) in data.components">
@@ -273,469 +273,359 @@
       </modal>
     </form>
   </div>
-
 </template>
 <script>
-  import Vue from 'vue'
-  import {isEmpty} from '../Util'
-  // Date格式化
-  Date.prototype.Format = function (fmt) {
-    var o = {
-      'M+': this.getMonth() + 1, // 月份
-      'd+': this.getDate(), // 日
-      'H+': this.getHours(), // 小时
-      'm+': this.getMinutes(), // 分
-      's+': this.getSeconds(), // 秒
-      'q+': Math.floor((this.getMonth() + 3) / 3), // 季度
-      'S': this.getMilliseconds() // 毫秒
+import Vue from 'vue'
+import {isEmpty} from '../Util'
+// Date格式化
+Date.prototype.Format = function (fmt) {
+  var o = {
+    'M+': this.getMonth() + 1, // 月份
+    'd+': this.getDate(), // 日
+    'H+': this.getHours(), // 小时
+    'm+': this.getMinutes(), // 分
+    's+': this.getSeconds(), // 秒
+    'q+': Math.floor((this.getMonth() + 3) / 3), // 季度
+    'S': this.getMilliseconds() // 毫秒
+  }
+  if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + '').substr(4 - RegExp.$1.length))
+  for (var k in o) {
+    if (new RegExp('(' + k + ')').test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))
+  }
+  return fmt
+}
+
+export default {
+  title: '报建业务通用组件',
+  props: {
+    data: {
+      type: Object
     }
-    if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + '').substr(4 - RegExp.$1.length))
-    for (var k in o) {
-      if (new RegExp('(' + k + ')').test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))
+  },
+  data () {
+    return {
+      model: {}, // 公司等属性
+      disable_button: true, // 控制按钮禁用
+      disable_modal_button: true, // 控制按钮禁用
+      showButModal: false
     }
-    return fmt
-  }
+  },
+  watch: {
+    deep: true
+  },
+  computed: {
+
+  },
+  created () {
+    // 初始化数据
+    this.initializtion()
+    if (this.data.readyEvent) {
+      this.$dispatch(this.data.readyEvent)
+    }
+    this.$dispatch('initializtionView')
+  },
+  methods: {
+    // 初始化数据
+    initializtion () {
+      for (const item of this.data.fields) {
+        this.data[item.field] = item.value
+      }
+
+      // 是否禁用按钮
+      this.disableButton()
 
-  export default {
-    title: '报建业务通用组件',
-    props: {
-      data: {
-        type: Object
+      // 公司等属性初始化
+      if (this.data.orgs) {
+        this.model.orgs = this.data.orgs
+      } else {
+        this.model.orgs = this.$login.f.orgs
       }
-    },
-    data () {
-      return {
-        model: {}, // 公司等属性
-        disable_button: true, // 控制按钮禁用
-        disable_modal_button: true, // 控制按钮禁用
-        showButModal: false
+      if (this.data.parentname) {
+        this.model.parentname = this.data.parentname
+      } else {
+        this.model.parentname = this.$login.f.f_department_name
       }
-    },
-    watch: {
-      deep: true
-    },
-    computed: {
-
-    },
-    created () {
-      // 初始化数据
-      this.initializtion()
-      if (this.data.readyEvent) {
-        this.$dispatch(this.data.readyEvent)
+      if (this.data.operate_date) {
+        this.model.operate_date = this.data.operate_date
+      } else {
+        this.model.operate_date = new Date().Format('yyyy-MM-dd')
       }
-      this.$dispatch('initializtionView')
-    },
-    ready(){
-      this.diaoguo()
-      this.diaoguo1()
-      this.diaoguo2()
-    },
-    methods: {
-      diaoguo(){
-        if (this.model.parentname == '经理部') {
-        if(this.data.f_budget_no != '否'){
-          for (const item of this.data.fields) {
-              if (item.label === '跳过预算审核结果') {
-                item.disabled = false
-                item.readonly = false
-                item.required = true
-              }
-            }
-          }
+      if (this.data.operator) {
+        this.model.operator = this.data.operator
+      } else {
+        this.model.operator = this.$login.f.name
       }
-      },
-      diaoguo1(){
-        if (this.model.parentname == '经理部') {
-          if(this.data.f_toll_no != '否'){
-            for (const item of this.data.fields) {
-              if ( item.label==='跳过收费审核结果' ) {
-                item.disabled = false
-                item.readonly = false
-                item.required = true
-              }
-            }
-          }
-        }
-      },
-      diaoguo2(){
-        if (this.model.parentname == '经理部') {
-          if(this.data.f_drawing_issuance_no != '否'){
-            for (const item of this.data.fields) {
-              if ( item.label==='跳过图纸下发审核结果') {
-                item.disabled = false
-                item.readonly = false
-                item.required = true
-              }
-            }
-          }
-        }
-      },
-      // 初始化数据
-      initializtion () {
-        for (const item of this.data.fields) {
-          this.data[item.field] = item.value
-        }
-
-        // 是否禁用按钮
-        this.disableButton()
+    },
+    // 是否禁用按钮
+    disableButton () {
+      let flag = false
 
-        console.log("----------"+this.$login.f)
-        // 公司等属性初始化
-        if (this.data.orgs) {
-          this.model.orgs = this.data.orgs
-        } else {
-          this.model.orgs = this.$login.f.orgs
-        }
-        if (this.data.parentname) {
-          this.model.parentname = this.data.parentname
-        } else {
-          this.model.parentname = this.$login.f.f_department_name
+      for (const field of this.data.fields) {
+        if (field.required && !field.value && !field.hidden && field.value !== 0) {
+          flag = true
         }
-        if (this.data.operate_date) {
-          this.model.operate_date = this.data.operate_date
-        } else {
-          this.model.operate_date = new Date().Format('yyyy-MM-dd')
-        }
-        if (this.data.operator) {
-          this.model.operator = this.data.operator
-        } else {
-          this.model.operator = this.$login.f.name
-        }
-      },
-      // 是否禁用按钮
-      disableButton () {
-        let flag = false
-        for (const field of this.data.fields) {
-          if (field.required && !field.value) {
-            if (field.value === 0) {
-              flag = false
-            } else {
-              flag = true
-            }
-          }
-          // 任何选择框只要是否都不能提交
-          if (field.type === 'select' && field.value === '否' && field.value_no_disable) {
-            flag = true
-          }
 
-          if (field.type === 'checkbox' && field.required && field.value.length === 0) {
-            flag = true
-          }
+        // 任何选择框只要是否都不能提交
+        if (field.type === 'select' && field.value === '否' && field.value_no_disable) {
+          flag = true
         }
 
-        if(this.data.defname==='方案确定'){
-          if( this.data.onetomany && this.data.onetomany[0].rows.length==0 && this.data.onetomany[1].rows.length==0) {
-            flag = true
-          }
-        }
-        this.disable_button = flag
-      },
-      // 失去焦点且值最终发生变化触发
-      async onchange (index) {
-        // 是否禁用按钮
-        this.disableButton()
-
-        if (!isEmpty(this.data.fields[index].value)) {
-          // 前缀、后缀
-          if (this.data.fields[index].prefix) {
-            this.data.fields[index].value = this.data.fields[index].prefix + this.data.fields[index].value
-          }
-          if (this.data.fields[index].suffix) {
-            this.data.fields[index].value = this.data.fields[index].value + this.data.fields[index].suffix
-          }
+        if (field.type === 'checkbox' && field.required && field.value.length === 0) {
+          flag = true
         }
+      }
 
-        // data赋值
-        this.data[this.data.fields[index].field] = this.data.fields[index].value
+      this.disable_button = flag
+    },
+    // 失去焦点且值最终发生变化触发
+    async onchange (index) {
+      // 是否禁用按钮
+      this.disableButton()
 
-        if (this.data.fields[index].type === 'datepicker') {
-          this.check_datepicker(index)
+      if (!isEmpty(this.data.fields[index].value)) {
+        // 前缀、后缀
+        if (this.data.fields[index].prefix) {
+          this.data.fields[index].value = this.data.fields[index].prefix + this.data.fields[index].value
         }
-
-        if (this.data.fields[index].onchange) {
-          this.$dispatch(this.data.fields[index].onchange, index)
+        if (this.data.fields[index].suffix) {
+          this.data.fields[index].value = this.data.fields[index].value + this.data.fields[index].suffix
         }
-        this.$dispatch('onchange', index)
+      }
 
+      // data赋值
+      this.data[this.data.fields[index].field] = this.data.fields[index].value
 
-      },
-      // 失去焦点触发，无论值是否发生变化
-      onblur (index) {
-        this.disableButton()
+      if (this.data.fields[index].type === 'datepicker') {
+        this.check_datepicker(index)
+      }
 
-        if (this.data.fields[index].onblur) {
-          this.$dispatch(this.data.fields[index].onblur, index)
-        }
+      if (this.data.fields[index].onchange) {
+        this.$dispatch(this.data.fields[index].onchange, index)
+      }
+      this.$dispatch('onchange', index)
+    },
+    // 失去焦点触发，无论值是否发生变化
+    onblur (index) {
+      this.disableButton()
 
-        this.$dispatch('onblur', index)
-      },
-      oninput (index) {
-        // 是否禁用按钮
-        this.disableButton()
+      if (this.data.fields[index].onblur) {
+        this.$dispatch(this.data.fields[index].onblur, index)
+      }
 
-        if (this.data.fields[index].oninput) {
-          this.$dispatch(this.data.fields[index].oninput, index)
-        }
-        this.$dispatch('oninput', index)
-      },
-      // 点击按钮组按钮
-      async click_but (button) {
-        this.disable_button = true
+      this.$dispatch('onblur', index)
+    },
+    oninput (index) {
+      // 是否禁用按钮
+      this.disableButton()
 
-        this.data.fields.forEach(item => {
-          this.data[item.field] = item.value
-        })
+      if (this.data.fields[index].oninput) {
+        this.$dispatch(this.data.fields[index].oninput, index)
+      }
+      this.$dispatch('oninput', index)
+    },
+    selectSearch(event, index) {
+      if (this.data.fields[index].selectSearch) {
+        this.$dispatch(this.data.fields[index].selectSearch, event[0], index)
+      }
+      this.$dispatch('selectSearch', event[0], index)
+    },
+    // 点击按钮组按钮
+    async click_but (button) {
+      this.disable_button = true
 
-        this.data.button = button
+      this.data.fields.forEach(item => {
+        this.data[item.field] = item.value
+      })
 
-        if (button.button_fields && button.button_fields.length > 0) {
-          this.showButModal = true
-          return
-        }
+      this.data.button = button
 
-        if (this.data.button.event) {
-          this.$dispatch(this.data.button.event)
-        } else {
-          this.$dispatch('button')
-        }
-      },
-      confirmModal () {
-        this.closeModal()
+      if (button.button_fields && button.button_fields.length > 0) {
+        this.showButModal = true
+        return
+      }
 
-        this.data.button.button_fields.forEach(item => {
-          this.data.button[item.field] = item.value
-        })
+      if (this.data.button.event) {
+        this.$dispatch(this.data.button.event)
+      } else {
+        this.$dispatch('button')
+      }
+    },
+    confirmModal () {
+      this.closeModal()
 
-        if (this.data.button.event) {
-          this.$dispatch(this.data.button.event)
-        } else {
-          this.$dispatch('button')
-        }
-      },
-      // 关闭模态框
-      closeModal () {
-        this.showButModal = false
-        this.disable_modal_button = false
-      },
-      onbutchange (index) {
-        // 是否禁用按钮
-        this.disableModalButton()
-
-        if (this.data.button.button_fields[index].onchange) {
-          this.$dispatch(this.data.button.button_fields[index].onchange, index)
-        } else {
-          this.$dispatch('onbutchange', index)
-        }
+      this.data.button.button_fields.forEach(item => {
+        this.data.button[item.field] = item.value
+      })
 
-      },
-      onbutblur (index) {
-        this.disableModalButton()
+      if (this.data.button.event) {
+        this.$dispatch(this.data.button.event)
+      } else {
+        this.$dispatch('button')
+      }
+    },
+    // 关闭模态框
+    closeModal () {
+      this.showButModal = false
+      this.disable_modal_button = false
+    },
+    onbutchange (index) {
+      // 是否禁用按钮
+      this.disableModalButton()
 
-        if (this.data.button.button_fields[index].onblur) {
-          this.$dispatch(this.data.button.button_fields[index].onblur, index)
-        } else {
-          this.$dispatch('onbutblur', index)
-        }
-      },
-      onbutinput (index) {
-        // 是否禁用按钮
-        this.disableModalButton()
+      if (this.data.button.button_fields[index].onchange) {
+        this.$dispatch(this.data.button.button_fields[index].onchange, index)
+      } else {
+        this.$dispatch('onbutchange', index)
+      }
 
-        if (this.data.button.button_fields[index].oninput) {
-          this.$dispatch(this.data.button.button_fields[index].oninput, index)
-        } else {
-          this.$dispatch('onbutinput', index)
-        }
-      },
-      disableModalButton () {
-        let flag = false
+    },
+    onbutblur (index) {
+      this.disableModalButton()
 
+      if (this.data.button.button_fields[index].onblur) {
+        this.$dispatch(this.data.button.button_fields[index].onblur, index)
+      } else {
+        this.$dispatch('onbutblur', index)
+      }
+    },
+    onbutinput (index) {
+      // 是否禁用按钮
+      this.disableModalButton()
 
-        for (const item of this.data.button.button_fields) {
-          if (item.required && !item.value) {
-            if (item.value === 0) {
-              flag = false
-            } else {
-              flag = true
-            }
-          }
-        }
+      if (this.data.button.button_fields[index].oninput) {
+        this.$dispatch(this.data.button.button_fields[index].oninput, index)
+      } else {
+        this.$dispatch('onbutinput', index)
+      }
+    },
+    disableModalButton () {
+      let flag = false
 
-        this.disable_modal_button = flag
-      },
-      check_datepicker (index) {
-        // 时间格式检测
-        if (!isEmpty(this.data.fields[index].value)) {
-
-          let dateReg = /^[1-9]\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])$/
-          let timeReg = /^(20|21|22|23|[0-1]\d):[0-5]\d:[0-5]\d$/
-          let datetimeReg = /^[1-9]\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])\s+(20|21|22|23|[0-1]\d):[0-5]\d:[0-5]\d$/
-          if (this.data.fields[index].format) {
-            if (this.data.fields[index].format === 'yyyy-MM-dd') {
-              if (!dateReg.test(this.data.fields[index].value)) {
-                this.data.fields[index].value = ''
-                this.$showAlert(this.data.fields[index].label + '格式错误如：2021-01-01', 'warning', 2000)
-              }
-            }
-            if (this.data.fields[index].format === 'HH:mm:ss') {
-              if (!timeReg.test(this.data.fields[index].value)) {
-                this.data.fields[index].value = ''
-                this.$showAlert(this.data.fields[index].label + '格式错误如：00:00:00', 'warning', 2000)
-              }
-            }
-            if (this.data.fields[index].format === 'yyyy-MM-dd HH:mm:ss') {
-              if (!datetimeReg.test(this.data.fields[index].value)) {
-                this.data.fields[index].value = ''
-                this.$showAlert(this.data.fields[index].label + '格式错误如：2021-01-01 00:00:00', 'warning', 2000)
-              }
-            }
+
+      for (const item of this.data.button.button_fields) {
+        if (item.required && !item.value) {
+          if (item.value === 0) {
+            flag = false
           } else {
-            if (!dateReg.test(this.data.fields[index].value)) {
-              this.data.fields[index].value = ''
-              this.$showAlert(this.data.fields[index].label + '格式错误如：2021-01-01', 'warning', 2000)
-            }
+            flag = true
           }
         }
       }
+
+      this.disable_modal_button = flag
     },
-    events: {
-      'jumpover'(index){
-          if(this.data.f_budget_no == '否') {
-            for (const item of this.data.fields) {
-              if (item.label === '跳过预算审核结果') {
-                item.disabled = false
-                item.readonly = false
-                item.required = false
-              }
-            }
-          }
-        if(this.data.f_budget_no == '是') {
-            for (const item of this.data.fields) {
-              if (item.label === '跳过预算审核结果') {
-                item.disabled = true
-                item.readonly = true
-                item.required = true
-              }
-            }
-          }
-        this.diaoguo()
-      },
-      'jumpover2'(index){
-        if(this.data.f_toll_no == '否') {
-          for (const item of this.data.fields) {
-            if (item.label === '跳过收费审核结果') {
-              item.disabled = false
-              item.readonly = false
-              item.required = false
+    check_datepicker (index) {
+      // 时间格式检测
+      if (!isEmpty(this.data.fields[index].value)) {
+
+        let dateReg = /^[1-9]\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])$/
+        let timeReg = /^(20|21|22|23|[0-1]\d):[0-5]\d:[0-5]\d$/
+        let datetimeReg = /^[1-9]\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])\s+(20|21|22|23|[0-1]\d):[0-5]\d:[0-5]\d$/
+        if (this.data.fields[index].format) {
+          if (this.data.fields[index].format === 'yyyy-MM-dd') {
+            if (!dateReg.test(this.data.fields[index].value)) {
+              this.data.fields[index].value = ''
+              this.$showAlert(this.data.fields[index].label + '格式错误如：2021-01-01', 'warning', 2000)
             }
           }
-        }else{
-          for (const item of this.data.fields) {
-            if ( item.label=== '跳过收费审核结果') {
-              item.disabled = true
-              item.readonly = true
-              item.required = true
+          if (this.data.fields[index].format === 'HH:mm:ss') {
+            if (!timeReg.test(this.data.fields[index].value)) {
+              this.data.fields[index].value = ''
+              this.$showAlert(this.data.fields[index].label + '格式错误如：00:00:00', 'warning', 2000)
             }
           }
-        }
-        this.diaoguo1()
-      },
-      'jumpover3'(index){
-        if(this.data.f_drawing_issuance_no == '否') {
-          for (const item of this.data.fields) {
-            if ( item.label === '跳过图纸下发审核结果') {
-              item.disabled = false
-              item.readonly = false
-              item.required = false
+          if (this.data.fields[index].format === 'yyyy-MM-dd HH:mm:ss') {
+            if (!datetimeReg.test(this.data.fields[index].value)) {
+              this.data.fields[index].value = ''
+              this.$showAlert(this.data.fields[index].label + '格式错误如：2021-01-01 00:00:00', 'warning', 2000)
             }
           }
-        }else{
-          for (const item of this.data.fields) {
-            if (item.label==='跳过图纸下发审核结果') {
-              item.disabled = true
-              item.readonly = true
-              item.required = true
-            }
+        } else {
+          if (!dateReg.test(this.data.fields[index].value)) {
+            this.data.fields[index].value = ''
+            this.$showAlert(this.data.fields[index].label + '格式错误如：2021-01-01', 'warning', 2000)
           }
         }
-        this.diaoguo2()
       }
-
     }
+  },
+  events: {
+
   }
+}
 </script>
 <style>
-  .datepicker{
-    width: 100%!important;
-  }
-  .datepicker-input{
-    background-color: #ffffff!important;
-    width: 100%!important;
-  }
-  .datepicker-input:disabled{
-    border: 1px solid #DDD!important;
-    color: #ACA899!important;
-    width: 100%!important;
-  }
+.datepicker{
+  width: 100%!important;
+}
+.datepicker-input{
+  background-color: #ffffff!important;
+  width: 100%!important;
+}
+.datepicker-input:disabled{
+  border: 1px solid #DDD!important;
+  color: #ACA899!important;
+  width: 100%!important;
+}
 </style>
 <style scoped>
-  th{
-    font-size: 15px !important;
-    text-align: center !important;
-    background-color: #dfedfb!important;
-    color: #666666 !important;
-    font-family: PINGFANG-BOLD !important;
-    font-weight: normal!important;
-  }
-  /*清除model中的浮动*/
-  .clearfix:after,.clearfix:before{
-    display: table;
-  }
-  .clearfix:after{
-    clear: both;
-  }
-
-  .input_view{
-    padding: 8px;
-    background-color: #ffffff;
-    border-radius: 2px;
-    border: solid 1px #c7c7c7!important;
-    color: #333333!important;
-    font-size: 15px!important;
-  }
-
-  .input_view[readonly]{
-    border: 1px solid #DDD!important;
-    color:#ACA899!important;
-  }
-  .input_view:disabled{
-    border: 1px solid #DDD!important;
-    color:#ACA899!important;
-  }
-
-  .control-label-justify {
-    display: inline-block;
-    vertical-align: top;
-    width: 110px;
-    text-align: justify;
-    font-family: PingFang-SC-Bold;
-  }
-
-  .control-label-justify::after {
-    content: "";
-    display: inline-block;
-    width: 100%;
-    overflow: hidden;
-    height: 0;
-  }
-
-  input::-webkit-outer-spin-button,
-  input::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-  }
-
-  input[type="number"] {
-    -moz-appearance: textfield;
-  }
+th{
+  font-size: 15px !important;
+  text-align: center !important;
+  background-color: #dfedfb!important;
+  color: #666666 !important;
+  font-family: PINGFANG-BOLD !important;
+  font-weight: normal!important;
+}
+/*清除model中的浮动*/
+.clearfix:after,.clearfix:before{
+  display: table;
+}
+.clearfix:after{
+  clear: both;
+}
+
+.input_view{
+  padding: 8px;
+  background-color: #ffffff;
+  border-radius: 2px;
+  border: solid 1px #c7c7c7!important;
+  color: #333333!important;
+  font-size: 15px!important;
+}
+
+.input_view[readonly]{
+  border: 1px solid #DDD!important;
+  color:#ACA899!important;
+}
+.input_view:disabled{
+  border: 1px solid #DDD!important;
+  color:#ACA899!important;
+}
+
+.control-label-justify {
+  display: inline-block;
+  vertical-align: top;
+  width: 110px;
+  text-align: justify;
+  font-family: PingFang-SC-Bold;
+}
+
+.control-label-justify::after {
+  content: "";
+  display: inline-block;
+  width: 100%;
+  overflow: hidden;
+  height: 0;
+}
+
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+}
+
+input[type="number"] {
+  -moz-appearance: textfield;
+}
 
 </style>