saas_entrepot_admin/src/views/Marketing/clientSetup/friendlyLink/index.vue

<template>
  <div id="links">
    <div class="smallBox">
      <div class="dis_x">
        <div>友情链接<span>{{listData.length || 0}}条</span></div>
        <el-button :size="size" @click="add(1)" type="primary">新增</el-button>
      </div>
      <el-table :data="listData" style="margin-top: 10px" border max-height="740px">
        <el-table-column
          v-for="(item, index) in tableSet"
          :width="item.width"
          :key="index"
          :prop="item.prop"
          :label="item.label"
          align="center"
        >
          <template slot-scope="scope">
            <div v-if="item.scope === 'input'">
              <el-input-number
                @blur="changeVal(scope.row)"
                v-model="scope.row[item.prop]"
                :controls="false"
                :min="0"
                :precision="0"
                style="width: 80%"
              ></el-input-number>
            </div>
            <div v-else-if="item.scope === 'set'">
              <el-button type="text" @click="add(0, scope.row, scope.$index)"
                >修改</el-button
              >
              <el-button type="text" @click="del(scope.$index)">删除</el-button>
            </div>
            <div v-else-if="item.scope === 'status'">
              <el-switch
                v-model="scope.row[item.prop]"
                active-color="#13ce66"
                inactive-color="#ff4949"
                :active-value="1"
                :inactive-value="0"
              >
              </el-switch>
              <span style="margin-left:10px;">{{ scope.row[item.prop] == 1 ? "开启" : "关闭" }}</span>
            </div>
            <div v-else>{{ scope.row[item.prop] }}</div>
          </template></el-table-column
        >
      </el-table>
      <div style="text-align: center; margin-top: 20px">
        <el-button :size="size" type="primary" @click="submit">保 存</el-button>
      </div>
    </div>
    <el-dialog
      @closed="loadingClose"
      :visible.sync="dialogVisible"
      width="680px"
      :show-close="false"
      :close-on-click-modal="false"
    >
      <div slot="title" class="hearders">
        <div class="leftTitle">
          {{ statusPop === 1 ? "添加" : statusPop === 0 ? "修改" : "详情" }}
        </div>
        <div class="rightBoxs">
          <img src="@/assets/images/Close@2x.png" alt="" @click="close" />
        </div>
      </div>
      <div>
        <el-form
          label-position="right"
          label-width="170px"
          :model="boxData"
          :rules="rules"
          ref="boxData"
        >
          <el-form-item label="名称" prop="name">
            <el-input v-model="boxData.name"></el-input>
          </el-form-item>
          <el-form-item label="链接地址" prop="url">
            <el-input v-model="boxData.url"></el-input>
          </el-form-item>
          <el-form-item label="状态" prop="status">
            <el-radio-group v-model="boxData.status">
              <el-radio :label="1">启用</el-radio>
              <el-radio :label="0">关闭</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button @click="submitForm('boxData')" :loading="disabledBtn"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { listConfig, updateConfig } from "@/api/system/config";
