问题进展组件开发

applications/dee-mes/src/privateComponents/components/ProblemProgressCom/config.js

+export default {
+  props: {},
+  layoutConfigData: [
+    {
+      title: '高级组件配置',
+      data: [
+        {
+          key: 'bindValue',
+          title: '绑定属性',
+          component: {
+            defaultValue: '',
+            name: 'el-input'
+          }
+        }
+      ]
+    }
+  ],
+  data() {
+    return {
+    }
+  },
+  created() {
+  },
+  computed: {
+
+  },
+  methods: {
+
+  }
+}
+

applications/dee-mes/src/privateComponents/components/ProblemProgressCom/index.vue

+<template>
+  <div class="problemProgressCom">
+    <el-form ref="form" class="processForm" :inline="true" :model="formData" label-width="40px">
+      <el-row v-for="(item, index) in formData.progresss" :key="index">
+        <el-col :span="5">
+          <el-form-item
+            label="日期"
+            :prop="'progresss.' + index + '.createTime'"
+          >
+            <!-- :rules="{
+            required: true, message: '该项必填', trigger: 'blur'
+          }" -->
+            <el-date-picker
+              v-model="item.createTime"
+              size="small"
+              type="date"
+              value-format="yyyy-MM-dd HH:mm:ss"
+              placeholder="选择日期"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="17">
+          <el-form-item
+            label="答复"
+            :prop="'progresss.' + index + '.progressItem'"
+            class="textareaItem"
+          >
+            <!-- :rules="[
+            {required: true, message: '该项必填', trigger: 'blur'},
+          ]" -->
+            <el-input v-model="item.progressItem" autosize type="textarea" size="small" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="2">
+          <el-form-item class="btn-box">
+            <span v-if="index+1 == formData.progresss.length" class="btn-item" title="新增" @click="addItem">
+              <img src="/icons/c-add.png" alt="">
+            </span>
+            <span v-if="index !== 0" class="btn-item" title="删除" @click.stop="() => deleteItem(data)">
+              <img src="/icons/c-creatbackups.png" alt="">
+            </span>
+          </el-form-item>
+        </el-col>
+
+      </el-row></el-form>
+  </div>
+</template>
+<script>
+import config from './config'
+import moment from 'moment'
+export default {
+  componentName: '问题进展',
+  name: 'ProblemProgressCom', // name写在组件的最前方,自定义组件为必填
+  components: {},
+  mixins: [config],
+  props: {
+    itemObj: {
+      type: Object,
+      default: null
+    },
+    form: {
+      type: Object,
+      default: () => {}
+    },
+    middleForm: {
+      type: Object,
+      default: () => {}
+    },
+    value: {
+      type: [Number, String, Object, Array],
+      default: () => ''
+    }
+  },
+  data() {
+    return {
+      formData: {
+        progresss: [
+          {
+            createTime: moment(new Date()).format('YYYY-MM-DD HH:mm:ss'),
+            progressItem: '',
+            operator: 'ADD'
+          }
+        ]
+      }
+
+    }
+  },
+  computed: {},
+  watch: {
+    value: {
+      immediate: true,
+      deep: true,
+      handler(v) {
+        if (v) {
+          // this.selVal = this.value
+          this.$set(this.formData, 'progresss', this.value)
+        }
+      }
+    },
+    formData: {
+      immediate: true,
+      deep: true,
+      handler() {
+        this.$emit('input', this.formData.progresss.map(item => {
+          if (item.id) {
+            item.operator = 'MODIFY'
+          } else {
+            item.operator = 'ADD'
+          }
+          return item
+        }))
+      }
+    }
+  },
+  created() {
+    // 初始化数据
+  },
+  methods: {
+    addItem() {
+      this.formData.progresss.push({
+        createTime: moment(new Date()).format('YYYY-MM-DD'),
+        progressItem: '',
+        operator: 'ADD'
+      })
+    },
+    deleteItem(item, index) {
+      this.formData.progresss.splice(index, 1)
+    },
+    changeVal() {
+      this.$emit('input', this.selVal)
+    }
+  }
+}
+</script>
+<style lang='scss'>
+.problemProgressCom{
+  .processForm{
+    width: 100%;
+    .el-form-item{
+    width: 100%;
+    .el-form-item__content{
+    width: calc(100% - 50px);
+   }
+  }
+  .btn-box{
+        width: 100%;
+        height: 100%;
+        margin-bottom: 0px;
+        .el-form-item__content{
+           width: 100%;
+         }
+        .btn-item {
+          display: inline-block;
+            padding: 4px;
+            width: 16px;
+            height: 16px;
+            img{
+              height: 100%;
+              width: 100%;
+            }
+            // line-height: 16px;
+
+        }
+
+    }
+  }
+
+}
+
+</style>