property.vue

<template>
  <Collapse v-model="value1" class="property">
    <Panel name="1">
      列表设置
      <div slot="content">
        <div class="property-item" v-for="(config, index) in configList" :key="index">
          <Form :model="config" :label-width="80">
            <FormItem label="标题">
              <Input v-model="config.title"></Input>
            </FormItem>
            <FormItem label="跳转页面">
              <Select v-model="config.function" filterable>
                <Option v-for="item in functionList" :value="item.id" :key="item.id">
                  {{item.title}}
                </Option>
              </Select>
            </FormItem>
            <FormItem label="单位">
              <Input v-model="config.unit"></Input>
            </FormItem>
            <FormItem label="卡片图标">
              <Select v-model="config.icon">
                <Option v-for="item in iconList" :value="item.value" :key="item.value">{{ item.label }}</Option>
              </Select>
            </FormItem>
          </Form>
          <Button size="small" type="error" @click="removeItem(index)">删除</Button>
          <Divider />
        </div>
        <Button size="small" type="primary" @click="addItem">添加</Button>
      </div>
    </Panel>
  </Collapse>
</template>

<script>
export default {
  watch: {
    configList: {
      handler(newVal) {
        const properties = [...newVal]
        window.GMS.vbus.$emit('widgetPluginPropertiesChange', { id: this.type + this.id, properties })
        this.itemSetting.properties = properties
      },
      deep: true,
    },
  },
  props: {
    itemSetting: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      value1: null,
			configList: [],
      querysourceList: [],
      iconList: [
        {
          value: 'daishenpi',
          label: '待审批',
        },
        {
          value: 'bohuidaiban',
          label: '驳回待办',
        },
        {
          value: 'daixiayibushenpi',
          label: '待下一步审批',
        },
        {
          value: 'shenpiwancheng',
          label: '审批完成',
        },
      ],
      functionList: [],
    }
  },
  computed: {
    id() {
      return this.itemSetting.id
    },
    type() {
      return this.itemSetting.type
    }
  },
  methods: {
    addFunction(l = []) {
      for (let o of l) {
        if (o.type == 'ROUTE') {
          this.functionList.push(o)
        }
        else if (o.type == 'GROUP') {
          this.addFunction(o.children)
        }
      }
    },
    addItem() {
      this.configList.push({
        title: '',
        query: '',
        SQL: '',
        unit: '项',
      })
    },
    removeItem(index) {
      this.configList.splice(index, 1)
    },
  },
  created() {
    window.GMS.util.nvwa.getRoutes().then((res) => {
      this.addFunction(res.data.children)
    })
    window.GMS.$http.get(`/bpm/bill/queryTitle/querySourceList`).then((res) => {
      this.querysourceList = res?.data || []
    })
    let prop = this.itemSetting.properties
		if (prop) {
			this.configList = prop
		}
  },
}
</script>
<style scoped lang="scss">
</style>