cnhis-design-vue 2.1.78 → 2.1.79

package/packages/scale-view/formitem/r-sign.vue

@@ -1,218 +1,218 @@
-<template>
-  <div class="c-sign-wrap">
-    <div class="sigan-content-wrap">
-      <div v-for="(item, index) in fileList" class="sign-item" :key="index">
-        <img :src="item.url" />
-        <div>
-          <a-icon type="eye"  @click="() => previewImg(index)"/>
-          <a-icon v-if="!isLock" type="delete" @click="() => deleteImg(index)" />
-        </div>
-      </div>
-      <div v-if="showAdd" class="add-sign-wrap" @click="openModal">
-        <svg-icon icon-class="a-xitongtubiaozujiantubiaoqianmingzujian"></svg-icon>
-        <span>添加签名</span>
-      </div>
-    </div>
-    <a-modal
-      v-if="signModalVisible"
-      class="sign-modal standard-modal standard-modal-white"
-      destroyOnClose
-      :bodyStyle="{ height: '375px', padding: '16px' }"
-      :visible="signModalVisible"
-      :maskClosable="false"
-      width="652px"
-      centered
-  >
-    <template #title>
-      {{ item.title }}
-    </template>
-    <template #footer>
-      <a-button @click="cancel">取消</a-button>
-      <a-button type="primary" @click="handleReset">重签</a-button>
-      <a-button type="primary" @click="handleGenerate">确认</a-button>
-    </template>
-    <sign-com ref="signRef" :isCrop="true"></sign-com>
-  </a-modal>
-  </div>
-</template>
-<script>
-import 'viewerjs/dist/viewer.css'
-import { api as viewerApi } from "v-viewer"
-import signCom from './sign-com.vue'
-import { Icon, Modal, Button } from "ant-design-vue";
-import SvgIcon from '@/component/svg/index.vue';
-export default {
-  name: "r-sign",
-  components: {
-    signCom,
-    SvgIcon,
-    [Icon.name]: Icon,
-    [Modal.name]: Modal,
-    [Button.name]: Button
-  },
-  props: {
-    form: { type: Object, default: () => ({}) },
-		item: { type: Object, default: () => ({}) },
-		isLock: { type: Boolean, default: false }
-  },
-
-  data() {
-    return {
-      signModalVisible: false,
-      fileList: []
-    };
-  },
-
-  computed: {
-    limitPic() {
-      return this.item?.setting?.limitPic || 1
-    },
-    showAdd() {
-      return this.fileList.length < this.limitPic && !this.isLock;
-    }
-  },
-  watch: {},
-  // 生命周期
-  created() {},
-  mounted() {
-    this.handleDef();
-    console.log(this.item)
-  },
-
-  // 方法
-  methods: {
-    handleDef() {
-      const value = this.form[this.item.val_key];
-			if (!value || !Array.isArray(value) || !value.length) return;
-			this.fileList = value;
-    },
-    cancel() {
-      this.signModalVisible = false;
-    },
-    handleReset() {
-      this.$refs.signRef?.reset()
-    },
-    handleGenerate() {
-      this.$refs.signRef
-				.generate()
-				.then((obj) => {
-					console.log(obj);
-					this.fileList.push(obj);
-					this.$emit('scaleChange', this.fileList, this.item);
-					this.cancel();
-				})
-				.catch((err) => {
-					console.log(err); // 画布没有签字时会执行这里 'Not Signned'
-				});
-    },
-    openModal() {
-      if (this.isLock) return;
-			this.signModalVisible = true;
-    },
-    previewImg(index) {
-      const imgs = this.fileList.map((v) => v.url).filter(Boolean);
-			if (!imgs.length) return;
-			viewerApi({
-				images: imgs,
-				options: {
-					toolbar: true,
-					initialViewIndex: index
-				}
-			});
-    },
-    deleteImg(index) {
-      if (this.isLock) return;
-      let _this = this;
-      this.$confirm({
-        title: '提示',
-        content: '确认要删除签名吗？',
-        okText: '确定',
-        cancelText: '取消',
-        maskClosable: false,
-        onOk() {
-          _this.fileList.splice(index, 1);
-					_this.$emit('scaleChange', _this.fileList, _this.item);
-        },
-        onCancel() {}
-      });
-    }
-  }
-};
-</script>
-<style lang="less" scoped>
-.c-sign-wrap {
-	.sigan-content-wrap {
-		display: flex;
-		flex-wrap: wrap;
-
-		.sign-item {
-			position: relative;
-			box-sizing: border-box;
-			width: 200px;
-			height: 96px;
-			margin-right: 16px;
-			overflow: hidden;
-			border: 1px solid #d5d5d5;
-			border-radius: 4px;
-
-			> img {
-				width: 100%;
-				height: 100%;
-			}
-
-			&:hover {
-				> div {
-					display: flex;
-				}
-			}
-
-			> div {
-				position: absolute;
-				top: 0;
-				right: 0;
-				bottom: 0;
-				left: 0;
-				display: none;
-				align-items: center;
-				justify-content: center;
-				background: rgba(0, 0, 0, 0.8);
-				border-radius: 4px;
-
-				.anticon {
-					font-size: 18px;
-					color: #fff;
-					cursor: pointer;
-				}
-
-				.anticon + .anticon {
-					margin-left: 20px;
-				}
-			}
-		}
-
-		.add-sign-wrap {
-			box-sizing: border-box;
-			display: flex;
-			flex-direction: column;
-			align-items: center;
-			justify-content: center;
-			width: 200px;
-			height: 96px;
-			cursor: pointer;
-			background: #fafafa;
-			border: 1px dashed #d5d5d5;
-			border-radius: 4px;
-
-			.svg-icon {
-				font-size: 32px;
-				color: #000;
-			}
-
-			span {
-				color: #585858;
-        line-height: 1.5;
-			}
-		}
-	}
-}
-</style>
+<template>
+  <div class="c-sign-wrap">
+    <div class="sigan-content-wrap">
+      <div v-for="(item, index) in fileList" class="sign-item" :key="index">
+        <img :src="item.url" />
+        <div>
+          <a-icon type="eye"  @click="() => previewImg(index)"/>
+          <a-icon v-if="!isLock" type="delete" @click="() => deleteImg(index)" />
+        </div>
+      </div>
+      <div v-if="showAdd" class="add-sign-wrap" @click="openModal">
+        <svg-icon icon-class="a-xitongtubiaozujiantubiaoqianmingzujian"></svg-icon>
+        <span>添加签名</span>
+      </div>
+    </div>
+    <a-modal
+      v-if="signModalVisible"
+      class="sign-modal standard-modal standard-modal-white"
+      destroyOnClose
+      :bodyStyle="{ height: '375px', padding: '16px' }"
+      :visible="signModalVisible"
+      :maskClosable="false"
+      width="652px"
+      centered
+  >
+    <template #title>
+      {{ item.title }}
+    </template>
+    <template #footer>
+      <a-button @click="cancel">取消</a-button>
+      <a-button type="primary" @click="handleReset">重签</a-button>
+      <a-button type="primary" @click="handleGenerate">确认</a-button>
+    </template>
+    <sign-com ref="signRef" :isCrop="true"></sign-com>
+  </a-modal>
+  </div>
+</template>
+<script>
+import 'viewerjs/dist/viewer.css'
+import { api as viewerApi } from "v-viewer"
+import signCom from './sign-com.vue'
+import { Icon, Modal, Button } from "ant-design-vue";
+import SvgIcon from '@/component/svg/index.vue';
+export default {
+  name: "r-sign",
+  components: {
+    signCom,
+    SvgIcon,
+    [Icon.name]: Icon,
+    [Modal.name]: Modal,
+    [Button.name]: Button
+  },
+  props: {
+    form: { type: Object, default: () => ({}) },
+		item: { type: Object, default: () => ({}) },
+		isLock: { type: Boolean, default: false }
+  },
+
+  data() {
+    return {
+      signModalVisible: false,
+      fileList: []
+    };
+  },
+
+  computed: {
+    limitPic() {
+      return this.item?.setting?.limitPic || 1
+    },
+    showAdd() {
+      return this.fileList.length < this.limitPic && !this.isLock;
+    }
+  },
+  watch: {},
+  // 生命周期
+  created() {},
+  mounted() {
+    this.handleDef();
+    console.log(this.item)
+  },
+
+  // 方法
+  methods: {
+    handleDef() {
+      const value = this.form[this.item.val_key];
+			if (!value || !Array.isArray(value) || !value.length) return;
+			this.fileList = value;
+    },
+    cancel() {
+      this.signModalVisible = false;
+    },
+    handleReset() {
+      this.$refs.signRef?.reset()
+    },
+    handleGenerate() {
+      this.$refs.signRef
+				.generate()
+				.then((obj) => {
+					console.log(obj);
+					this.fileList.push(obj);
+					this.$emit('scaleChange', this.fileList, this.item);
+					this.cancel();
+				})
+				.catch((err) => {
+					console.log(err); // 画布没有签字时会执行这里 'Not Signned'
+				});
+    },
+    openModal() {
+      if (this.isLock) return;
+			this.signModalVisible = true;
+    },
+    previewImg(index) {
+      const imgs = this.fileList.map((v) => v.url).filter(Boolean);
+			if (!imgs.length) return;
+			viewerApi({
+				images: imgs,
+				options: {
+					toolbar: true,
+					initialViewIndex: index
+				}
+			});
+    },
+    deleteImg(index) {
+      if (this.isLock) return;
+      let _this = this;
+      this.$confirm({
+        title: '提示',
+        content: '确认要删除签名吗？',
+        okText: '确定',
+        cancelText: '取消',
+        maskClosable: false,
+        onOk() {
+          _this.fileList.splice(index, 1);
+					_this.$emit('scaleChange', _this.fileList, _this.item);
+        },
+        onCancel() {}
+      });
+    }
+  }
+};
+</script>
+<style lang="less" scoped>
+.c-sign-wrap {
+	.sigan-content-wrap {
+		display: flex;
+		flex-wrap: wrap;
+
+		.sign-item {
+			position: relative;
+			box-sizing: border-box;
+			width: 200px;
+			height: 96px;
+			margin-right: 16px;
+			overflow: hidden;
+			border: 1px solid #d5d5d5;
+			border-radius: 4px;
+
+			> img {
+				width: 100%;
+				height: 100%;
+			}
+
+			&:hover {
+				> div {
+					display: flex;
+				}
+			}
+
+			> div {
+				position: absolute;
+				top: 0;
+				right: 0;
+				bottom: 0;
+				left: 0;
+				display: none;
+				align-items: center;
+				justify-content: center;
+				background: rgba(0, 0, 0, 0.8);
+				border-radius: 4px;
+
+				.anticon {
+					font-size: 18px;
+					color: #fff;
+					cursor: pointer;
+				}
+
+				.anticon + .anticon {
+					margin-left: 20px;
+				}
+			}
+		}
+
+		.add-sign-wrap {
+			box-sizing: border-box;
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			justify-content: center;
+			width: 200px;
+			height: 96px;
+			cursor: pointer;
+			background: #fafafa;
+			border: 1px dashed #d5d5d5;
+			border-radius: 4px;
+
+			.svg-icon {
+				font-size: 32px;
+				color: #000;
+			}
+
+			span {
+				color: #585858;
+        line-height: 1.5;
+			}
+		}
+	}
+}
+</style>