xrk-components 0.1.0 → 0.3.2

package/src/packages/task-detail/src/components/styles/index.scss

@@ -1,162 +0,0 @@
-.detail {
-  max-width: 1300px;
-  display: flex;
-  flex-wrap: wrap;
-  &_item {
-    display: flex;
-    padding: 15px 0;
-    width: 50%;
-    min-width: 450px;
-    &_label {
-      min-width: 60px;
-      font-size: 14px;
-      color: #767a90;
-      text-align: right;
-      cursor: default;
-      flex-shrink: 0;
-    }
-    &_value {
-      width: 100%;
-      font-size: 14px;
-      display: flex;
-      flex-direction: column;
-      padding-right: 30px;
-      box-sizing: border-box;
-      text-align: left;
-      & > img:nth-child(2) {
-        display: inline-block;
-        margin-top: 20px;
-      }
-      img {
-        cursor: pointer;
-        width: 100%;
-        max-width: 450px;
-        max-height: 350px;
-        object-fit: cover;
-        box-shadow: 1px 2px 5px 0;
-        color: rgba($color: #000000, $alpha: 0.3);
-      }
-      .img-group {
-        width: 100%;
-        // display: flex;
-        >>> .d_img {
-          width: 150px;
-          max-height: 400px;
-          object-fit: contain;
-          box-shadow: 1px 2px 5px 0;
-          color: rgba(0, 0, 0, 0.3);
-          vertical-align: text-top;
-          & + .d_img {
-            margin-left: 20px;
-          }
-        }
-      }
-      &_table {
-        display: flex;
-        margin-bottom: 12px;
-        padding-left: 0;
-        .first {
-          border: 1px solid rgba(163, 208, 253, 1);
-          border-radius: 4px 0 0 4px;
-          div {
-            background: #e6f1fc;
-            width: 88px;
-            text-align: center;
-            color: #333333;
-            font-size: 14px;
-            font-weight: bold;
-            height: 46px;
-            line-height: 46px;
-          }
-          > div:first-of-type {
-            border-bottom: 1px solid rgba(163, 208, 253, 1);
-          }
-        }
-        li {
-          border: 1px solid rgba(220, 223, 230, 1);
-          border-left: none;
-          list-style: none;
-          > div {
-            width: 172px;
-            height: 46px;
-            color: #666;
-            font-size: 14px;
-            text-align: center;
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-            padding: 8px 16px;
-            box-sizing: border-box;
-          }
-          > div:first-of-type {
-            border-bottom: 1px solid rgba(220, 223, 230, 1);
-          }
-          .nickName {
-            line-height: 20px;
-            span {
-              display: -webkit-box;
-              -webkit-box-orient: vertical;
-              -webkit-line-clamp: 2;
-              overflow: hidden;
-            }
-          }
-        }
-      }
-      >>> .xstg_table {
-        overflow: auto;
-        &_column {
-          display: flex;
-          background-color: #e6f1fc;
-          &_item {
-            border: 1px solid #a3d0fd;
-            text-align: center;
-            box-sizing: border-box;
-            font-size: 14px;
-            min-height: 38px;
-            line-height: 1.2;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            padding: 10px;
-            word-break: break-all;
-            & + .xstg_table_column_item {
-              border-left: 0;
-            }
-          }
-          & + .xstg_table_column {
-            background-color: #fff;
-            .xstg_table_column_item {
-              border-color: #ebeef5;
-              border-top: 0;
-            }
-          }
-        }
-      }
-      .case_imgs {
-        display: flex;
-        flex-wrap: wrap;
-        transform: translate(-5px, -5px);
-        padding-left: 0;
-        >>> & > li {
-          text-align: center;
-          margin: 5px;
-          // list-style: decimal;
-          list-style: none;
-          & > img {
-            width: 100%;
-            width: 300px;
-            max-height: 260px;
-            box-shadow: 1px 2px 5px 0;
-            color: rgba($color: #000000, $alpha: 0.3);
-          }
-          & > div {
-            width: 300px;
-            margin-top: 5px;
-            font-size: 14px;
-            color: #333333;
-          }
-        }
-      }
-    }
-  }
-}

package/src/packages/task-detail/src/components/surveyDetail.vue

@@ -1,337 +0,0 @@
-<!--
- * @Description: 
- * @Author: jml
- * @Date: 2021-02-23 14:20:59
- * @LastEditors: jml
- * @LastEditTime: 2021-03-03 11:24:16
--->
-<template>
-  <div class="detail">
-    <div v-if="isSurvey" style="margin-bottom:20px;">
-      <div style="font-weight:bold;font-size:16px;">问卷信息</div>
-      <div class="detail_info">
-        <div class="detail_info_header">
-          <div>问卷发起人</div>
-          <div>发起人手机号码</div>
-          <div>开始时间</div>
-          <div>结束时间</div>
-          <div>答题时间</div>
-        </div>
-        <div class="detail_info_row">
-          <div>{{ userData.fullName }}</div>
-          <div>{{ userData.phone }}</div>
-          <div>{{ userData.answerStartDt | dateFormat('Y年M月D日 H:m:s') }}</div>
-          <div>{{ userData.answerEndDt | dateFormat('Y年M月D日 H:m:s') }}</div>
-          <div>{{ userData.answerEndDt - userData.answerStartDt }}秒</div>
-        </div>
-      </div>
-    </div>
-    <div style="font-weight:bold;font-size:16px;">问卷详情</div>
-    <span
-      style="color: grey; font-size: 14px;margin-top:10px;display:inline-block;"
-      v-if="sceneRemark"
-    >备注：{{ sceneRemark }}</span>
-    <div class="detail_item" v-for="(item, index) in answerList" :key="`${item.id}-${index}`">
-      <div class="detail_item_index">{{ +index + 1 }}：</div>
-      <div>
-        <div class="detail_item_label" name="标题">
-          {{ item.title }}
-          <span name="题目类型">{{ getQuestionName(item.type) }}</span>
-          <span name="必填">{{ isMultiple(item) }}</span>
-        </div>
-        <div class="detail_item_value">
-          <div class="detail_item_value_images" v-if="isPic(item)" name="图片题">
-            <img
-              :src="picInfo.url"
-              alt
-              v-for="picInfo in dealPic(item.answer)"
-              :key="picInfo.url"
-              :preview="picInfo.url"
-            />
-          </div>
-          <ul v-else-if="isFile(item)" style="padding-left:19px;" name="文件题">
-            <li
-              class="detail_item_value_filename"
-              v-for="fileInfo in dealFile(item.answer)"
-              :key="fileInfo.url"
-            >
-              <span @click="downloadFile(fileInfo.url, fileInfo.name)">{{ fileInfo.name }}</span>
-            </li>
-          </ul>
-          <template v-else-if="isBlanks(item)" name="多项填空题">
-            <div v-for="(bItem, bIndex) in item.manyTitleJson" :key="bItem">
-              <div>{{ bItem }}：{{ item.answer[bIndex] }}</div>
-            </div>
-          </template>
-          <template v-else-if="isLocation(item)" name="定位题">
-            <span style="padding-bottom: 10px;display: block;">{{ item.answer['name'] }}</span>
-            <div class="detail_item_value_images">
-              <img :src="item.answer['addressPicUrl']" alt :preview="item.answer['addressPicUrl']" />
-            </div>
-          </template>
-          <template v-else>
-            <template v-if="Array.isArray(item.answer)">{{ item.answer.join('、') }}</template>
-            <template v-else>{{ item.answer }}</template>
-          </template>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-import { check, config, date } from '../tools/index';
-console.log('题目配置', config.CONFIG_QUESTION);
-export default {
-  name: 'Detail',
-  props: {
-    initData: {
-      type: Object,
-      default: () => ({})
-    }
-  },
-  data() {
-    return {
-      sceneRemark: '',
-      answerList: []
-    };
-  },
-  filters: {
-    dateFormat: date.dateFormat
-  },
-  computed: {
-    isSurvey() {
-      /* eslint-disable */
-      return (this.initData || {}).hasOwnProperty('userData');
-    },
-    userData() {
-      return this.initData.userData || {};
-    }
-  },
-  methods: {
-    getQuestionName(type) {
-      const info = config.CONFIG_QUESTION.find(item => item.value == type);
-      if (info) {
-        return `[${info.label}]`;
-      } else {
-        return '';
-      }
-    },
-    isMultiple(item) {
-      const { isMustFill, type } = item;
-      if (type == 18) {
-        return '';
-      }
-      return isMustFill == 1 ? '（必填）' : '（非必填）';
-    },
-    isBlanks(item) {
-      // 多项填空题
-      return [5].includes(+item.type);
-    },
-    isLocation(item) {
-      // 定位题
-      return [16].includes(+item.type);
-    },
-    isPic(item) {
-      return [20, 13].includes(+item.type);
-    },
-    isFile(item) {
-      return [9, 10, 11, 12].includes(+item.type);
-    },
-    dealPic(value) {
-      if (check.isString(value)) {
-        return [
-          {
-            url: value
-          }
-        ];
-      } else if (Array.isArray(value)) {
-        return value;
-      }
-      console.warn('图片传入字符串或者对象数组，例如[{url:url}]');
-      return [];
-    },
-    dealFile(value) {
-      return value || [];
-    },
-    downloadFile(url, fileName) {
-      window.open(url);
-      // file.getNetFile(url).then(blob => {
-      //   if (window.navigator.msSaveOrOpenBlob) {
-      //     navigator.msSaveBlob(blob, fileName);
-      //   } else {
-      //     var link = document.createElement('a');
-      //     link.href = window.URL.createObjectURL(blob);
-      //     link.download = fileName;
-      //     link.click();
-      //     window.URL.revokeObjectURL(link.href);
-      //   }
-      // });
-    },
-    dealData(initData) {
-      const { contentTitleList, topicList, answerList } = initData;
-      const makeSceneMap = initData.makeSceneMap
-        ? { ...initData.makeSceneMap }
-        : initData;
-      const {
-        isSetTarget,
-        isSetTime,
-        isSetLocation,
-        targetTitle,
-        timeTitle,
-        locationTitle,
-        targetRemark,
-        timeRemark,
-        locationRemark,
-        customerName,
-        addressPicUrl,
-        sceneRemark,
-        timeType,
-        timeQuestions
-      } = makeSceneMap;
-      const tArr = [
-        {
-          title: (targetTitle || '') + '[目标题]',
-          remark: targetRemark,
-          answer: customerName,
-          show: isSetTarget,
-          isMustFill: 1
-        },
-        {
-          title: (timeTitle || '') + `[${timeType === 1 ? '时间' : '时刻'}题]`,
-          remark: timeRemark,
-          answer: timeQuestions || '',
-          show: isSetTime,
-          isMustFill: 1
-        },
-        {
-          title: (locationTitle || '') + '[定位题]',
-          answer: addressPicUrl,
-          remark: locationRemark,
-          show: isSetLocation,
-          isLocation: true,
-          type: 20,
-          isMustFill: 1
-        }
-      ].filter(item => item.show == 1);
-      this.sceneRemark = sceneRemark;
-      this.answerList = tArr.concat(
-        (contentTitleList || topicList || answerList || []).map(item => {
-          item.manyTitleJson = item.manyTitleJson || '[]';
-          const isString = content => {
-            return check.isString(content);
-          };
-          if (
-            isString(item.answer) &&
-            [2, 5, 9, 10, 11, 12, 13, 16].includes(+item.type)
-          ) {
-            try {
-              item.answer = JSON.parse(item.answer);
-            } catch (error) {
-              console.log(item.answer, error);
-            }
-          }
-          if (isString(item.manyTitleJson) && [5].includes(+item.type)) {
-            try {
-              item.manyTitleJson = JSON.parse(item.manyTitleJson);
-            } catch (error) {
-              console.log(error);
-            }
-          }
-          return item;
-        })
-      );
-    }
-  },
-  watch: {
-    initData: {
-      handler(newV) {
-        this.dealData(newV);
-      },
-      deep: true,
-      immediate: true
-    }
-  }
-};
-</script>
-
-<style lang="scss" scoped>
-// @import './styles/index.scss';
-.detail {
-  text-align: left;
-  &_info {
-    margin-top: 10px;
-    max-width: 1200px;
-    & > div {
-      display: flex;
-      background-color: #e6f1fc;
-      & > div {
-        width: 100%;
-        text-align: center;
-        border: 1px solid #a3d0fd;
-        text-align: center;
-        box-sizing: border-box;
-        font-size: 14px;
-        min-height: 38px;
-        line-height: 1.2;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        padding: 10px;
-        word-break: break-all;
-        & + div {
-          border-left: 0;
-        }
-      }
-      & + div {
-        background-color: #fff;
-        & > div {
-          border-color: #ebeef5;
-          border-top: 0;
-        }
-      }
-    }
-  }
-  &_item {
-    display: flex;
-    border-bottom: 1px solid #f5f5f5;
-    padding: 20px 0;
-    font-size: 16px;
-    &_index {
-      cursor: default;
-      font-size: 16px;
-      flex-shrink: 0;
-      width: 40px;
-      text-align: right;
-    }
-    &_label {
-      font-size: 16px;
-      cursor: default;
-      text-align: left;
-    }
-    &_value {
-      font-size: 14px;
-      line-height: 1.5;
-      padding-top: 10px;
-      text-align: left;
-      &_filename {
-        color: #409eff;
-        cursor: pointer;
-        list-style: disc;
-      }
-      &_images {
-        transform: translateX(-5px);
-        & > img {
-          cursor: pointer;
-          width: 100%;
-          max-width: 350px;
-          max-height: 250px;
-          object-fit: cover;
-          box-shadow: 1px 2px 5px 0;
-          color: rgba($color: #000000, $alpha: 0.3);
-          margin: 0 5px;
-        }
-      }
-    }
-  }
-}
-</style>