export default {
  data() {
    return {
      disabledBtn: false,
      dialogVisible: false,
      size: "mini",
      tableSet: [
        {
          label: "排序",
          prop: "sort",
          scope: "input",
          width: "120px",
        },
        {
          label: "名称",
          prop: "name",
        },
        {
          label: "链接地址",
          prop: "url",
        },
        {
          label: "状态",
          prop: "status",
          scope: "status",
        },
        {
          label: "操作",
          scope: "set",
          width: "160px",
        },
      ],
      Nav: [],
      initData: {},
      listData: [],
      statusPop: "",
      boxData: {},
      rules: {
        name: [{ required: true, message: "请填写名称", trigger: "blur" }],
        url: [{ required: true, message: "请填写链接地址", trigger: "blur" }],
        status: [
          {
            required: true,
            message: "请选择状态",
            trigger: "change",
          },
        ],
      },
      newIndex: "",
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    changeVal(row) {
      if (!row.sort && row.sort !== 0) {
        this.$message.warning("检测到你没有赋值或赋值异常，已自动赋值为0");
        row.sort = 0;
      } else {
        for (let i = 0; i < this.listData.length; i++) {
          if (
            this.listData[i].name !== row.name &&
            this.listData[i].sort == row.sort
          ) {
            this.$message.warning("检测到重复值，已自动赋值为0");
            row.sort = 0;
          }
        }
      }
      this.listData.sort(this.sort);
    },
    sort(a, b) {
      return a.sort - b.sort;
    },
    loadingClose() {
      this.disabledBtn = false;
    },
    del(index) {
      this.listData.splice(index, 1);
    },
    add(int, row, index) {
      this.statusPop = int;
      this.newIndex = index;
      if (int === 0) {
        this.boxData = JSON.parse(JSON.stringify(row));
      }
      if (int === 1) {
        var indexNum = 0;
        this.listData.forEach((item) => {
          if (item.sort >= indexNum) {
            indexNum = item.sort + 1;
          }
        });
        this.boxData = {};
        this.boxData.sort = indexNum;
      }
      this.dialogVisible = true;
      this.$nextTick(() => {
        this.$refs.boxData.clearValidate();
      });
    },
    close() {
      this.dialogVisible = false;
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.statusPop === 1) {
            this.listData.push(this.boxData);
          } else {
            this.listData.splice(this.newIndex, 1, this.boxData);
          }
          this.dialogVisible = false;
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    init() {
      listConfig({ configKey: "home.links" }).then((res) => {
        if (res.rows.length) {
          this.initData = res.rows[0];
          this.listData = JSON.parse(res.rows[0].configValue);
        }
      });
    },
    submit() {
      let data = JSON.parse(JSON.stringify(this.listData));
      let copySubmitData = JSON.parse(JSON.stringify(this.initData));
      copySubmitData.configValue = JSON.stringify(data);
      updateConfig(copySubmitData).then((res) => {
        this.$message.success("保存成功");
      });
    },
  },
};
</script>

<style lang="less" scoped>
.dis_x{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.smallBox {
  // width: 900px;
}

/deep/.el-button {
  border-radius: 8px;
}
/deep/.el-dialog {
  border-radius: 8px;
  .el-dialog__header {
    padding: 0;
    .hearders {
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0px 18px 0px 20px;
      border-bottom: 1px solid #e2e2e2;
      .leftTitle {
        font-size: 14px;
        font-weight: bold;
        color: #2f4378;
      }
      .rightBoxs {
        display: flex;
        align-items: center;
        img {
          width: 14px;
          height: 14px;
          margin-left: 13px;
          cursor: pointer;
        }
      }
    }
  }
  .el-dialog__footer {
    padding: 0;
    .dialog-footer {
      padding: 0px 40px;
      height: 70px;
      border-top: 1px solid #e2e2e2;
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
  }
}
.imgBox {
  width: 100%;
  // height: 210px;
  border: 1px solid #e2e2e2;
  border-radius: 8px;
  padding: 8px 8px 3px;
  display: flex;
  flex-direction: column;
  align-items: center;
  .imgLabel {
    flex: 1;
    width: 100%;
    border: 1px dotted #e2e2e2;
    color: #999;
    font-size: 14px;
    cursor: pointer;
    border-radius: 8px;
    .msPhoto {
      display: flex;
      justify-content: center;
      align-items: center;
      max-width: 100%;
      max-height: 270px;
      img {
        max-width: 100%;
        max-height: 270px;
      }
    }
    .imgbbx {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      i {
        font-weight: bold;
        margin: 14px 0;
        font-size: 24px;
      }
    }
  }
  p {
    margin: 5px 0px;
  }
}
.dis_fs {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 337.5px;
  height: 144px;
  border: 1px solid #999;
  .imgBoxs {
    width: 100%;
    height: 100%;
  }
}
.styPsty {
  margin-top: 10px;
  display: flex;
  align-items: center;
  .btns {
    border: 1px solid #999;
    font-size: 12px;
    height: 28px;
    line-height: 28px;
    padding: 0px 10px;
    border-radius: 4px;
    cursor: pointer;
    margin-right: 10px;
    flex-shrink: 0;
  }
}
</style>