biaoge

hb_client/src/views/mtm/stepdo.vue

@@ -64,7 +64,39 @@
         </el-table-column>
      
       </el-table>
+    <el-dialog
+      :visible.sync="dialogVisible"
+      :title="dialogType === 'edit' ? '编辑记录表格' : '新增记录表格'"
+    >
+      <el-form
+        ref="Forms"
+        :model="recordform"
+        label-width="80px"
+        label-position="right"
+      >
        
+         <el-form-item label="表格名称" prop="name">
+          <el-input v-model="recordform.name" placeholder="表格名称" />
+        </el-form-item>
+        <el-form-item label="表格类型" prop="type">
+        <el-select  style="width: 100%" v-model="recordform.type" placeholder="请选择">
+             <el-option
+                v-for="item in typeoptions"
+                :key="item.value"
+                :label="item.label"
+               :value="item.value">
+              </el-option>
+          </el-select>
+        </el-form-item>
+      
+         
+        
+      </el-form>
+      <div style="text-align: right">
+        <el-button type="danger" @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="recordformconfirm('Forms')">确认</el-button>
+      </div>
+    </el-dialog>
     </el-card>
 
   </el-col>
@@ -85,6 +117,23 @@
     >
    
        <el-table-column type="index" width="50" />
+         <el-table-column label="字段类型">
+          <template slot-scope="scope">{{ options_[scope.row.field_type] }}</template>
+        </el-table-column>
+
+        <el-table-column label="字段名称">
+          <template slot-scope="scope">{{ scope.row.field_name }}</template>
+        </el-table-column>
+       
+        <el-table-column label="字段标识">
+          <template slot-scope="scope">{{ scope.row.field_key }}</template>
+        </el-table-column>
+        <el-table-column label="布尔类型显示名">
+          <template slot-scope="scope">{{ scope.row.boolean_field_display }}</template>
+        </el-table-column>
+          <el-table-column label="选项显示名">
+          <template slot-scope="scope">{{ scope.row.field_choice }}</template>
+        </el-table-column>
        
       
            <el-table-column
@@ -125,7 +174,14 @@
       >
        
          <el-form-item label="字段类型" prop="field_type">
-          <el-input v-model="field.field_type" placeholder="字段类型" />
+            <el-select  style="width: 100%"  v-model="field.field_type" placeholder="请选择">
+             <el-option
+                v-for="item in fieldtypeoptions"
+                :key="item.value"
+                :label="item.label"
+               :value="item.value">
+              </el-option>
+          </el-select>
         </el-form-item>
          <el-form-item label="字段标识" prop="field_key">
           <el-input v-model="field.field_key" placeholder="字段标识" />
@@ -133,11 +189,24 @@
          <el-form-item label="字段名称" prop="field_name">
           <el-input v-model="field.field_name" placeholder="字段名称" />
         </el-form-item>
-         <el-form-item label="显示名" prop="boolean_field_display">
+         <el-form-item label="布尔类型显示名" prop="boolean_field_display">
-          <el-input v-model="field.boolean_field_display" placeholder="显示名" />
+              <vue-json-editor
+      v-model="field.boolean_field_display"
+      :showBtns="false"
+      :mode="'code'"
+      lang="zh"
+     
+    />
         </el-form-item>
        <el-form-item label="选项" prop="field_choice">
-          <el-input v-model="field.field_choice" placeholder="选项" />
+       
+           <vue-json-editor
+      v-model="field.field_choice"
+      :showBtns="false"
+      :mode="'code'"
+      lang="zh"
+     
+    />
         </el-form-item>
          <el-form-item label="排序" prop="sort">
           <el-input v-model="field.sort" placeholder="排序" />
@@ -161,6 +230,8 @@
 <script>
 import { getStep,getrecordformList,createrecordform,updaterecordform,deleterecordform,getrffieldList,createrffield,updaterffield,
 deleterffield} from "@/api/mtm";
+
+ import vueJsonEditor from 'vue-json-editor'
 import checkPermission from "@/utils/permission";
 const defaultrecordform = {
  
@@ -169,7 +240,7 @@ const defaultfield = {
  
 };
 export default {
-  components: {  },
+  components: { vueJsonEditor },
   data() {
     return {
     step:"",
@@ -193,7 +264,63 @@ export default {
         page: 1,
         page_size: 20,
       },
-      
+      options_: {
+           'string':'字符串',
+           'int':'整型',
+         'float': '浮点',
+          'boolean':'布尔',
+         'date': '日期',
+          'datetime': '日期时间',
+           'radio': '单选',
+            'checkbox': '多选',
+             'select': '单选下拉',
+             'selects': '多选下拉',
+              'textarea': '文本域'
+        },
+        fieldtypeoptions: [{
+          value: 'string',
+          label: '字符串'
+        },
+        {
+          value: 'int',
+          label: '整型'
+        },
+        {
+          value: 'float',
+          label: '浮点'
+        },
+        {
+          value: 'boolean',
+          label: '布尔'
+        },
+        {
+          value: 'date',
+          label: '日期'
+        },
+        {
+          value: 'datetime',
+          label: '日期时间'
+        },
+        {
+          value: 'radio',
+          label: '单选'
+        },
+        {
+          value: 'checkbox',
+          label: '多选'
+        },
+        {
+          value: 'select',
+          label: '单选下拉'
+        },
+        {
+          value: 'selects',
+          label: '多选下拉'
+        },
+        {
+          value: 'textarea',
+          label: '文本域'
+        }],
        typeoptions: [{
           value: 1,
           label: '生产记录'
@@ -206,7 +333,7 @@ export default {
     
    this.getStepD();
    this.recordformLists();
-    this.fieldLists();
+    
   },
   methods: {
     checkPermission,
@@ -222,7 +349,8 @@ export default {
       
     handleCurrentChange(row){
      this.formID=row.id;
-     alert(this.form)
+     this.fieldLists();
+     
     },
      recordformLists()
      {
@@ -236,7 +364,7 @@ export default {
      },
       fieldLists()
      {
-       this.listQueryfield.step=this.$route.params.id;
+       this.listQueryfield.form=this.formID
       getrffieldList(this.listQueryfield).then((response) => {
         if (response.data) {
           this.fieldList = response.data;