qj-happy-common-zhongjian 1.0.27

package/src/views/templates/templateUi/templateTableContent.vue

@@ -0,0 +1,187 @@
+<template>
+  <div>
+    <div v-if="'renderTemp' in item">
+      <child :para="scope.row" :temp="item.renderTemp"></child>
+    </div>
+    <div v-else>
+      <template v-if="'splicing' in item">
+        <div v-if="'imgType' in item">
+          <!--表示有图片-->
+          <div v-if="Object.prototype.toString.call(scope.row[item.prop]) == '[object Array]'">
+            <div class="clearfix" v-if="item.splicing.length === 1">
+              <div v-for="(arrItem, arrindex) in scope.row[item.prop]" :key="arrindex" class="clearfix mar-t10">
+                <img
+                  v-if="arrItem[item.splicing[item.imgType]] && arrItem[item.splicing[item.imgType]].indexOf('http') > -1"
+                  v-lazy="arrItem[item.splicing[item.imgType]]"
+                  :key="arrItem[item.splicing[item.imgType]]"
+                  class="tem-table-img-center"
+                />
+                <img v-else v-lazy="secDomainName + arrItem[item.splicing[item.imgType]]" :key="arrItem[item.splicing[item.imgType]]" class="tem-table-img-center" />
+              </div>
+            </div>
+            <div v-else v-for="(arrItem, arrindex) in scope.row[item.prop]" :key="arrindex" class="clearfix mar-t10">
+              <!-- {{arrItem}} -->
+              <img
+                v-if="arrItem[item.splicing[item.imgType]] && arrItem[item.splicing[item.imgType]].indexOf('http') > -1"
+                v-lazy="arrItem[item.splicing[item.imgType]]"
+                :key="arrItem[item.splicing[item.imgType]]"
+                class="tem-table-img"
+              />
+              <img v-else v-lazy="secDomainName + arrItem[item.splicing[item.imgType]]" :key="arrItem[item.splicing[item.imgType]]" class="tem-table-img" />
+              <span v-for="(itemSplicing, indexSplicing) in item.splicing" :key="indexSplicing" v-if="item.imgType != indexSplicing" class="long-text tem-table-span">
+                {{ arrItem[itemSplicing] }}
+                <!-- <i v-if="indexSplicing !=item.splicing.length-2">/</i>暂时表示图片只是存在一个 -->
+              </span>
+            </div>
+          </div>
+          <div class="clearfix" v-else-if="item.splicing.length === 1">
+            <img
+              v-if="scope.row[item.splicing[item.imgType]] && scope.row[item.splicing[item.imgType]].indexOf('http') > -1"
+              v-lazy="`${scope.row[item.splicing[item.imgType]]}`"
+              :key="scope.row[item.splicing[item.imgType]]"
+              class="tem-table-img-center"
+            />
+            <img v-else v-lazy="`${secDomainName}${scope.row[item.splicing[item.imgType]]}`" :key="scope.row[item.splicing[item.imgType]]" class="tem-table-img-center" />
+          </div>
+          <div class="clearfix" v-else>
+            <img
+              v-if="scope.row[item.splicing[item.imgType]] && scope.row[item.splicing[item.imgType]].indexOf('http') > -1"
+              v-lazy="scope.row[item.splicing[item.imgType]]"
+              class="tem-table-img"
+              :key="scope.row[item.splicing[item.imgType]]"
+            />
+            <img v-else v-lazy="secDomainName + scope.row[item.splicing[item.imgType]]" class="tem-table-img" :key="scope.row[item.splicing[item.imgType]]" />
+            <span v-for="(itemSplicing, indexSplicing) in item.splicing" :key="indexSplicing" v-if="item.imgType != indexSplicing" class="long-text tem-table-span">
+              {{ scope.row[itemSplicing] }}
+              <!-- <i v-if="indexSplicing !=item.splicing.length-2">/</i>暂时表示图片只是存在一个 -->
+            </span>
+          </div>
+        </div>
+        <div v-else-if="'template' in item">
+          <div class="addressN">
+            <span v-for="(splicingItem, splicingIndex) in item.splicing" :key="splicingIndex">
+              <i v-if="scope.row[splicingItem]">{{ parseTime(scope.row[splicingItem]) }}</i>
+              <i v-if="scope.row[splicingItem] && splicingIndex != item.splicing.length - 1">{{ item.seat || item.seat == '' ? item.seat : '~' }}</i>
+            </span>
+          </div>
+        </div>
+        <div v-else>
+          <div v-if="'prop' in item && Object.prototype.toString.call(scope.row[item.prop]) == '[object Array]'">
+            <div v-for="(arrItem, arrindex) in scope.row[item.prop]" :key="arrindex">
+              <span v-for="(itemSplicing, indexSplicing) in item.splicing" :key="indexSplicing">
+                <!-- {{scope.row}} -->
+                {{ arrItem[itemSplicing] }}
+                <i v-if="arrindex != scope.row[item.prop].length - 1">{{ item.seat ? item.seat : '/' }}</i>
+              </span>
+            </div>
+          </div>
+          <div v-else>
+            <!--不是数组-->
+            <div class="addressN">
+              <span v-for="(splicingItem, splicingIndex) in item.splicing" :key="splicingIndex">
+                {{ scope.row[splicingItem] }}
+                <i v-if="splicingIndex != item.splicing.length - 1">{{ item.seat || item.seat == '' ? item.seat : '/' }}</i>
+              </span>
+            </div>
+          </div>
+        </div>
+      </template>
+      <template v-else-if="'pair' in item">
+        <!--表示需要键值对显示-->
+        <p v-for="(itemPair, indexPair) in item.pair" :key="indexPair">{{ itemPair.key }}：{{ scope.row[itemPair.prop] }}</p>
+      </template>
+      <template v-else-if="'template' in item">{{
+        item.template === 'format' && scope.row[item.prop]
+          ? item.formatType
+            ? parseTime(scope.row[item.prop], item.formatType)
+            : parseTime(scope.row[item.prop])
+          : item.template[scope.row[item.prop]]
+          ? item.template[scope.row[item.prop]]
+          : scope.row[item.prop]
+      }}</template>
+
+      <template v-else-if="'type' in item && item.type === 'switch'">
+        <el-switch
+          v-model="scope.row[item.prop]"
+          :active-value="item.turnOn"
+          :inactive-value="item.turnOff"
+          :disabled="item.url ? false : true"
+          @change="switchChange($event, item, scope.row)"
+        ></el-switch>
+      </template>
+      <template v-else-if="'props' in item">
+        <span v-for="(itemP, index) in item.props" :key="index">{{ scope.row[itemP] }}</span>
+      </template>
+      <template v-else>{{ scope.row[item.prop] }}</template>
+    </div>
+  </div>
+</template>
+<script>
+import request from '#/utils/request';
+import { parseTime } from '#/utils/index'; //时间格式化
+const querystring = require('querystring');
+export default {
+  props: ['scope', 'item'],
+  data() {
+    return {
+      parseTime,
+      secDomainName: null,
+    };
+  },
+  mounted() {
+    // console.log(this.scope);
+    setTimeout(() => {
+      this.secDomainName = sessionStorage.getItem('secDomainName');
+    }, 50);
+  },
+  methods: {
+    switchChange(val, item, row) {
+      console.log(val, item, row);
+      if (item.props) {
+        for (let i in item.props) {
+          row[item.props[i]] = row[i];
+        }
+      }
+      console.log(row);
+      request({
+        url: item.url,
+        method: 'post',
+        data: querystring.stringify(row),
+      }).then(res => {
+        console.log(res, 'item.props');
+        if (res.success) {
+          let promptTitle = item.promptTitle ? item.promptTitle : '操作成功';
+
+          this.$message.success(promptTitle);
+          this.$emit('changeGetData');
+        }
+      });
+    },
+  },
+  components: {
+    child: {
+      functional: true,
+      render: (h, context) => {
+        const temp = context.props.temp;
+        const para = context.props.para;
+        return temp(h, para);
+      },
+      props: {
+        temp: {
+          type: Function,
+          required: true,
+        },
+        para: {
+          type: Object,
+          required: true,
+        },
+      },
+    },
+  },
+};
+</script>
+<style>
+.long-text {
+  text-align: left;
+}
+</style>