ubcs.git - Gitblit

<template>
  <basic-container>
    <avue-tabs :option="Taboption" @change="handleChange"></avue-tabs>
    <span v-if="type.prop==='tab1'">
      <attrCrud></attrCrud>
    </span>
    <span v-else-if="type.prop==='tab2'">模板流程</span>
    <span v-else-if="type.prop==='tab3'">模板阶段</span>
    <span v-else-if="type.prop==='tab4'">模板按钮流程</span>
  </basic-container>
 
</template>
 
<script>
export default {
  name: "TemplatePro.vue",
  data: function () {
    return {
      type: {},
      Taboption: {
        column: [{
          icon: 'el-icon-info',
          label: '模板属性',
          prop: 'tab1',
        }, {
          icon: 'el-icon-warning',
          label: '模板流程',
          prop: 'tab2',
        }, {
          icon: 'el-icon-question',
          label: '模板阶段',
          prop: 'tab3',
        }, {
          icon: 'el-icon-question',
          label: '模板按钮流程',
          prop: 'tab4',
        }]
      },
 
    }
  },
  created() {
    // 进入页面默认是模板属性
    this.type = this.Taboption.column[0];
    this.type.prop = "tab1"
  },
  methods: {
    // Tab栏切换
    handleChange(column) {
      this.type = column
      this.$message.success(JSON.stringify(column))
    },
  }
}
</script>
 
 
<!--<template>-->
<!--  &lt;!&ndash; 使用 Element UI 的表格组件展示数据 &ndash;&gt;-->
<!--  &lt;!&ndash; 对每行数据渲染一个表格行组件 &ndash;&gt;-->
<!--  <el-table :data="data">-->
<!--    <el-table-column v-for="column in columns" :key="column.prop" :label="column.label">-->
<!--      <template slot-scope="scope">-->
<!--        <template v-if="isEditing(scope.$index, column.prop)">-->
<!--          &lt;!&ndash; 使用自定义输入框，绑定数据并监听 blur 事件 &ndash;&gt;-->
<!--          <el-input v-model="editorModel[scope.$index][column.prop]" ref="editor"-->
<!--                    @blur="onEditorBlur(scope.$index, column.prop)">-->
<!--          </el-input>-->
<!--        </template>-->
<!--        <template v-else>-->
<!--          &lt;!&ndash; 将数据渲染为表格单元格，绑定 click 事件 &ndash;&gt;-->
<!--          <div @click="onCellClick(scope.$index, column.prop)"-->
<!--               :style="{cursor: 'pointer', backgroundColor: isEditing(scope.$index, column.prop) ? '#F0F0F0' : 'transparent'}">-->
<!--            {{ scope.row[column.prop] === "" ? '' : scope.row[column.prop] }}-->
<!--          </div>-->
<!--        </template>-->
<!--      </template>-->
<!--    </el-table-column>-->
<!--  </el-table>-->
<!--</template>-->
 
