Source/UBCS-WEB/src/components/Tree/TemplatePro.vue

@@ -2,11 +2,10 @@
  <basic-container>
    <avue-tabs :option="Taboption" @change="handleChange"></avue-tabs>
    <span v-if="type.prop==='tab1'">
    <avue-crud :data="data" :option="option"></avue-crud>
      <attrCrud :ProData="ProData" :crudOid="crudOid" :crudArray="crudArray" :Formlist="Formlist"></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>
@@ -14,215 +13,355 @@
<script>
export default {
  name: "TemplatePro.vue",
  props: ['ProData','crudOid','crudArray','Formlist'],
  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',
        }]
      },
      data:[
        {
          EnglishNum:"测试一",
          ChinaName:"测试一",
          PropGruop:"测试一",
          Type:"测试一"
        },
        {
          EnglishNum:"测试二",
          ChinaName:"测试二",
          PropGruop:"测试二",
          Type:"测试二"
        },
        {
          EnglishNum:"测试三",
          ChinaName:"测试三",
          PropGruop:"测试三",
          Type:"测试三"
        }
      ],
      option: {
        index: true,
        border: true,
        editBtn:false,
        labelWidth:110,
        column: [
          {
            label: "属性英文编号",
            prop: "EnglishNum",
            fixed:true,
            labelWidth:110,
            width:95
          },
          {
            label: "属性中文名称",
            prop: "ChinaName",
            fixed:true,
            width:95
          },
          {
            label: "属性分组",
            prop: "PropGruop"
          },
          {
            label: "类型",
            prop: "Type"
          },
          {
            label: "列表宽度",
            prop: "ListWidth"
          },
          {
            label: "关键属性",
            prop: "KeyAttr"
          },
          {
            label: "查询属性",
            prop: "QueryPro"
          },
          {
            label: "高级查询属性",
            prop: "SeniorQueryPro",
            width:95
          },
          {
            label: "相似查询属性",
            prop: "SimilarPro",
            width:95
          },
          {
            label: "必输",
            prop: "MustLose"
          },
          {
            label: "表单显示",
            prop: "FormDIs"
          },
          {
            label: "列表显示",
            prop: "TableDis"
          },
          {
            label: "只读",
            prop: "readOnly"
          },
          {
            label: "列表排序",
            prop: "ListSort"
          },

          {
            label: "多行文本",
            prop:"LineText",
          },
          {
            label: "默认值",
            prop:"DefaultValue",
          },
          {
            label: "前缀",
            prop:"prefix",
          },
          {
            label: "后缀",
            prop:"suffix"
          },
          {
            label: "组合规则",
            prop:"ComRules"
          },
          {
            label: "验证规则",
            prop:"rules"
          },
          {
            label: "时间格式",
            prop:"TimeForm"
          },
          {
            label: "分类注入",
            prop:"claInjection"
          },
          {
            label: "分类注入",
            prop:"EnuInjection"
          },
          {
            label: "级联属性",
            prop:"CasProp"
          },
          {
            label: "参照配置",
            prop:"RefConfig"
          },
          {
            label: "级联查询属性",
            prop:"CasQueryProp"
          },
          {
            label: "选择库标识",
            prop:"SelectLib"
          },
          {
            label: "填写提示",
            prop:"FillPrompt"
          },
          {
            label: "表单显示样式",
            prop:"FormShow"
          },
          {
            label: "表单超链接",
            prop:"FormHer"
          },
          {
            label: "表格显示js",
            prop:"CrudJs"
          },
          {
            label: "长度",
            prop:"length"
          },
          {
            label: "小数精度",
            prop:"DecimalPrecis"
          },
          {
            label: "取值范围",
            prop:"ValueRange"
          },
        ]
      }
    }
  },
  created() {
    // 进入页面默认是模板属性
    this.type = this.Taboption.column[0];
    this.type.prop="tab1"
    this.type.prop = "tab1"
  },
  methods: {
    // Tab栏切换
    handleChange(column) {
      this.type = column
      this.$message.success(JSON.stringify(column))
    }
    },
  }
}
</script>

<style scoped>

<!--<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>