sishitongtang-crm/src/views/bigSreen/component/addDataManage.vue

<template>
  <div>
    <xy-dialog
      :width="72"
      ref="dialog"
      :is-show.sync="isShow"
      type="form"
      :title="type === 'add' ? '新增数据管理' : '编辑数据管理'"
      :form="form"
      :rules="rules"
      @submit="submit"
    >
      <template v-slot:type>
        <div class="xy-table-item">
          <div class="xy-table-item-label">名称 ：</div>
          <div class="xy-table-item-content">
            <el-input
              v-model="form.type"
              clearable
              placeholder="请输入名称"
              style="width: 300px"
            ></el-input>
          </div>
        </div>
      </template>
      <template v-slot:key>
        <div class="xy-table-item">
          <div class="xy-table-item-label">键 ：</div>
          <div class="xy-table-item-content">
            <el-input
              v-model="form.key"
              clearable
              placeholder="请输入键"
              style="width: 300px"
            ></el-input>
          </div>
        </div>
      </template>
      <template v-slot:value>
        <div class="xy-table-item">
          <div class="xy-table-item-label">值 ：</div>
          <div class="xy-table-item-content" style="width: 600px">
            <el-input
              type="textarea"
              :autosize="{
                minRows: 2
              }"
              v-model="form.value"
              clearable
              placeholder="请输入值"
            ></el-input>


            <div style="margin: 10px auto;">
              <el-button type="primary" icon="el-icon-upload2" @click="JSON2str">转换</el-button>
              <el-button type="primary" icon="el-icon-download" @click="str2JSON">转换</el-button>
            </div>

            <div>
              <template v-if="transformJSON instanceof Array">
                <xy-table :height="300" :list="transformJSON" :table-item="JSONHeader" :is-page="false">
                  <template #btns>
                    <el-table-column>
                      <template #default="{ row, $index }">
                        <Button size="small" type="primary" @click="transformJSON.splice($index,1)">删除</Button>
                      </template>
                    </el-table-column>
                  </template>
                </xy-table>
              </template>
              <template v-if="typeof transformJSON === 'object' && !transformJSON instanceof Array">
                <div v-for="(value, key) in transformJSON">
                  <el-input size="small" :value="key"></el-input>
                  <el-input size="small" style="margin-left: 6px;" :value="value"></el-input>
                </div>
              </template>
            </div>
          </div>
        </div>
      </template>
      <template v-slot:sort>
        <div class="xy-table-item">
          <div class="xy-table-item-label">排序 ：</div>
          <div class="xy-table-item-content">
            <el-input-number
              v-model="form.sort"
              clearable
              placeholder="请输入排序"
              style="width: 300px"
              :controls="false"
            ></el-input-number>
          </div>
        </div>
      </template>
      <template #extraFormBottom>
        <div class="xy-table-item">
          <div class="xy-table-item-label">文件 ：</div>
          <div class="xy-table-item-content">
            <el-upload
              style="width: 300px"
              ref="upload"
              multiple
              :on-success="
                (response, file, fileList) =>
                  successHandle(response, file, fileList, 'file')
              "
              :before-upload="uploadBefore"
              accept=".rar,.zip,.doc,.docx,.pdf,.jpg,.png,.gif,.mp4,.xls,.xlsx"
              :action="action"
              :file-list="file"
              :auto-upload="false"
              :on-remove="
                (file, fileList) => removeHande(file, fileList, 'file')
              "
            >
              <el-button slot="trigger" size="small" type="primary"
                >选取文件</el-button
              >
              <el-button
                style="margin-left: 10px"
                size="small"
                type="success"
                @click="$refs['upload'].submit()"
                >开始上传</el-button
              >
              <div slot="tip" class="el-upload__tip">
                支持文件格式：.rar .zip .doc .docx .pdf .jpg .png .gif .mp4 .xls
                .xlsx
                <br />单个文件不能超过20M
              </div>
            </el-upload>

          </div>
        </div>

        <div class="xy-table-item">
          <div class="xy-table-item-label">文件地址 ：</div>
          <div class="xy-table-item-content"  style="width: 300px">
            <div v-for="item in file">
              <Tag color="success">{{ item.response ? item.response.original_name : '' }}</Tag>
              <el-link @click="copyText(item.response ? item.response.url : '')">{{ item.response ? item.response.url : '' }}</el-link>
            </div>
          </div>
        </div>
      </template>
    </xy-dialog>
  </div>
