hi-ucs/back/src/views/modules/ability/assignedScene/components/ability-add.vue

<template>
  <div>
    <div class="info-title">{{ title }}</div>
    <el-form :inline="true">
      <el-form-item label="使用总数">
        <el-input
          v-model="count"
          onkeyup="value=value.replace(/[^\d]/g,0)"
          placeholder="请输入总数"
          style="width: 320px"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <div class="submit">
          <a-button type="primary" @click="addBaseInfo">
            <img
              style="height: 12px; width: 12px; margin-top: -2px"
              src="~@/assets/img/jiahao.png"
              alt=""
            />
            <span style="margin-left: 4px">添加实例数据</span>
          </a-button>
        </div>
      </el-form-item>
    </el-form>
    <div style="margin-bottom: 20px">
      <el-table v-if="dataInfo.length > 0" :data="dataInfo" border>
        <el-table-column label="序号" width="55">
          <template slot-scope="scope">{{
            scope.$index + 1 > 9 ? scope.$index + 1 : "0" + (scope.$index + 1)
          }}</template>
        </el-table-column>
        <el-table-column label="数据名称" width="180">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.name"
              placeholder="请输入数据名称"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column label="类型" width="200">
          <template slot-scope="scope">
            <el-select :ref="scope.row.id" v-model="scope.row.type">
              <el-option
                v-for="item in typeList"
                :label="item.label"
                :value="item.value"
                :key="item.value"
              ></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="来源部门" width="180">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.dept"
              placeholder="请输入来源部门"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-popconfirm
                        confirm-button-text="确认"
                        cancel-button-text="取消"
                        icon="el-icon-info"
                        icon-color="red"
                        title="确定删除该实例数据吗？"
                        @confirm="handleDelete(scope.$index, scope.row)"
                      >
                        <el-button
                          type="danger"
                          icon="el-icon-delete"
                          slot="reference"
                        ></el-button>
                      </el-popconfirm>
                    </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    dataForm: {
      type: Object,
      default: () => {}
    },
    title: {
      type: String,
      default: ''
    },
    typeList: {
      type: Array,
      default: () => []
    }
  },
  watch: {
    dataInfo: {
      handler (newVal) {
        this.dataInfo = newVal
        this.$emit('update', {
          title: this.title,
          list: newVal
        })
      },
      deep: true,
      immediate: true
    },
    count: {
      handler (newVal) {
        this.count = newVal
        this.$emit('updateCount', {
          title: this.title,
          count: newVal
        })
      },
      deep: true,
      immediate: true
    }
  },
  data () {
    return {
      count: '',
      dataInfo: []
    }
  },

  methods: {
    addBaseInfo () {
      const data = {
        name: '',
        type: '',
        dept: ''
      }
      this.dataInfo.push(data)
    },
    handleDelete (row) {
      this.dataInfo.splice(row, 1)
    },
    getDataInfo (dataForm) {
      let arr = []
      if (dataForm && (dataForm.id || dataForm.id === 0)) {
        if (this.title === '基础设施') {
          this.count = dataForm.infrastructureCount
        }
        if (this.title === '组件服务') {
          this.count = dataForm.componentCount
        }
        if (this.title === '数据资源') {
          this.count = dataForm.dataSourceCount
        }

        const fuseAttrList = dataForm.fuseResourceList || []
        const obj = fuseAttrList.filter((v) => v.type === this.title)
        console.log('回显数据=======>', obj)
        if (obj.length > 0) {
          obj.map((v) => {
            v.name = v.resourceName
            v.dept = v.deptName
            v.type = v.typeSecond
            arr.push(v)
          })
        } else {
          arr = []
        }
      } else {
        arr = []
      }

      this.dataInfo = arr
    },
    // 新增
    addItem () {
      const index = this.dataInfo.length - 1
      if (this.dataInfo[index][this.keyTextObj.descObj.key] === '') {
        return this.$message.warning('请填写完整信息！')
      }
      this.dataInfo.push({
        [this.keyTextObj.descObj.key]: ''
      })
    },
    // 删除
    deleteItem (index) {
      this.$confirm('确认是否删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.dataInfo.splice(index, 1)
        })
        .catch(() => {})
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .el-table thead {
  height: 40px;
}

::v-deep .el-table th {
  font-weight: normal;
  background-color: #e3e4e5 !important;
}

.submit {
  font-size: 0.14rem;
  margin-left: 8px;

  .ant-btn {
    width: 128px;
    height: 32px;
    text-align: center;
    background: #fff;
    color: #0558e1;
    border: 1px solid #0558e1;
    border-radius: 2px;
    font-size: 14px;
  }

  .ant-btn:hover {
    background: #fff;
    color: #0558e1;
    opacity: 0.8;
  }

  .ant-btn:active {
    background: #fff;
    color: #0558e1;
    opacity: 0.8;
  }
}

.info-title {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 16px;
}

.add-btn {
  margin-left: 10px;
}
</style>