cloud-web-corejs 1.0.281 → 1.1.0-dev.4

package/src/components/xform/form-designer/setting-panel/property-editor/name-editor.vue

@@ -1,188 +1,188 @@
-<template>
-  <div>
-    <el-form-item class="form-item-label-top" prop="name" :rules="nameRequiredRule">
-      <span slot="label"
-        >{{ i18nt("designer.setting.uniqueName") }}
-        <el-tooltip effect="light" :content="i18nt('designer.setting.editNameHelp')">
-          <i class="el-icon-info"></i
-        ></el-tooltip>
-      </span>
-      <template
-        v-if="
-          (!!selectedWidget.category && selectedWidget.type !== 'sub-form') || noFieldList
-        "
-      >
-        <el-input
-          type="text"
-          v-model="optionModel.name"
-          :readonly="widgetNameReadonly"
-          @change="updateWidgetNameAndRef"
-        ></el-input>
-      </template>
-      <template v-else>
-        <el-select
-          v-model="optionModel.name"
-          allow-create
-          filterable
-          :disabled="true"
-          @change="updateWidgetNameAndRef"
-          :title="i18nt('designer.setting.editNameHelp')"
-        >
-          <el-option
-            v-for="(sf, sfIdx) in serverFieldList"
-            :key="sfIdx"
-            :label="sf.label"
-            :value="sf.name"
-          ></el-option>
-        </el-select>
-      </template>
-    </el-form-item>
-    <el-form-item label="按钮编码" v-show="showAuthCode" class="form-item-label-top">
-      <div style="word-break: break-all">
-        <el-tooltip effect="light" content="复制">
-          <a class="a-link" style="" @click="copyAuthCode"><i class="el-icon-copy-document"></i><span>{{ authCode }}</span></a>
-        </el-tooltip>
-      </div>
-    </el-form-item>
-  </div>
-</template>
-
-<script>
-import i18n from "../../../../../components/xform/utils/i18n";
-import { isEmptyStr } from "../../../../../components/xform/utils/util";
-import Clipboard from 'clipboard'
-
-export default {
-  name: "name-editor",
-  mixins: [i18n],
-  props: {
-    designer: Object,
-    selectedWidget: Object,
-    optionModel: Object,
-    parentList: Array,
-  },
-  inject: ["serverFieldList", "getDesignerConfig", "isDataTableChildWidget"],
-  data() {
-    return {
-      nameRequiredRule: [{ required: true, message: "name required" }],
-    };
-  },
-  computed: {
-    noFieldList() {
-      return !this.serverFieldList || this.serverFieldList.length <= 0;
-    },
-
-    widgetNameReadonly() {
-      return !!this.getDesignerConfig().widgetNameReadonly;
-    },
-    showAuthCode() {
-      // return this.selectedWidget.category !== "container";
-      return [
-        "button",
-        "a-text",
-        "a-link",
-        "a-link2",
-        "search_button",
-        "save_button",
-        "reset_button",
-        "table-export-button",
-        "select-export-button",
-        "add_button",
-        "import-button",
-        "import2-button",
-        "print-button",
-        "print-detail-button",
-        "download-button",
-        "copy_button",
-        "save_submit_wf_button",
-        "tempStorage",
-        "dropdown",
-        "dropdown-item",
-      ].includes(this.selectedWidget.type);
-    },
-    authCode() {
-      return (
-        this.designer.vueInstance?.reportTemplate?.formCode + ":" + this.optionModel.name
-      );
-    },
-  },
-  methods: {
-    copyAuthCode(e){
-      this.copyToClipboard(this.authCode, e, this.$message, '复制成功', '复制失败');
-    },
-    copyToClipboard(content, clickEvent, $message, successMsg, errorMsg) {
-      const clipboard = new Clipboard(clickEvent.target, {
-        text: () => content
-      });
-
-      clipboard.on('success', () => {
-        $message.success(successMsg);
-        clipboard.destroy();
-      })
-
-      clipboard.on('error', () => {
-        $message.error(errorMsg);
-        clipboard.destroy();
-      });
-
-      clipboard.onClick(clickEvent);
-    },
-    updateWidgetNameAndRef(newName) {
-      let oldName = this.designer.selectedWidgetName;
-      if (isEmptyStr(newName)) {
-        this.selectedWidget.options.name = oldName;
-        this.$message.info(this.i18nt("designer.hint.nameRequired"));
-        return;
-      }
-
-      if (!!this.designer.formWidget) {
-        let foundRef = this.designer.formWidget.getWidgetRef(newName); // 检查newName是否已存在！！
-
-        if (!!foundRef) {
-          if (this.isDataTableChildWidget()) {
-            let parentList = this.parentList;
-            for (let i; i < parentList.length; i++) {}
-          } else {
-            this.selectedWidget.options.name = oldName;
-            this.$message.info(this.i18nt("designer.hint.duplicateName") + newName);
-            return;
-          }
-        }
-
-        let widgetInDesign = this.designer.formWidget.getWidgetRef(oldName);
-        if (!!widgetInDesign && !!widgetInDesign.registerToRefList) {
-          widgetInDesign.registerToRefList(oldName); //注册组件新的ref名称并删除老的ref！！
-          let newLabel = this.getLabelByFieldName(newName);
-          this.designer.updateSelectedWidgetNameAndLabel(
-            this.selectedWidget,
-            newName,
-            newLabel
-          );
-        }
-      }
-    },
-
-    getLabelByFieldName(fieldName) {
-      for (let i = 0; i < this.serverFieldList.length; i++) {
-        if (this.serverFieldList[i].name === fieldName) {
-          return this.serverFieldList[i].label;
-        }
-      }
-
-      return null;
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-  .a-link{
-    display:flex;line-height:1.2;width:100%;align-items:center;color:rgba(0,0,0,0.65);
-    > i{
-      margin-right:8px;
-    }
-    > span{
-      flex:1
-    }
-  }
-</style>
+<template>
+  <div>
+    <el-form-item class="form-item-label-top" prop="name" :rules="nameRequiredRule">
+      <span slot="label"
+        >{{ i18nt("designer.setting.uniqueName") }}
+        <el-tooltip effect="light" :content="i18nt('designer.setting.editNameHelp')">
+          <i class="el-icon-info"></i
+        ></el-tooltip>
+      </span>
+      <template
+        v-if="
+          (!!selectedWidget.category && selectedWidget.type !== 'sub-form') || noFieldList
+        "
+      >
+        <el-input
+          type="text"
+          v-model="optionModel.name"
+          :readonly="widgetNameReadonly"
+          @change="updateWidgetNameAndRef"
+        ></el-input>
+      </template>
+      <template v-else>
+        <el-select
+          v-model="optionModel.name"
+          allow-create
+          filterable
+          :disabled="true"
+          @change="updateWidgetNameAndRef"
+          :title="i18nt('designer.setting.editNameHelp')"
+        >
+          <el-option
+            v-for="(sf, sfIdx) in serverFieldList"
+            :key="sfIdx"
+            :label="sf.label"
+            :value="sf.name"
+          ></el-option>
+        </el-select>
+      </template>
+    </el-form-item>
+    <el-form-item label="按钮编码" v-show="showAuthCode" class="form-item-label-top">
+      <div style="word-break: break-all">
+        <el-tooltip effect="light" content="复制">
+          <a class="a-link" style="" @click="copyAuthCode"><i class="el-icon-copy-document"></i><span>{{ authCode }}</span></a>
+        </el-tooltip>
+      </div>
+    </el-form-item>
+  </div>
+</template>
+
+<script>
+import i18n from "../../../../../components/xform/utils/i18n";
+import { isEmptyStr } from "../../../../../components/xform/utils/util";
+import Clipboard from 'clipboard'
+
+export default {
+  name: "name-editor",
+  mixins: [i18n],
+  props: {
+    designer: Object,
+    selectedWidget: Object,
+    optionModel: Object,
+    parentList: Array,
+  },
+  inject: ["serverFieldList", "getDesignerConfig", "isDataTableChildWidget"],
+  data() {
+    return {
+      nameRequiredRule: [{ required: true, message: "name required" }],
+    };
+  },
+  computed: {
+    noFieldList() {
+      return !this.serverFieldList || this.serverFieldList.length <= 0;
+    },
+
+    widgetNameReadonly() {
+      return !!this.getDesignerConfig().widgetNameReadonly;
+    },
+    showAuthCode() {
+      // return this.selectedWidget.category !== "container";
+      return [
+        "button",
+        "a-text",
+        "a-link",
+        "a-link2",
+        "search_button",
+        "save_button",
+        "reset_button",
+        "table-export-button",
+        "select-export-button",
+        "add_button",
+        "import-button",
+        "import2-button",
+        "print-button",
+        "print-detail-button",
+        "download-button",
+        "copy_button",
+        "save_submit_wf_button",
+        "tempStorage",
+        "dropdown",
+        "dropdown-item",
+      ].includes(this.selectedWidget.type);
+    },
+    authCode() {
+      return (
+        this.designer.vueInstance?.reportTemplate?.formCode + ":" + this.optionModel.name
+      );
+    },
+  },
+  methods: {
+    copyAuthCode(e){
+      this.copyToClipboard(this.authCode, e, this.$message, '复制成功', '复制失败');
+    },
+    copyToClipboard(content, clickEvent, $message, successMsg, errorMsg) {
+      const clipboard = new Clipboard(clickEvent.target, {
+        text: () => content
+      });
+
+      clipboard.on('success', () => {
+        $message.success(successMsg);
+        clipboard.destroy();
+      })
+
+      clipboard.on('error', () => {
+        $message.error(errorMsg);
+        clipboard.destroy();
+      });
+
+      clipboard.onClick(clickEvent);
+    },
+    updateWidgetNameAndRef(newName) {
+      let oldName = this.designer.selectedWidgetName;
+      if (isEmptyStr(newName)) {
+        this.selectedWidget.options.name = oldName;
+        this.$message.info(this.i18nt("designer.hint.nameRequired"));
+        return;
+      }
+
+      if (!!this.designer.formWidget) {
+        let foundRef = this.designer.formWidget.getWidgetRef(newName); // 检查newName是否已存在！！
+
+        if (!!foundRef) {
+          if (this.isDataTableChildWidget()) {
+            let parentList = this.parentList;
+            for (let i; i < parentList.length; i++) {}
+          } else {
+            this.selectedWidget.options.name = oldName;
+            this.$message.info(this.i18nt("designer.hint.duplicateName") + newName);
+            return;
+          }
+        }
+
+        let widgetInDesign = this.designer.formWidget.getWidgetRef(oldName);
+        if (!!widgetInDesign && !!widgetInDesign.registerToRefList) {
+          widgetInDesign.registerToRefList(oldName); //注册组件新的ref名称并删除老的ref！！
+          let newLabel = this.getLabelByFieldName(newName);
+          this.designer.updateSelectedWidgetNameAndLabel(
+            this.selectedWidget,
+            newName,
+            newLabel
+          );
+        }
+      }
+    },
+
+    getLabelByFieldName(fieldName) {
+      for (let i = 0; i < this.serverFieldList.length; i++) {
+        if (this.serverFieldList[i].name === fieldName) {
+          return this.serverFieldList[i].label;
+        }
+      }
+
+      return null;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+  .a-link{
+    display:flex;line-height:1.2;width:100%;align-items:center;color:rgba(0,0,0,0.65);
+    > i{
+      margin-right:8px;
+    }
+    > span{
+      flex:1
+    }
+  }
+</style>

package/src/components/xform/form-designer/setting-panel/property-editor/styleTempClass-editor.vue

@@ -0,0 +1,51 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.styleTempClass')" class="form-item-label-top">
+    <el-select v-model="optionModel.styleTempClass">
+      <el-option v-for="(item, idx) in classList" :key="idx" :label="item.name" :value="item.value"></el-option>
+    </el-select>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "../../../../../components/xform/utils/i18n";
+  import {deepClone} from "../../../../../components/xform/utils/util";
+
+  export default {
+    name: "styleTempClass-editor",
+    componentName: 'PropertyEditor',
+    mixins: [i18n],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+    data() {
+      return {
+        classList:[{
+          name:'样式一',
+          value:'d-temp-1'
+        },{
+          name:'样式二',
+          value:'d-temp-2'
+        },{
+          name:'样式三',
+          value:'d-temp-3'
+        },{
+          name:'样式四',
+          value:'d-temp-4'
+        }],
+      }
+    },
+    created() {
+      this.cssClassList = deepClone(this.designer.getCssClassList())
+      //监听表单css代码改动事件并重新加载！
+      this.designer.handleEvent('form-css-updated', (cssClassList) => {
+        this.cssClassList = cssClassList
+      })
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>