表单项组件化、政策入库流程重构

2023-09-25 16:58:30 +08:00
parent 24577c7f3a
commit 37a3124c3a
25 changed files with 2888 additions and 12 deletions
@@ -0,0 +1,96 @@
+<template>
+  <el-timeline-item :timestamp="timestamp" placement="top" :color="name ? '#66b1ff' : ''" class="timeline-item">
+    <el-card>
+      <el-form-item :prop="prop" style="margin-bottom: 0">
+        <h4>{{ title }}</h4>
+        <div style="margin-top: 10px;width: 300px;">
+          <el-input
+              :disabled="disabled"
+              :value="name"
+              :placeholder="title"
+              readonly
+              @click.native="choice(id)"></el-input>
+        </div>
+      </el-form-item>
+    </el-card>
+    <Role-tree v-if="!disabled"
+               :check-box="!multiple"
+               :is-title="`选择${title}`"
+               :is-visible.sync="modalShowFlag"
+               @checkedRole="checkedRole"
+               :nodeList="nodeList"
+    ></Role-tree>
+  </el-timeline-item>
+</template>
+
+<script>
+export default {
+  name: "TimeLineFormItem",
+  props: {
+    id:{
+      type: String,
+      required: true
+    },
+    name:{
+      type: String,
+      required: true
+    },
+    prop: {
+      type: String
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    timestamp: {
+      type: String,
+      required: true
+    },
+    title: {
+      type: String,
+      required: true
+    },
+    multiple: {// 多选
+      type: Boolean,
+      default: false
+    }
+  },
+  data () {
+    return {
+      drawerTitle: '', //drawer标题
+      modalShowFlag: false, // drawer开关
+      nodeList: [],
+    }
+  },
+  methods: {
+    handleChange (event) {
+      this.$emit('input', event)
+    },
+    choice (id) {
+      this.nodeList = id.split(',')
+      this.modalShowFlag = true
+    },
+    checkedRole (data) {
+      const id = this.joint(data, 'id')
+      const name = this.joint(data, 'name')
+      this.$emit('update:id', id)
+      this.$emit('update:name', name)
+    },
+    joint (data, type) {
+      return data.reduce((init,item) => {
+        if (init === '') {
+          return item[type]
+        } else {
+          return init + ',' + item[type]
+        }
+      }, '')
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+.timeline-item /deep/ .el-form-item__content{
+  margin: 0!important;
+}
+</style>