EntityBusinessMetaDataItemView.js 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221
  1. define([ "require", "backbone", "utils/Utils", "hbs!tmpl/entity/EntityBusinessMetaDataItemView_tmpl", "moment", "utils/Globals", "daterangepicker" ], function(require, Backbone, Utils, EntityBusinessMetaDataItemViewTmpl, moment, Globals) {
  2. "use strict";
  3. return Backbone.Marionette.ItemView.extend({
  4. _viewName: "EntityBusinessMetaDataItemView",
  5. template: EntityBusinessMetaDataItemViewTmpl,
  6. templateHelpers: function() {
  7. return {
  8. editMode: this.editMode,
  9. entity: this.entity,
  10. getValue: this.getValue.bind(this),
  11. getBusinessMetadataDroupdown: this.getBusinessMetadataDroupdown.bind(this),
  12. businessMetadataCollection: this.businessMetadataCollection,
  13. model: this.model.toJSON()
  14. };
  15. },
  16. tagName: "li",
  17. className: "business-metadata-tree-child",
  18. regions: {},
  19. ui: {
  20. keyEl: "[data-id='key']",
  21. valueEl: "[data-type='value']",
  22. addItem: "[data-id='addItem']",
  23. deleteItem: "[data-id='deleteItem']",
  24. editMode: "[data-id='editMode']"
  25. },
  26. events: function() {
  27. var events = {};
  28. return events["click " + this.ui.deleteItem] = "onDeleteItem", events["change " + this.ui.keyEl] = "onAttrChange",
  29. events;
  30. },
  31. initialize: function(options) {
  32. _.extend(this, options);
  33. },
  34. onRender: function() {
  35. this.ui.keyEl.val(""), this.ui.keyEl.select2({
  36. placeholder: "请选择属性"
  37. }), this.editMode && !this.model.has("isNew") && this.getEditBusinessMetadataEl(),
  38. this.initializeElement(), this.bindEvent();
  39. },
  40. initializeElement: function() {},
  41. bindEvent: function() {
  42. var that = this;
  43. this.editMode && (this.listenTo(this.model.collection, "destroy unset:attr", function() {
  44. this.model.has("isNew") && this.render();
  45. }), this.listenTo(this.model.collection, "selected:attr", function(value, model) {
  46. if (model.cid !== this.model.cid && this.model.has("isNew")) {
  47. var $select2el = that.$el.find('.custom-col-1:first-child>select[data-id="key"]');
  48. $select2el.find('option[value="' + value + '"]').remove();
  49. $select2el.select2("val");
  50. $select2el.select2({
  51. placeholder: "请选择属性"
  52. }), this.model.keys().length <= 2 && $select2el.val("").trigger("change", !0);
  53. }
  54. }), this.$el.off("change", ".custom-col-1[data-id='value']>[data-key]").on("change", ".custom-col-1[data-id='value']>[data-key]", function(e) {
  55. var key = $(this).data("key"), businessMetadata = $(this).data("businessMetadata"), typeName = $(this).data("typename"), multi = $(this).data("multi"), updateObj = that.model.toJSON();
  56. if (_.isUndefinedNull(updateObj[key]) && (updateObj[key] = {
  57. value: null,
  58. typeName: typeName
  59. }), updateObj[key].value = e.currentTarget.value, multi && typeName.indexOf("date") == -1 && (updateObj[key].value = $(this).select2("val")),
  60. that.model.has("__internal_UI_businessMetadataName") || (updateObj.__internal_UI_businessMetadataName = businessMetadata),
  61. "date" === typeName || "array<date>" === typeName) if (multi && updateObj[key].value) {
  62. var dateValues = updateObj[key].value.split(","), dateStr = [];
  63. dateValues.length && (_.each(dateValues, function(selectedDate) {
  64. dateStr.push(new Date(selectedDate.trim()).getTime());
  65. }), updateObj[key].value = dateStr);
  66. } else updateObj[key].value = new Date(updateObj[key].value).getTime();
  67. that.model.set(updateObj);
  68. }), this.$el.on("keypress", ".select2_only_number .select2-search__field", function() {
  69. var typename = $(this).parents(".select2_only_number").find("select[data-typename]").data("typename");
  70. ("float" !== typename && "array<float>" !== typename || 46 != event.which) && (event.which < 48 || event.which > 57) && "-" !== event.key && event.preventDefault();
  71. }));
  72. },
  73. getAttrElement: function(opt) {
  74. var that = this, returnEL = "N/A", options = $.extend(!0, {}, opt);
  75. if (options) {
  76. var key = options.key, typeName = options.val.typeName || "", val = options.val.value, isMultiValued = typeName && 0 === typeName.indexOf("array<"), businessMetadata = options.businessMetadata, allowOnlyNum = !1, isEnum = !1, elType = isMultiValued ? "select" : "input";
  77. if (isMultiValued || _.isEmpty(val) || (val = _.escape(val)), _.isUndefinedNull(val) || "boolean" !== typeName && "array<boolean>" !== typeName || (val = String(val)),
  78. "date" === typeName || "array<date>" === typeName) if (isMultiValued && val && val.length) {
  79. var dateStr = [];
  80. _.each(val, function(selectedDate) {
  81. selectedDate = parseInt(selectedDate), dateStr.push(Utils.formatDate({
  82. date: selectedDate,
  83. zone: !1,
  84. dateFormat: Globals.dateFormat
  85. }));
  86. }), val = dateStr.join(",");
  87. } else !isMultiValued && val && (val = parseInt(val), val = Utils.formatDate({
  88. date: val,
  89. zone: !1,
  90. dateFormat: Globals.dateFormat
  91. }));
  92. if ("string" === typeName || "array<string>" === typeName) returnEL = "<" + elType + ' type="text" data-key="' + key + '" data-businessMetadata="' + businessMetadata + '" data-typename="' + typeName + '" data-multi="' + isMultiValued + '" data-tags="true" placeholder="输入字符串" class="form-control" ' + (isMultiValued !== !1 || _.isUndefinedNull(val) ? "" : 'value="' + val + '"') + "></" + elType + ">"; else if ("boolean" === typeName || "array<boolean>" === typeName) returnEL = '<select data-key="' + key + '" data-businessMetadata="' + businessMetadata + '" data-typename="' + typeName + '" data-multi="' + isMultiValued + '" class="form-control">' + (isMultiValued ? "" : '<option value="">--Select Value--</option>') + '<option value="true" ' + (_.isUndefinedNull(val) || "true" != val ? "" : "selected") + '>true</option><option value="false" ' + (_.isUndefinedNull(val) || "false" != val ? "" : "selected") + ">false</option></select>"; else if ("date" === typeName || "array<date>" === typeName) returnEL = "<" + (isMultiValued ? "textarea" : "input") + ' type="text" data-key="' + key + '" data-businessMetadata="' + businessMetadata + '" data-typename="' + typeName + '"data-multi="' + isMultiValued + '" data-type="date" class="form-control" ' + (isMultiValued !== !1 || _.isUndefinedNull(val) ? "" : 'value="' + val + '"') + ">" + (isMultiValued !== !0 || _.isUndefinedNull(val) ? "" : val) + (isMultiValued ? "</textarea>" : ""),
  93. setTimeout(function() {
  94. var dateObj = {
  95. singleDatePicker: !0,
  96. showDropdowns: !0,
  97. autoUpdateInput: !isMultiValued,
  98. locale: {
  99. format: Globals.dateFormat
  100. }
  101. }, dateEl = that.$el.find('[data-type="date"][data-key="' + key + '"]').daterangepicker(dateObj);
  102. isMultiValued && dateEl.on("apply.daterangepicker", function(ev, picker) {
  103. var val = picker.element.val();
  104. "" !== val && (val += ", "), picker.element.val(val += Utils.formatDate({
  105. date: picker.startDate,
  106. zone: !1,
  107. dateFormat: Globals.dateFormat
  108. })), that.$el.find(".custom-col-1[data-id='value']>[data-key]").trigger("change");
  109. });
  110. }, 0); else if ("byte" === typeName || "array<byte>" === typeName || "short" === typeName || "array<short>" === typeName || "int" === typeName || "array<int>" === typeName || "float" === typeName || "array<float>" === typeName || "double" === typeName || "array<double>" === typeName || "long" === typeName || "array<long>" === typeName) allowOnlyNum = !0,
  111. returnEL = "<" + elType + ' data-key="' + key + '" data-businessMetadata="' + businessMetadata + '" data-typename="' + typeName + '" type="number" data-multi="' + isMultiValued + '" data-tags="true" placeholder="输入数字" class="form-control" ' + (_.isUndefinedNull(val) ? "" : 'value="' + val + '"') + "></" + elType + ">"; else if (typeName) {
  112. isEnum = !0;
  113. var modTypeName = typeName;
  114. if (isMultiValued) {
  115. var multipleType = typeName.match("array<(.*)>");
  116. multipleType && multipleType[1] && (modTypeName = multipleType[1]);
  117. }
  118. var foundEnumType = this.enumDefCollection.fullCollection.find({
  119. name: modTypeName
  120. });
  121. if (foundEnumType) {
  122. var enumOptions = "";
  123. _.forEach(foundEnumType.get("elementDefs"), function(obj) {
  124. enumOptions += '<option value="' + _.escape(obj.value) + '">' + _.escape(obj.value) + "</option>";
  125. }), returnEL = '<select data-key="' + key + '" data-businessMetadata="' + businessMetadata + '" data-typename="' + typeName + '" data-multi="' + isMultiValued + '" data-enum="true">' + enumOptions + "</select>";
  126. }
  127. }
  128. (isEnum || "select" === elType) && setTimeout(function() {
  129. var selectEl = that.$el.find('.custom-col-1[data-id="value"] select[data-key="' + key + '"]'), data = [];
  130. data = selectEl.data("multi") ? val && val.length && (_.isArray(val) ? val : val.split(",")) || [] : _.unescape(val),
  131. allowOnlyNum && selectEl.parent().addClass("select2_only_number");
  132. var opt = {
  133. tags: !!selectEl.data("tags"),
  134. multiple: selectEl.data("multi"),
  135. createTag: function(params) {
  136. var option = params.term;
  137. if ($.isNumeric(option)) return {
  138. id: option,
  139. text: option
  140. };
  141. }
  142. };
  143. selectEl.data("enum") || (opt.data = data), selectEl.select2(opt), selectEl.val(data).trigger("change");
  144. }, 0);
  145. }
  146. return returnEL;
  147. },
  148. onAttrChange: function(e, manual) {
  149. var key = e.currentTarget.value.split(":");
  150. if (key.length && 3 === key.length) {
  151. var valEl = $(e.currentTarget).parent().siblings(".custom-col-1"), hasModalData = this.model.get(key[1]);
  152. if (!hasModalData) {
  153. var tempObj = {
  154. __internal_UI_businessMetadataName: key[0]
  155. };
  156. this.model.has("isNew") && (tempObj.isNew = !0), tempObj[key[1]] = null, this.model.clear({
  157. silent: !0
  158. }).set(tempObj);
  159. }
  160. valEl.html(this.getAttrElement({
  161. businessMetadata: key[0],
  162. key: key[1],
  163. val: hasModalData ? hasModalData : {
  164. typeName: key[2]
  165. }
  166. })), void 0 === manual && this.model.collection.trigger("selected:attr", e.currentTarget.value, this.model);
  167. }
  168. },
  169. getValue: function(value, key, businessMetadataName) {
  170. var typeName = value.typeName, value = value.value;
  171. return "date" === typeName ? Utils.formatDate({
  172. date: value,
  173. zone: !1,
  174. dateFormat: Globals.dateFormat
  175. }) : value;
  176. },
  177. getBusinessMetadataDroupdown: function(businessMetadataCollection) {
  178. var optgroup = "", that = this, model = that.model.omit([ "isNew", "__internal_UI_businessMetadataName" ]), keys = _.keys(model), isSelected = !1, selectdVal = null;
  179. return 1 === keys.length && (isSelected = !0), _.each(businessMetadataCollection, function(obj, key) {
  180. var options = "";
  181. obj.length && (_.each(obj, function(attrObj) {
  182. var entityBusinessMetadata = that.model.collection.filter({
  183. __internal_UI_businessMetadataName: key
  184. }), hasAttr = !1;
  185. if (entityBusinessMetadata) {
  186. var found = entityBusinessMetadata.find(function(eObj) {
  187. return eObj.attributes.hasOwnProperty(attrObj.name);
  188. });
  189. found && (hasAttr = !0);
  190. }
  191. if (isSelected && keys[0] === attrObj.name || !hasAttr) {
  192. var value = key + ":" + attrObj.name + ":" + attrObj.typeName;
  193. isSelected && keys[0] === attrObj.name && (selectdVal = value), options += '<option value="' + value + '">' + attrObj.name + " (" + _.escape(attrObj.typeName) + ")</option>";
  194. }
  195. }), options.length && (optgroup += '<optgroup label="' + key + '">' + options + "</optgroup>"));
  196. }), setTimeout(function() {
  197. selectdVal ? that.$el.find('.custom-col-1:first-child>select[data-id="key"]').val(selectdVal).trigger("change", !0) : that.$el.find('.custom-col-1:first-child>select[data-id="key"]').val("").trigger("change", !0);
  198. }, 0), '<select data-id="key">' + optgroup + "</select>";
  199. },
  200. getEditBusinessMetadataEl: function() {
  201. var that = this, trs = "";
  202. _.each(this.model.attributes, function(val, key) {
  203. if ("__internal_UI_businessMetadataName" !== key && "isNew" !== key) {
  204. var td = '<td class="custom-col-1" data-key=' + key + ">" + key + " (" + _.escape(val.typeName) + ')</td><td class="custom-col-0">:</td><td class="custom-col-1" data-id="value">' + that.getAttrElement({
  205. businessMetadata: that.model.get("__internal_UI_businessMetadataName"),
  206. key: key,
  207. val: val
  208. }) + "</td>";
  209. td += '<td class="custom-col-2 btn-group"><button class="btn btn-default btn-sm" data-key="' + key + '" data-id="deleteItem"><i class="fa fa-times"> </i></button></td>',
  210. trs += "<tr class='custom-tr'>" + td + "</tr>";
  211. }
  212. }), this.$("[data-id='businessMetadataTreeChild']").html("<table class='custom-table'>" + trs + "</table>");
  213. },
  214. onDeleteItem: function(e) {
  215. var key = $(e.currentTarget).data("key");
  216. this.model.has(key) ? 2 === this.model.keys().length ? this.model.destroy() : (this.model.unset(key),
  217. this.model.has("isNew") || this.$el.find("tr>td:first-child[data-key='" + key + "']").parent().remove(),
  218. this.model.collection.trigger("unset:attr")) : this.model.destroy();
  219. }
  220. });
  221. });