vue-json-edit

src/views/bi/dataset_form.vue

@@ -31,7 +31,8 @@
             </el-col>
             <el-col :md="24" :sm="24" :xs="24">
               <el-form-item label="默认参数">
-                <el-input v-model="form.default_param" clearable type="textarea" :rows="8"></el-input>
+                <JsonEditorVue class="vueJsonEditor" v-model="form.default_param" @blur="validate" />
+                <!-- <el-input v-model="form.default_param" clearable type="textarea" :rows="8"></el-input> -->
               </el-form-item>
             </el-col>
           </el-row>
@@ -46,7 +47,9 @@
 </template>
 
 <script>
+import JsonEditorVue from 'json-editor-vue3';
 export default {
+  components: { JsonEditorVue },
   emits: ["success", "closed"],
   data() {
     return {
@@ -63,6 +66,7 @@ export default {
       },
       visible: false,
       isSaveing: false,
+      default_param:{},
       selectionFilters: [],
       setFiltersVisible: false,
       belong_dept_options: []
@@ -79,6 +83,7 @@ export default {
     },
     //表单提交方法
     submit() {
+      console.log(this.form)
       this.$refs.dialogForm.validate(async (valid) => {
         if (valid) {
           this.isSaveing = true;
@@ -127,4 +132,7 @@ export default {
 };
 </script>
 
-<style></style>
+<style>
+.vueJsonEditor{
+  width: 100%;
+}</style>

src/views/pm/mtask.vue

@@ -78,6 +78,7 @@
             stripe
             :height="topHeight"
             :params="paramsUtask7"
+            @row-click="rowclick"
             @selection-change="handleSelectionChange"
           >
           <el-table-column type="selection" width="40" />
@@ -139,6 +140,7 @@
             stripe
             :height="topHeight"
             :params="paramsUtask10"
+            @row-click="rowclick"
             @selection-change="handleSelectionChange"
           >
             <el-table-column type="selection" width="40" />
@@ -241,12 +243,12 @@
         </el-table-column>
         <el-table-column label="计划完工时间" prop="end_date" width="100" fixed="left">
         </el-table-column>
-        <el-table-column v-for="item in columList" :label="item" :key="item">
+        <el-table-column v-for="item in columList" :label="item.data" :key="item">
           <template #default="scope">
-            <div :class="bindClass(scope.row)">
+            <div :class="bindClass(item)">
               <div v-if="activeName=='10车间'">{{ scope.row.count01 }}</div>
-              <div>{{ scope.row.count02 }}</div>
+              <div>{{ item.count_ok }}</div>
-              <div>{{ scope.row.count03 }}</div>
+              <div>{{ item.count_real }}</div>
             </div>
           </template>
         </el-table-column>
@@ -375,23 +377,22 @@ export default {
     let endDate = year+'-'+month+'-'+day;
     this.query.date = [startDate,endDate];
     let heights = document.getElementById('topContainer').clientHeight;
-    console.log('heights',heights)
     this.topHeight = (heights-45)+'px';
     this.bottomHeight = (heights-65)+'px';
   },
   methods: {
     // 动态绑定Class
     bindClass(row){
-      let count01 = row.count01;
+      let count = row.count;
-      let count02 = row.count02;
+      let countok = row.count_ok;
-      let count03 = row.count03;
+      let countreal = row.count_real;
       let classInfo = {countBlock:true, redColor: false, greenColor: false, orangeColor:false };
-      if(count01+count02<count03){
+      if(countok>=count){
-        classInfo.redColor = true;
-      }else if(count01+count02==count03){
         classInfo.greenColor = true;
-      }else if(count01+count02>count03){
+      }else if(countreal>=count){
         classInfo.orangeColor = true;
+      }else{
+        classInfo.redColor = true;
       }
       return classInfo
     },
@@ -523,6 +524,24 @@ export default {
       this.apiObj = this.$API.pm.mtask.list;
       this.visibleRecord = true;
     },
+    rowclick(val){
+      let that = this;
+      console.log(val);
+      let utask = val.id;
+      that.dataList.push(val)
+      this.$API.pm.mtask.list.req({utask:utask,page:0}).then(res=>{
+        res.forEach(item=>{
+          console.log(item)
+          let obj = {};
+          obj.data = item.start_date;
+          obj.count = item.count;
+          obj.count_ok = item.count_ok;
+          obj.count_real = item.count_real;
+          obj.count_notok = item.count_notok;
+          that.columList.push(obj);
+        })
+      })
+    },
   },
 };
 </script>