client-base-v5/src/role/RoleCurdFieldTab.vue

<template>
  <div>
    <h3>{{ tab.name }}</h3>
    <div v-if="tabRoleCurdFieldDtos && tabRoleCurdFieldDtos.length > 0">
      <table class="fixed-table table table-striped table-bordered">
        <thead>
          <tr>
            <th style="width: 150px; text-align: center">字段名称</th>
            <th style="width: 150px; text-align: center">隐藏</th>
            <th style="width: 150px; text-align: center">只读</th>
            <th style="width: 150px; text-align: center">约束条件</th>
          </tr>
        </thead>

        <tbody>
          <tr
            v-for="(item, index) in tabRoleCurdFieldDtos"
            :key="'roleCurdFieldTab_field_' + index"
          >
            <template v-if="item.tabName == tab.name">
              <td>{{ item.displayName }}</td>

              <td v-if="item.mandatory == true" style="text-align: center">
                <input
                  v-model="item.invisible"
                  autocomplete="off"
                  type="checkbox"
                  name="checkboxinput"
                  :checked="item.checked"
                  disabled="disabled"
                  @click="item.checked = !item.checked"
                />
              </td>
              <td v-else>
                <input
                  v-model="item.invisible"
                  autocomplete="off"
                  type="checkbox"
                  name="checkboxinput"
                  :checked="item.checked"
                  @click="item.checked = !item.checked"
                />
              </td>

              <td style="text-align: center">
                <input
                  v-model="item.readonly"
                  autocomplete="off"
                  type="checkbox"
                  name="checkboxinput"
                  :checked="item.checked"
                  @click="item.checked = !item.checked"
                />
              </td>

              <td style="text-align: center">
                <input
                  v-model="item.whereClause"
                  autocomplete="off"
                  class="form-control"
                  aria-describedby="basic-addon1"
                />
              </td>
            </template>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
import Common from '../common/Common.js';
import RoleCurdFieldResource from '../api/base/RoleCurdFieldResource.js';
export default {

  components: {
  },


  
  props: {
    tab: {
      type: Object,
      default: function(){
        return null;
      },
    },
    roleCurdFieldList: {
      type: Array,
      default: function(){
        return null;
      },
    },


    roleId: {
      type: Number,
      default: null,
    },
    curdWindowNo: {
      type: String,
      default: null,
    },
  },




  data: function () {
    return {
      roleCurdFieldDtoList: [],
      curdWindowDto: {
        no: undefined,
        tabs: [],
      },
      tabRoleCurdFieldDtos: [],
    };
  },
  watch: {
    roleCurdFieldList: function (newValue, oldValue) {
      this.composite();
    },

    roleId: function (newValue, oldValue) {
      this.composite();
    },
  },

  mounted: function () {
    var _self = this;
    _self.composite();
  },

  methods: {
    /**
     * 获取界面变动的数据
     * @author LiangZhiCheng 20210324
     */
    getData: function () {
      var _self = this;
      var tempRoleCurdFields = [];
      _self.tabRoleCurdFieldDtos.forEach(item => {
        if (
          item.readonly == true ||
          item.invisible == true ||
          (item.whereClause != undefined && item.whereClause != '')
        ) {
          var roleCurdField = {
            roleId: _self.roleId,
            curdWindowNo: _self.curdWindowNo,
            tabName: item.tabName,
            fieldName: item.fieldName,
            displayName: item.displayName,
            entityFieldIndex: item.entityFieldIndex,
            invisible: item.invisible,
            readonly: item.readonly,
            whereClause: item.whereClause,
          };
          Object.assign(item, roleCurdField);
          tempRoleCurdFields.push(roleCurdField);
        }
      });

      return tempRoleCurdFields;
    },

    /**
     * 将CurdWindow查询到的数据和RoleCurdField表中的数据相结合
     * @author LiangZhiCheng 20210324
     */
    composite: function () {
      var _self = this;
      _self.tabRoleCurdFieldDtos.splice(0, _self.tabRoleCurdFieldDtos.length);
      if (
        _self.tab == undefined ||
        _self.tab.tabFormView == undefined ||
        _self.tab.tabFormView.tabFormFields == undefined
      ) {
        return;
      }
      console.log(_self.tab);
      for (var i = 0; i < _self.tab.tabFormView.tabFormFields.length; i++) {
        var tabFormField = _self.tab.tabFormView.tabFormFields[i];
        var roleCurdFieldDto = {
          tabName: _self.tab.name,
          fieldName: tabFormField.fieldName,
          displayName: tabFormField.displayName,
          entityFieldIndex: tabFormField.entityFieldIndex,
          mandatory: undefined,
          readonly: undefined,
          invisible: undefined,
          whereClause: undefined,
        };
        // console.log(_self.roleCurdFieldList);
        // console.log(_self.roleCurdFieldList.length);
        if (
          _self.roleCurdFieldList != null &&
          _self.roleCurdFieldList.length > 0
        ) {
          _self.roleCurdFieldList.forEach(item => {
            console.log(
              item.tabName == _self.tab.name &&
                item.fieldName == tabFormField.fieldName &&
                item.entityFieldIndex == tabFormField.entityFieldIndex &&
                (item.readonly == true ||
                  item.invisible == true ||
                  (item.whereClause != undefined && item.whereClause != '')),
            );
            if (
              item.tabName == _self.tab.name &&
              item.fieldName == tabFormField.fieldName &&
              item.entityFieldIndex == tabFormField.entityFieldIndex &&
              (item.readonly == true ||
                item.invisible == true ||
                (item.whereClause != undefined && item.whereClause != ''))
            ) {
              roleCurdFieldDto.invisible = item.invisible;
              roleCurdFieldDto.readonly = item.readonly;
              roleCurdFieldDto.whereClause = item.whereClause;
            }
          });
        }

        for (
          var j = 0;
          j < _self.tab.tabDataSource.tabDataSourceFields.length;
          j++
        ) {
          var mandatorys = _self.tab.tabDataSource.tabDataSourceFields[j];
          if (mandatorys.fieldName == roleCurdFieldDto.fieldName) {
            roleCurdFieldDto.mandatory = mandatorys.mandatory;
            break;
          }
        }

        _self.tabRoleCurdFieldDtos.push(roleCurdFieldDto);
      }
    },
  },
};
</script>