client-base-v5/src/window/attribute/AttributeEditPanel.vue

<template>
  <div class="container-fluid">
    <div class="row">
      <div class="btn-group" role="group">
        <button type="button" class="btn btn-default" @click="back">返回</button>
        <button type="button" class="btn btn-success" @click="refresh">刷新</button>
        <button type="button" class="btn btn-primary" @click="saveAttribute">保存</button>
        <button type="button" class="btn btn-info" @click="addAttribute">添加属性</button>
      </div>
    </div>
    <div v-for="attribute in attributes" :key="attribute.name" class="row">
      <div class="form-inline">
        <div class="form-group">
          <label>属性名称</label>
          <input v-model="attribute.name" autocomplete="off" type="text" class="form-control" />
        </div>
        <div class="checkbox">
          <label>
            <input v-model="attribute.isRequired" autocomplete="off" type="checkbox" /> 必填项
          </label>
        </div>
        <div class="checkbox">
          <label>
            <input v-model="attribute.isInput" autocomplete="off" type="checkbox" /> 输入项
          </label>
        </div>
        <div class="checkbox">
          <label>
            <input v-model="attribute.isMutipleSelect" autocomplete="off" type="checkbox" /> 多选
          </label>
        </div>
        <div class="checkbox">
          <label>
            <input v-model="attribute.isNumber" autocomplete="off" type="checkbox" /> 数字
          </label>
        </div>
        <button type="button" class="btn btn-danger" @click="deleteAttribute(attribute)">删除</button>
        <button type="button" class="btn btn-info" @click="addAttributeName(attribute)">添加属性值</button>
      </div>
      <div v-for="attributeName in attribute.attributeNameDtoList" :key="attributeName.id" class="form-inline form-attributeName">
        <div class="form-group">
          <label>属性值</label>
          <input v-if="attribute.isNumber" v-model="attributeName.nameDec" autocomplete="off" type="number" class="form-control" />
          <input v-else v-model="attributeName.nameStr" autocomplete="off" type="text" class="form-control" />
        </div>
        <button type="button" class="btn btn-danger" @click="deleteAttributeName(attribute, attributeName)">删除</button>
      </div>
    </div>
  </div>
</template>

<script>
import Common from '../../common/Common.js';
import { Notify, Uuid } from 'pc-component-v3';

