cnhis-design-vue 2.2.3 → 2.2.5

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

@@ -1,93 +0,0 @@
-<template>
-  <div class="my-input">
-    <a-textarea
-      :disabled="isLock"
-      :placeholder="defaultPlaceHolder"
-      v-if="eleType == 'INPUT' || eleType == 'EVALUATE_INPUT'"
-      v-model="inputValue"
-      @input="changeTextarea"
-      @keydown="keydown"
-      :autoSize="setTextareaRow"
-      style="resize: none;"
-      autocomplete="off"
-    />
-    <a-input
-      :type="type"
-      :disabled="isLock"
-      placeholder="请输入"
-      v-if="eleType == 'ID_CARD'"
-      v-model="inputValue"
-      @keydown="keydown"
-    />
-    <a-input
-      :type="type"
-      :disabled="isLock"
-      placeholder="请输入"
-      v-if="eleType == 'MOBILE'"
-      :maxLength="11"
-      v-model="inputValue"
-      @keydown="keydown"
-    />
-  </div>
-</template>
-
-<script>
-import { Input, } from "ant-design-vue";
-export default {
-  props: {
-    value: { default: "" },
-    type: { default: "" },
-    eleType: { default: "INPUT", type: String },
-    isLock: { type: Boolean, default: false },
-    row: { type: [Number, String], default: 1 },
-    defaultPlaceHolder: String
-  },
-  computed: {
-    inputValue: {
-      get() {
-        return this.value;
-      },
-      set(val) {
-        this.$emit("input", val);
-      }
-    },
-    setTextareaRow() {
-      if (!this.row || this.row == "auto") {
-        return {
-          minRows: 1
-        };
-      }
-      return { minRows: this.row || 1, maxRows: this.row || 1 };
-    }
-  },
-  methods: {
-    keydown(e) {
-      let key = e.key;
-      if (key === "e" || key === "E" || key === "+" || key === "-") {
-        e.returnValue = false;
-      } else {
-        e.returnValue = true;
-      }
-    },
-    changeTextarea(e) {
-      let { value } = e?.target || {};
-      if (value && this.type === "number") {
-        this.inputValue = value.replace(/[^\d.]/gi, "");
-      }
-    }
-  },
-  components:{
-    [Input.name]: Input,
-    [Input.TextArea.name]: Input.TextArea,
-  }
-};
-</script>
-
-<style lang="less" scoped>
-.my-input {
-  input::-webkit-outer-spin-button,
-  input::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-  }
-}
-</style>

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

@@ -1,52 +0,0 @@
-<template>
-  <div class="prompt-message" :class="className">
-    <a-icon v-if="options.promptType === 'strong'" class="prompt-icon" type="exclamation-circle" />
-    <div class="prompt-message-content ">
-      {{ options.promptMsg || "" }}
-    </div>
-  </div>
-</template>
-<script>
-import { Icon } from "ant-design-vue";
-export default {
-  props: {
-    options: {
-      type: Object
-    }
-  },
-  computed: {
-    className() {
-      const type = this.options.promptType;
-      return type ? `is-${type}` : "";
-    }
-  },
-  components:{
-    [Icon.name]: Icon,
-  }
-};
-</script>
-<style lang="less" scoped>
-.prompt-message {
-  color: #666;
-  position: relative;
-  &.is-weak {
-    color: #999;
-  }
-  &.is-strong {
-    color: #ff1818;
-    padding: 1px 0 0 35px;
-  }
-  .prompt-icon {
-    width: 24px;
-    height: 24px;
-    font-size: 18px;
-    position: absolute;
-    left: 0;
-    top: 0;
-  }
-  .prompt-message-content {
-    line-height: 16px;
-    font-size: 14px;
-  }
-}
-</style>

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

@@ -1,218 +0,0 @@
-<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>

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

