irc_web/src/App.vue

<template>
  <div id="app" style="position: relative">
    <router-view />
    <div
      v-show="show"
      v-if="$route.matched.length > 0"
      v-adaptive
      @click="openI18n"
      style="
        position: fixed;
        bottom: 50px;
        left: 50px;
        z-index: 100000;
        width: 50px;
        height: 50px;
        background: #409eff88;
        line-height: 50px;
        text-align: center;
        color: #fff;
        border-radius: 50%;
        cursor: pointer;
      "
    >
      i18n
    </div>
    <el-drawer title="国际化" :visible.sync="drawer" direction="rtl" size="80%">
      <div style="width: 320px">
        <el-form label-width="100px" @submit.native.prevent size="small">
          <el-form-item label="关键字">
            <el-input v-model="key" @input="keyChange" />
          </el-form-item>
        </el-form>
      </div>
      <el-table
        :data="tableData"
        v-adaptive="{ bottomOffset: 50 }"
        height="100"
        style="width: 100%"
      >
        <el-table-column prop="Code" label="标签" width="300" show-overflow-tooltip>
        </el-table-column>
        <!--        <el-table-column-->
        <!--          prop="Description"-->
        <!--          label="路由"-->
        <!--          show-overflow-tooltip-->
        <!--          width="180">-->
        <!--          <template slot-scope="scope">-->
        <!--            {{scope.row.Description}}-->
        <!--          </template>-->
        <!--        </el-table-column>-->
        <el-table-column prop="Value" label="英文">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.Value"
              @input="
                (e) => {
                  $set(scope.row, 'Value', e);
                }
              "
              size="mini"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="ValueCN" label="中文">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.ValueCN"
              @input="
                (e) => {
                  $set(scope.row, 'ValueCN', e);
                }
              "
              size="mini"
            ></el-input>
          </template>
        </el-table-column>
      </el-table>
      <div style="text-align: right; padding-top: 10px; padding-right: 10px">
        <el-button size="mini" @click="drawer = false">取消 </el-button>
        <el-button size="mini" type="primary" @click="handleSave"
          >保存</el-button
        >
      </div>
    </el-drawer>
    <feedBack v-if="$route.matched.length > 0" />
  </div>
</template>

<script>
import {
  batchAddOrUpdateFrontInternationalization,
  getFrontInternationalizationList,
} from "@/api/dictionary/dictionary";
import { getTrialExtralConfig } from "@/api/trials";
import feedBack from "@/views/trials/trials-layout/components/feedBack";
import Vue from "vue";
import i18n from "./lang";
export default {
  name: "App",
  components: { feedBack },
  data() {
    return {
      drawer: false,
      tableData: [],
      show: false,
      key: null,
      arr: [],
    };
  },
  mounted() {
    this.show = process.env.VUE_APP_OSS_PATH === "/test/dist";
  },
  watch: {
    "$route.query": {
      async handler() {
        if (
          this.$route.query.trialId &&
          this.$route.query.trialId !==
            this.$store.state.trials.config.trialId &&
          this.$store.state.trials.whiteList.indexOf(this.$route.path) === -1
        ) {
          let res = await getTrialExtralConfig({
            TrialId: this.$route.query.trialId,
          });
          if (res.IsSuccess) {
            this.$store.dispatch("trials/setConfig", {
              trialId: this.$route.query.trialId,
              ...res.Result,
            });
          }
        }
      },
      immediate: true,
      deep: true,
    },
  },
  methods: {
    changeValue(target, attr, e) {
      this.$set(target, attr, e);
    },
    keyChange(v) {
      if (this.key) {
        this.tableData = Object.assign(
          [],
          this.arr.filter(
            (v) =>
              ~v.Code.indexOf(this.key) ||
              ~v.Value.indexOf(this.key) ||
              ~v.ValueCN.indexOf(this.key)
          )
        );
      } else {
        this.tableData = Object.assign([], this.arr);
      }
    },
    handleSave() {
      this.$confirm("确定修改当前页面国际化内容？").then(() => {
        batchAddOrUpdateFrontInternationalization(this.tableData).then(
          async (res) => {
            var zhMessages = {},
              enMessages = {};
            var Internationalization = await getFrontInternationalizationList();
            Vue.prototype.$tl = Internationalization.Result;
            this.tableData.forEach((v) => {
              // zhMessages[v.Description + '_' + v.Code] = v.ValueCN
              // enMessages[v.Description + '_' + v.Code] = v.Value
              zhMessages[v.Code] = v.ValueCN;
              enMessages[v.Code] = v.Value;
            });
            i18n.mergeLocaleMessage("zh", zhMessages);
            i18n.mergeLocaleMessage("en", enMessages);
            this.drawer = false;
            this.$message.success("国际化修改成功");
          }
        );
      });
    },
    openI18n() {
      this.tableData = [];
      this.key = null;
      this.drawer = true;
      let arr = [];
      let tableData = this.$tl.map((v) => {
        let a = { ...v };
        // if (!a.Description) {
        //   a.Description = this.$route.path
        // }
        return a;
      });
      tableData = tableData.filter((v) => {
        // return  ~this.$path.indexOf(v.Description + '_' + v.Code)
        return ~this.$path.indexOf(v.Code);
      });
      this.$path.forEach((v) => {
        let o = tableData.find((a) => {
          return a.Code === v;
        });
        if (o) {
          arr.push(o);
        } else {
          arr.push({
            Code: v,
            Description: null,
            Value: null,
            ValueCN: null,
          });
        }
      });
      this.arr = arr;
      if (this.key) {
        this.tableData = Object.assign(
          [],
          this.arr.filter(
            (v) =>
              ~v.Code.indexOf(this.key) ||
              ~v.Value.indexOf(this.key) ||
              ~v.ValueCN.indexOf(this.key)
          )
        );
      } else {
        this.tableData = Object.assign([], this.arr);
      }
      // console.log(JSON.stringify(this.$path))
      // console.log(JSON.stringify(this.tableData))
    },
  },
};
</script>

<style lang="scss">
$light_gray: #606266;
.el-tooltip__popper {
  max-width: 400px;
}
.my_multiple {
  .el-input--medium .el-input__inner {
    height: 36px !important;
  }
  .el-select__tags {
    flex-wrap: nowrap;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: block;
  }
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
}

input[type="number"] {
  -moz-appearance: textfield !important;
}

.viewer-fixed.viewer-container {
  z-index: 10000;
}
textarea {
  white-space: break-spaces;
  word-break: normal;
}

* {
  word-break: normal !important;
}
.box-body .el-button.is-circle:not(.is-disabled) i:before {
  color: #428bca;
}
.box-body .el-button.is-circle i.el-icon-question:before {
  color: #fff;
}
.system-title {
  font-size: 35px;
  color: $light_gray;
  text-align: center;
  font-weight: bold;
  font-family: "Times New Roman";
  text-shadow: 1px 0.5px 1.5px #666;
}
.title-logo {
  height: 40px;
}
.title-logo {
  height: 40px;
}
</style>