<!--<script>-->
<!--export default {-->
<!--  data() {-->
<!--    // 组件的数据，包括表格的数据、列定义和当前正在编辑的行和列-->
<!--    return {-->
<!--      data: [-->
<!--        { id: 1, name: '张三', age: 18, attributegroup: '男', attributeDataTypeText: '广东省深圳市' },-->
<!--        { id: 2, name: '李四', age: 20, attributegroup: '女', attributeDataTypeText: '北京市海淀区' },-->
<!--        { id: 3, name: '王五', age: 22, attributegroup: '男', attributeDataTypeText: '上海市浦东新区' },-->
<!--        { id: 4, name: '赵六', age: 24, attributegroup: '女', attributeDataTypeText: '广东省广州市' }-->
<!--      ],-->
<!--      columns: [  // 定义表格的列-->
<!--        {-->
<!--          label: "属性英文编号",-->
<!--          prop: "id",-->
<!--          fixed: true,-->
<!--          cell: false,-->
<!--          labelWidth: 110,-->
<!--          width: 125,-->
<!--          sortable: true,-->
<!--        },-->
<!--        {-->
<!--          label: "属性中文名称",-->
<!--          prop: "name",-->
<!--          fixed: true,-->
<!--          cell: false,-->
<!--          width: 125,-->
<!--          sortable: true-->
<!--        },-->
<!--        {-->
<!--          label: "属性分组",-->
<!--          prop: "attributegroup",-->
<!--          cell: false,-->
<!--          sortable: true,-->
<!--          width: 125,-->
<!--        },-->
<!--        {-->
<!--          label: "类型",-->
<!--          prop: "attributeDataTypeText",-->
<!--          cell: false,-->
<!--          sortable: true,-->
<!--        },-->
<!--        {-->
<!--          label: "列表宽度",-->
<!--          prop: "attrTableWidth",-->
<!--          cell: false,-->
<!--          sortable: true,-->
<!--          width: 105,-->
<!--        },-->
<!--        {-->
<!--          label: "关键属性",-->
<!--          prop: "keyattrflag",-->
<!--          cell: false,-->
<!--        },-->
<!--        {-->
<!--          label: "查询属性",-->
<!--          prop: "queryattrflag",-->
<!--          cell: false,-->
<!--        },-->
<!--        {-->
<!--          label: "高级查询属性",-->
<!--          prop: "seniorqueryattrflag",-->
<!--          width: 95,-->
<!--          cell: false,-->
<!--        },-->
<!--        {-->
<!--          label: "相似查询属性",-->
<!--          prop: "samerepeatattrflag",-->
<!--          width: 95,-->
<!--          cell: false,-->
<!--        },-->
<!--        {-->
<!--          label: "必输",-->
<!--          prop: "requireflag",-->
<!--          cell: false,-->
<!--        },-->
<!--        {-->
<!--          label: "表单显示",-->
<!--          prop: "formdisplayflag",-->
<!--          cell: false,-->
<!--        },-->
<!--        {-->
<!--          label: "列表显示",-->
<!--          prop: "tabledisplayflag",-->
<!--          cell: false,-->
<!--        },-->
<!--        {-->
<!--          label: "只读",-->
<!--          prop: "readonlyflag",-->
<!--          cell: false,-->
<!--        },-->
<!--        {-->
<!--          label: "列表排序",-->
<!--          prop: "sortattrflag",-->
<!--          cell: false,-->
<!--        },-->
 
<!--        {-->
<!--          label: "多行文本",-->
<!--          prop: "textareaflag",-->
<!--          cell: false,-->
<!--        },-->
<!--        {-->
<!--          label: "默认值",-->
<!--          prop: "defaultvalue",-->
<!--          sortable: true,-->
<!--          cell: false,-->
<!--          width: 95,-->
<!--        },-->
<!--        {-->
<!--          label: "前缀",-->
<!--          prop: "prefixvalue",-->
<!--          sortable: true,-->
<!--          cell: false,-->
<!--        },-->
<!--        {-->
<!--          label: "后缀",-->
<!--          prop: "suffixvalue",-->
<!--          sortable: true,-->
<!--          cell: false,-->
<!--        },-->
<!--        {-->
<!--          label: "组合规则",-->
<!--          prop: "componentrule",-->
<!--          sortable: true,-->
<!--          cell: false,-->
<!--          width: 105,-->
<!--        },-->
<!--        {-->
<!--          label: "验证规则",-->
<!--          prop: "verifyrule",-->
<!--          sortable: true,-->
<!--          cell: false,-->
<!--          width: 105,-->
<!--        },-->
<!--        {-->
<!--          label: "时间格式",-->
<!--          prop: "codedateformat",-->
<!--          sortable: true,-->
<!--          width: 105,-->
<!--          cell: false,-->
<!--        },-->
<!--        {-->
<!--          label: "分类注入",-->
<!--          prop: "classifyinvokelevel",-->
<!--          cell: false,-->
<!--        },-->
<!--        {-->
<!--          label: "枚举注入",-->
<!--          prop: "enumString",-->
<!--          cell: false,-->
<!--        },-->
<!--        {-->
<!--          label: "级联属性",-->
<!--          prop: "parentCode",-->
<!--          cell: false,-->
<!--        },-->
<!--        {-->
<!--          label: "参照配置",-->
<!--          prop: "referConfig",-->
<!--          cell: false,-->
<!--        },-->
<!--        {-->
<!--          label: "级联查询属性",-->
<!--          prop: "parentQueryAttr",-->
<!--          width: 105,-->
<!--          cell: false,-->
<!--        },-->
<!--        {-->
<!--          label: "选择库标识",-->
<!--          prop: "libraryIdentification",-->
<!--          width: 105,-->
<!--          cell: false,-->
<!--        },-->
<!--        {-->
<!--          label: "填写提示",-->
<!--          prop: "explain",-->
<!--          cell: false,-->
<!--        },-->
<!--        {-->
<!--          label: "表单显示样式",-->
<!--          prop: "formdisplaystyle",-->
<!--          width: 105,-->
<!--          cell: false,-->
<!--        },-->
<!--        {-->
<!--          label: "表格显示样式",-->
<!--          prop: "tabledisplaystyle",-->
<!--          width: 105,-->
<!--          cell: false,-->
<!--        },-->
<!--        {-->
<!--          label: "表单超链接",-->
<!--          prop: "formhref",-->
<!--          width: 95,-->
<!--          cell: false,-->
<!--        },-->
<!--        {-->
<!--          label: "表格超链接",-->
<!--          prop: "tablehref",-->
<!--          width: 95,-->
<!--          cell: false,-->
<!--        },-->
<!--        {-->
<!--          label: "表格显示js",-->
<!--          prop: "tabledisplayjs",-->
<!--          width: 95,-->
<!--          cell: false,-->
<!--        },-->
<!--        {-->
<!--          label: "长度",-->
<!--          prop: "controllength",-->
<!--          cell: false,-->
<!--        },-->
<!--        {-->
<!--          label: "小数精度",-->
<!--          prop: "precisionlength",-->
<!--          cell: false,-->
<!--        },-->
<!--        {-->
<!--          label: "取值范围",-->
<!--          prop: "valuearea",-->
<!--          sortable: true,-->
<!--          cell: false,-->
<!--          width: 105,-->
<!--        },-->
 
<!--      ],-->
<!--      editingIndex: -1,  // 当前正在编辑的行的索引-->
<!--      editingColumn: '',  // 当前正在编辑的列的属性名-->
<!--      editorModel: []  // 编辑框的数据，使用数组保存每个单元格的数据-->
<!--    };-->
<!--  },-->
<!--  created() {-->
<!--    // 在组件创建时，初始化编辑框的数据-->
<!--    this.editorModel = this.data.map(row => {-->
<!--      const editorRow = {};-->
<!--      this.columns.forEach(column => {-->
<!--        editorRow[column.prop] = row[column.prop];-->
<!--      });-->
<!--      return editorRow;-->
<!--    });-->
<!--  },-->
<!--  methods: {-->
<!--    // 单元格点击事件处理函数-->
<!--    onCellClick(rowIndex, columnProp) {-->
<!--      if (this.editingIndex >= 0 && this.editingColumn) {-->
<!--        this.onEditorBlur(this.editingIndex, this.editingColumn);-->
<!--        return;-->
<!--      }-->
 
<!--      const cellValue = this.data[rowIndex][columnProp];-->
<!--      if (cellValue === undefined || cellValue === null) {-->
<!--        this.data[rowIndex][columnProp] = '';-->
<!--      }-->
 
<!--      this.editingIndex = rowIndex;-->
<!--      this.editingColumn = columnProp;-->
 
<!--      this.$nextTick(() => {-->
<!--        this.$refs.editor.focus();-->
<!--      });-->
<!--    },-->
 
<!--    // 编辑框失焦事件处理函数-->
<!--    onEditorBlur(rowIndex, columnProp) {-->
<!--      // 将当前编辑框的数据保存到表格数据中-->
<!--      const editorValue = this.editorModel[rowIndex][columnProp];-->
<!--      if (editorValue === '') {-->
<!--        this.data[rowIndex][columnProp] = undefined;-->
<!--      } else {-->
<!--        this.data[rowIndex][columnProp] = editorValue;-->
<!--      }-->
 
<!--      this.editingIndex = -1;-->
<!--      this.editingColumn = '';-->
<!--    },-->
<!--    // 判断指定单元格是否在编辑状态-->
<!--    isEditing(rowIndex, columnProp) {-->
<!--      return rowIndex === this.editingIndex && columnProp === this.editingColumn;-->
<!--    }-->
<!--  }-->
<!--};-->
<!--</script>-->
 
 
<style lang="scss">
//修改分类注入对话框公共样式
.mydialog .el-dialog__body {
  padding: 10px 20px 30px;
}
 
</style>