@@ -1,285 +0,0 @@
-<template>
-  <div>
-    <!-- 日期选择器 -->
-    <template v-if="type == 'DATE'">
-      <a-date-picker
-        v-if="startToStop != 1"
-        v-model="timeValue"
-        @change="changeDate"
-        :disabled="isLock"
-      />
-      <!-- 日期选择器起止类型 -->
-      <a-range-picker v-else v-model="rangeValue" @change="changeRange" />
-    </template>
-    <template v-else-if="type == 'TIME'">
-      <!-- 时间选择器 -->
-      <a-time-picker
-        v-if="startToStop != 1"
-        v-model="timeValue"
-        @change="changeTime"
-        :disabled="isLock"
-      />
-      <!-- 时间选择器起止类型 -->
-      <slot v-if="startToStop == 1">
-        <a-time-picker
-          :disabled="isLock"
-          v-model="rangeValue[0]"
-          @change="changeRangeTime"
-          :disabledHours="disStartHours"
-          :disabledMinutes="disStartMinute"
-          :disabledSeconds="disStartSeconds"
-        />
-        -
-        <a-time-picker
-          :disabled="isLock"
-          v-model="rangeValue[1]"
-          @change="changeRangeTime"
-          :disabledHours="disEndHours"
-          :disabledMinutes="disEndMinute"
-          :disabledSeconds="disEndSeconds"
-        />
-      </slot>
-    </template>
-    <template v-else-if="type == 'DATETIME'">
-      <div v-if="dateType == 'time'">
-        <!-- 时间选择器 -->
-        <a-time-picker
-          v-if="startToStop != 1"
-          v-model="timeValue"
-          @change="changeTime"
-          :disabled="isLock"
-        />
-        <!-- 时间选择器起止类型 -->
-        <slot v-if="startToStop == 1">
-          <a-time-picker
-            :disabled="isLock"
-            v-model="rangeValue[0]"
-            @change="changeRangeTime"
-            :disabledHours="disStartHours"
-            :disabledMinutes="disStartMinute"
-            :disabledSeconds="disStartSeconds"
-          />
-          -
-          <a-time-picker
-            :disabled="isLock"
-            v-model="rangeValue[1]"
-            @change="changeRangeTime"
-            :disabledHours="disEndHours"
-            :disabledMinutes="disEndMinute"
-            :disabledSeconds="disEndSeconds"
-          />
-        </slot>
-      </div>
-      <div v-else>
-        <a-date-picker
-          v-if="startToStop != 1"
-          v-model="timeValue"
-          @change="changeDate"
-          :disabled="isLock"
-          :show-time="dateType == 'datetime'"
-          :showToday="false"
-          dropdownClassName="scale-time-picker"
-        />
-        <!-- 日期选择器起止类型 -->
-        <a-range-picker
-          v-else
-          v-model="rangeValue"
-          @change="changeRange"
-          :show-time="dateType == 'datetime'"
-          :placeholder="rangePlaceholder"
-        />
-      </div>
-    </template>
-  </div>
-</template>
-
-<script>
-import moment from 'moment'
-import { DatePicker, TimePicker } from "ant-design-vue";
-import utils from "@/utils/utils-map";
-export default {
-  props: {
-    value: { type: [String, Array, Object] },
-    type: { default: "DATE" },
-    startToStop: { type: [String, Number] },
-    dateType: { type: String, default: "date" },
-    options: { type: Array, default: () => [] },
-    isLock: { type: Boolean, default: false }
-  },
-  watch: {
-    value: {
-      immediate: true,
-      deep: true,
-      handler(value) {
-        if (value) {
-          this.defaultValue(value);
-        }
-      }
-    }
-  },
-  computed: {
-    rangePlaceholder() {
-      return this.dateType === "datetime" ? ["开始时间", "结束时间"] : ["开始日期", "结束日期"];
-    }
-  },
-  data() {
-    return {
-      dateFormat: "YYYY-MM-DD",
-      timeFormat: "HH:mm:ss",
-      timeValue: null,
-      rangeValue: [],
-      Hours: Array.from(Array(24), (v, k) => k),
-      Minutes: Array.from(Array(60), (v, k) => k),
-      Seconds: Array.from(Array(60), (v, k) => k)
-    };
-  },
-  created() {
-    this.handleFormat();
-  },
-  methods: {
-    handleFormat() {
-      if (this.dateType == "datetime") {
-        this.dateFormat = "YYYY-MM-DD HH:mm:ss";
-      }
-    },
-    defaultValue(value) {
-      this.handleFormat();
-      let { type, startToStop, dateFormat, timeFormat } = this;
-      let tempValue = value;
-      if (utils.isJSON(value)) {
-        tempValue = JSON.parse(value);
-      }
-      const result = JSON.parse(JSON.stringify(tempValue));
-      if (utils.isEmpty(result)) {
-        return result;
-      } else {
-        if (type == "TIME" || this.dateType == "time") {
-          if (startToStop == 1) {
-            this.rangeValue = [
-              result[0] ? moment(result[0], timeFormat) : null,
-              result[1] ? moment(result[1], timeFormat) : null
-            ];
-            return;
-          } else {
-            this.timeValue = moment(result, timeFormat);
-            return;
-          }
-        } else {
-          if (startToStop == 1) {
-            this.rangeValue = [
-              moment(result[0], dateFormat),
-              moment(result[1], dateFormat)
-            ];
-            return;
-          } else {
-            this.timeValue = moment(result, dateFormat);
-            return;
-          }
-        }
-      }
-    },
-    changeDate(v) {
-      let data = v ? moment(v).format(this.dateFormat) : "";
-      this.$emit("change", data);
-    },
-    changeRange(v) {
-      this.$emit(
-        "change",
-        v.map(item => moment(item).format(this.dateFormat))
-      );
-    },
-    changeTime(v) {
-      let data = v ? moment(v).format(this.timeFormat) : "";
-      this.$emit("change", data);
-    },
-    changeRangeTime() {
-      this.$emit(
-        "change",
-        this.rangeValue.map(item => {
-          if (item) {
-            return moment(item).format(this.timeFormat);
-          } else {
-            return "";
-          }
-        })
-      );
-    },
-    disStartHours() {
-      let endTime = this.rangeValue[1];
-      if (endTime) {
-        let h = endTime.hour();
-        return this.Hours.slice(h, this.Hours.length - 1);
-      }
-      return [];
-    },
-    disStartMinute(h) {
-      let endTime = this.rangeValue[1];
-      if (endTime) {
-        if (h < endTime.hour()) return [];
-        let m = endTime.minute();
-        return this.Minutes.slice(m, this.Minutes.length - 1);
-      }
-      return [];
-    },
-    disStartSeconds(h, m) {
-      let endTime = this.rangeValue[1];
-      if (endTime) {
-        if (h < endTime.hour()) return [];
-        if (m < endTime.minute()) return [];
-        let s = endTime.second();
-        return this.Seconds.slice(s, this.Seconds.length - 1);
-      }
-      return [];
-    },
-    disEndHours() {
-      let startTime = this.rangeValue[0];
-      if (startTime) {
-        let h = startTime.hour();
-        return this.Hours.slice(0, h);
-      }
-      return [];
-    },
-    disEndMinute(h) {
-      let startTime = this.rangeValue[0];
-      if (startTime) {
-        if (h > startTime.hour()) return [];
-        let m = startTime.minute();
-        return this.Minutes.slice(0, m);
-      }
-      return [];
-    },
-    disEndSeconds(h, m) {
-      let startTime = this.rangeValue[0];
-      if (startTime) {
-        if (h > startTime.hour()) return [];
-        if (m > startTime.minute()) return [];
-        let s = startTime.second();
-        return this.Seconds.slice(0, s);
-      }
-      return [];
-    }
-  },
-  components:{
-    [DatePicker.name]: DatePicker,
-    [DatePicker.RangePicker.name]: DatePicker.RangePicker,
-    [TimePicker.name]: TimePicker,
-  }
-};
-</script>
-
-<style lang="less" scoped>
-.scale-time-picker {
-  .ant-calendar-ok-btn.ant-calendar-ok-btn-disabled {
-    background-color: #f5f5f5;
-    border-color: #d9d9d9;
-    color: rgba(0, 0, 0, 0.25);
-    text-shadow: none;
-    box-shadow: none;
-    &:hover {
-      background-color: #f5f5f5;
-      border-color: #d9d9d9;
-      color: rgba(0, 0, 0, 0.25);
-    }
-  }
-}
-</style>