export default {

  components: {
    
  },
  props: [],

  data: function() {
    return {
      modelData: {},
      attributeKey: null,
      attributes: [],
    };
  },

  mounted: function() {
    var _self = this;
    var uuid = this.$route.params.uuid;
    var cacheData = localStorage.getItem(uuid);
    if (cacheData != undefined && cacheData.length > 0) {
      cacheData = JSON.parse(cacheData);
      _self.modelData = cacheData.modelData;
    }
    console.log(_self.modelData);
    _self.initData();
  },

  methods: {
    /**
         * 初始化数据
         * @return {void}
         */
    initData: function() {
      var _self = this;
      if (
        _self.modelData.data.attributeKey != undefined &&
                _self.modelData.data.attributeKey.displayValue != undefined
      ) {
        var displayValue =
                    _self.modelData.data.attributeKey.displayValue;
        if (displayValue.length > 0) {
          _self.attributeKey = displayValue[0];
          _self.getAttribute();
        }
      }
    },

    /**
         * 获取属性
         * @return {void}
         */
    getAttribute: function() {
      var _self = this;
      $.ajax({
        url: Common.getApiURL('attributeResource/getAttribute'),
        type: 'get',
        dataType: 'json',
        beforeSend: function(request) {
          Common.addTokenToRequest(request);
        },
        // contentType : "application/json",
        data: {
          classKey: _self.attributeKey,
        },
        success: function(data) {
          console.log('=========>');
          console.log(data);
          _self.attributes = data;
        },
        error: function(XMLHttpRequest, textStatus, errorThrown) {
          Common.processException(
            XMLHttpRequest,
            textStatus,
            errorThrown,
          );
        },
      });
    },

    /**
         * 添加属性
         */
    addAttribute: function() {
      var _self = this;
      var newAttribute = _self.generateAttribute();
      _self.attributes.push(newAttribute);
    },

    /**
         * 保存属性
         * @return {void}
         */
    saveAttribute: function() {
      var _self = this;
      console.log(_self.attributes);
      $.ajax({
        url: Common.getApiURL('attributeResource/saveAttribute'),
        type: 'post',
        beforeSend: function(request) {
          Common.addTokenToRequest(request);
        },
        contentType: 'application/json',
        data: JSON.stringify(_self.attributes),
        success: function(data) {
          Notify.success('成功', '保存成功', true);
        },
        error: function(XMLHttpRequest, textStatus, errorThrown) {
          Common.processException(
            XMLHttpRequest,
            textStatus,
            errorThrown,
          );
        },
      });
    },

    /**
         * 刷新
         * @return {void}
         */
    refresh: function() {
      var _self = this;
      _self.attributes = [];
      _self.getAttribute();
    },

    /**
         * 删除属性
         * @param  {Object} attribute 属性
         * @return {void}
         */
    deleteAttribute: function(attribute) {
      var _self = this;
      if (attribute.id != undefined && attribute.id > 0) {
        Notify.show({
          title: _self.$t('lang.AttributeEditPane.deleteConfirmation'),
          message:
          _self.$t('lang.AttributeEditPane.someWhatThree') +
                        attribute.name +
                        _self.$t('lang.AttributeEditPane.someWhatFour'),
          buttons: [
            {
              label: _self.$t('lang.AttributeEditPane.determine'),
              cssClass: 'btn-primary',
              action: function(dialogItself) {
                dialogItself.close();
                $.ajax({
                  url: Common.getApiURL(
                    'attributeResource/deleteAttribute',
                  ),
                  type: 'get',
                  dataType: 'json',
                  beforeSend: function(request) {
                    Common.addTokenToRequest(request);
                  },
                  data: {
                    attributeId: attribute.id,
                  },
                  success: function(data) {
                    var index = _self.attributes.indexOf(
                      attribute,
                    );
                    if (index >= 0) {
                      _self.attributes.splice(index, 1);
                    }
                  },
                  error: function(
                    XMLHttpRequest,
                    textStatus,
                    errorThrown,
                  ) {
                    Common.processException(
                      XMLHttpRequest,
                      textStatus,
                      errorThrown,
                    );
                  },
                });
              },
            },
            {
              label: _self.$t('lang.AttributeEditPane.cancel'),
              action: function(dialogItself) {
                dialogItself.close();
              },
            },
          ],
        });
      } else {
        var index = _self.attributes.indexOf(attribute);
        if (index >= 0) {
          _self.attributes.splice(index, 1);
        }
      }
    },

    /**
         * 添加属性名称
         * @param {void} attribute
         */
    addAttributeName: function(attribute) {
      var _self = this;
      var newAttributeName = _self.generateAttributeName();
      if (attribute.id != undefined && attribute.id > 0) {
        newAttributeName.attributeId = attribute.id;
      }
      attribute.attributeNameDtoList.push(newAttributeName);
    },

    /**
         * 删除属性名称
         * @param  {Object} attribute     属性
         * @param  {Object} attributeName 属性名称
         * @return {void}
         */
    deleteAttributeName: function(attribute, attributeName) {
      var _self = this;
      if (attributeName.id != undefined && attributeName.id > 0) {
        Notify.show({
          title:_self.$t('lang.AttributeEditPane.deleteConfirmation'),
          message:
          _self.$t('lang.AttributeEditPane.someWhatOne') +
                        attributeName.name +
                        _self.$t('lang.AttributeEditPane.someWhatTwo'),
          buttons: [
            {
              label: _self.$t('lang.AttributeEditPane.determine'),
              cssClass: 'btn-primary',
              action: function(dialogItself) {
                dialogItself.close();
                $.ajax({
                  url: Common.getApiURL(
                    'attributeResource/deleteAttributeName',
                  ),
                  type: 'get',
                  dataType: 'json',
                  beforeSend: function(request) {
                    Common.addTokenToRequest(request);
                  },
                  data: {
                    attributeNameId: attributeName.id,
                  },
                  success: function(data) {
                    var index = attribute.attributeNameDtoList.indexOf(
                      attributeName,
                    );
                    if (index >= 0) {
                      attribute.attributeNameDtoList.splice(
                        index,
                        1,
                      );
                    }
                  },
                  error: function(
                    XMLHttpRequest,
                    textStatus,
                    errorThrown,
                  ) {
                    Common.processException(
                      XMLHttpRequest,
                      textStatus,
                      errorThrown,
                    );
                  },
                });
              },
            },
            {
              label: _self.$t('lang.AttributeEditPane.cancel'),
              action: function(dialogItself) {
                dialogItself.close();
              },
            },
          ],
        });
      } else {
        var index = attribute.attributeNameDtoList.indexOf(
          attributeName,
        );
        if (index >= 0) {
          attribute.attributeNameDtoList.splice(index, 1);
        }
      }
    },

    /**
         * 生成Attribute
         * @return {Object} 属性
         */
    generateAttribute: function() {
      var _self = this;
      var newAttribute = {
        id: -1,
        name: '',
        help: '',
        classKey: _self.attributeKey,
        isRequired: false,
        isInput: false,
        isSearchable: false,
        isMutipleSelect: false,
        isNumber: false,
        attributeNameDtoList: [],
      };
      return newAttribute;
    },

    /**
         * 生成AttributeName
         * @return {Object} 属性值
         */
    generateAttributeName: function() {
      var _self = this;
      var newAttributeName = {
        id: -1,
        attributeId: null,
        nameStr: '',
        nameDec: null,
      };
      return newAttributeName;
    },

    /**
         * 返回
         * @return {void}
         */
    back: function() {
      window.history.back();
    },
  },
};
</script>
<style scoped>
.checkbox {
    margin-left: 10px;
}

.form-attributeName {
    margin-left: 100px;
}
</style>