</template>

<script>
import { detail, save } from "@/api/bigScreen";
export default {
  props: {},
  data() {
    return {
      isShow: false,
      id: "",
      type: "",
      action: process.env.VUE_APP_UPLOAD_API,
      file: [],

      form: {
        type: "",
        key: "",
        value: "",
        sort: "",
      },
      rules: {},

      transformJSON: null,
    };
  },
  methods: {
    show() {
      this.isShow = true;
    },
    hidden() {
      this.isShow = false;
    },
    init() {
      for (let key in this.form) {
        if (this.form[key] instanceof Array) {
          this.form[key] = [];
        } else {
          this.form[key] = "";
        }
      }
      this.$refs["dialog"].clearValidate();
    },
    setId(id) {
      if (typeof id == "number") {
        this.id = id;
      } else {
        console.error("error typeof id: " + typeof id);
      }
    },
    getId() {
      return this.id;
    },
    setType(type = "add") {
      let types = ["add", "editor"];
      if (types.includes(type)) {
        this.type = type;
      } else {
        console.warn("Unknown type: " + type);
      }
    },
    setForm(key = [], value = []) {
      if (key instanceof Array) {
        key.forEach((key, index) => {
          this.form[key] = value[index] ?? "";
        });
      }
      if (typeof key === "string") {
        this.form[key] = value;
      }
      if (!key) {
        this.init();
      }
    },

    //上传
    successHandle(response, file, fileList, key) {
      this[key] = fileList;
    },
    removeHande(file, fileList, key) {
      this[key] = fileList;
    },
    uploadBefore(file) {
      console.log(file);
      // if (file.size / 1000 > 20 * 1024) {
      //   this.$message({
      //     type: "warning",
      //     message: "上传图片大小超过20MB！",
      //   });
      //   return false;
      // }
    },


    copyText (text) {
      const input = document.createElement("input");
      input.setAttribute("readonly", "readonly"); // 设置为只读, 防止在 ios 下拉起键盘
      input.value = text;
      document.body.appendChild(input);
      input.setSelectionRange(0, 9999); // 防止 ios 下没有全选内容而无法复制
      input.select();
      document.execCommand("copy");
      document.body.removeChild(input);
      this.$message({
        type: "success",
        message: `已复制:${input.value}`,
      });
    },

    async getDetail() {
      const res = await detail(this.id);
      this.$integrateData(this.form, res);
    },

    submit() {
      if (this.type === "add") {
        if (this.form.hasOwnProperty("id")) {
          delete this.form.id;
        }
      }
      if (this.type === "editor") {
        Object.defineProperty(this.form, "id", {
          value: this.id,
          enumerable: true,
          configurable: true,
          writable: true,
        });
      }
      save(this.form).then((res) => {
        this.$message({
          type: "success",
          message:
            this.type === "add" ? "新增数据管理" : "编辑数据管理" + "成功",
        });
        this.isShow = false;
        this.$emit("refresh");
      });
    },

    str2JSON () {
      try {
        this.transformJSON = JSON.parse(this.form.value)
        console.log(this.transformJSON)
      } catch (err) {
        this.$message.error(err)
      }
    },
    JSON2str () {
      this.form.value = JSON.stringify(this.transformJSON)
    }
  },
  computed: {
    JSONHeader () {
      if (this.transformJSON instanceof Array && this.transformJSON[0] && typeof this.transformJSON[0] === 'object') {
        return Object.keys(this.transformJSON[0]).map(i => ({
          prop: i,
          label: i,
          customFn: row => (
            <el-input vModel={row[i]} size="small"></el-input>
          )
        }))
      } else {
        return []
      }
    }
  },
  watch: {
    isShow(val) {
      if (val) {
        if (this.type === "editor") {
          this.getDetail();
        }
      } else {
        this.transformJSON = null;
        this.id = "";
        this.type = "";
        this.init();
        this.$refs["dialog"].clearValidate();
        delete this.form.id;
      }
    },
  },
};
</script>

<style scoped lang="scss">
::v-deep .el-input__inner {
  text-align: left;
}
.xy-table-item-content {}
</style>