目标管理页面修改

src/views/modules/kpi/streetpersiongoalmonth-add-or-update.vue

@@ -1,23 +1,20 @@
 <template>
   <el-dialog :visible.sync="visible" :title="!dataForm.id ? $t('add') : $t('update')" :close-on-click-modal="false" :close-on-press-escape="false" width="30%" center>
-    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" :label-width="$i18n.locale === 'en-US' ? '120px' : '120px'">
+    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" :label-width="$i18n.locale === 'en-US' ? '130px' : '130px'">
           <el-form-item label="年月" prop="monthYear">
           <el-date-picker v-model="dataForm.monthYear"
-              type="month" clearable placeholder="选择月" style="width: 300px;" :disabled="dataForm.id?true:false"
+              type="month" clearable placeholder="选择月" :disabled="dataForm.id?true:false"
               value-format="yyyy-MM"  format="yyyy-MM">
           </el-date-picker>
       </el-form-item>
-          <el-form-item label="群众目标比例" prop="residentGoalNum">
-          <el-input v-model="dataForm.residentGoalNum" placeholder="群众目标数" style="width: 300px;"></el-input>
-          <span>%</span>
+          <el-form-item label="群众目标比例 %" prop="residentGoalNum">
+          <el-input-number v-model="dataForm.residentGoalNum" :min="0" label="群众目标数"></el-input-number>
       </el-form-item>
-          <el-form-item label="党员目标比例" prop="partyGoalNum">
-          <el-input v-model="dataForm.partyGoalNum" placeholder="党员目标数" style="width: 300px;"></el-input>
-          <span>%</span>
+          <el-form-item label="党员目标比例 %" prop="partyGoalNum">
+          <el-input-number v-model="dataForm.partyGoalNum" :min="0" label="党员目标数"></el-input-number>
       </el-form-item>
-          <el-form-item label="企业目标比例" prop="companyGoalNum">
-          <el-input v-model="dataForm.companyGoalNum" placeholder="企业目标数" style="width: 300px;"></el-input>
-          <span>%</span>
+          <el-form-item label="企业目标比例 %" prop="companyGoalNum">
+          <el-input-number v-model="dataForm.companyGoalNum" :min="0" label="企业目标数"></el-input-number>
       </el-form-item>
       </el-form>
     <template slot="footer">

src/views/modules/kpi/streetpersiongoalmonth.vue

@@ -26,11 +26,11 @@
       <el-dialog title="街道目标数设定" :visible.sync="dialogFormVisible" width="30%" center>
         <el-form :model="dataForm">
           <el-form-item label="目标比例" label-width="120px">
-            <el-input v-model="goalProportion" style="width: 300px;"></el-input>
-            <span>%</span>
+            <el-input-number v-model="goalProportion" :min="0" v-on:change="watchGoalProportion(goalProportion)"></el-input-number>
+            <span style="margin-left: 10px;">%</span>
           </el-form-item>
           <el-form-item label="目标人数" label-width="120px">
-            <el-input v-model="goalNumber" style="width: 300px;"></el-input>
+            <el-input-number v-model="goalNumber" :min="0"  v-on:change="watchGoalNumbern(goalNumber)"></el-input-number>
           </el-form-item>
         </el-form>
         <div slot="footer" class="dialog-footer">
@@ -75,17 +75,23 @@ export default {
     this.getStreetName()
     this.getStreetGoalScore()
   },
-  watch: {
-    // 根据目标比例 计算 目标数
-    goalProportion: function (val) {
-      if (val.length === 0) {
-        this.goalProportion = ''
+  methods: {
+    // 数据监听1
+    watchGoalProportion (goalProportion) {
+      if (this.goalProportion === 0) {
+        this.goalNumber = 0
       } else {
         this.goalNumber = Math.round(this.personBasicNumber * (this.goalProportion / 100))
       }
+    },
+    // 数据监听2
+    watchGoalNumbern (goalNumber) {
+      if (this.goalNumber === 0) {
+        this.goalProportion = 0
+      } else {
+        this.goalProportion = Math.round(this.goalNumber / this.personBasicNumber * 100)
       }
     },
-  methods: {
     // 获取街道目标表的街道名称
     getStreetName () {
       this.$http
@@ -121,6 +127,9 @@ export default {
       if (column.property === undefined || column.property === '') {
         return false
       }
+      if (row.isDisabled === '0') {
+        return false
+      }
       this.dialogFormVisible = true
       this.dataForm.streetId = columnId // 这里的街道ID格式为：1202869594882400257-PartyGoalNum
       // this.personBasicNumber = row[columnId] // 获取单元格的值