zc_saas_admin/src/views/Marketing/clientSetup/pageSet/page3.vue

<template>
  <div>
    <el-form
      :model="listData"
      :rules="rules"
      ref="listData"
      label-width="120px"
      class="demo-ruleForm"
    >
      <h5>电脑端广告语</h5>
      <el-form-item label="展示：" prop="sloganStatus">
        <el-radio-group v-model="listData.sloganStatus">
          <el-radio :label="1">启用</el-radio>
          <el-radio :label="0">关闭</el-radio>
        </el-radio-group></el-form-item
      >
      <el-form-item
        label="标题："
        prop="slogan"
        :rules="
          listData.sloganStatus == 1 ? rules.slogan : [{ required: false }]
        "
      >
        <el-input
          style="width: 300px"
          v-model="listData.slogan"
          clearable
          placeholder="输入如：为什么选择XX云学堂？"
        ></el-input>
      </el-form-item>
      <el-row>
        <el-col span="8">
          <el-form-item label="展示：" prop="sub1Status">
            <el-radio-group v-model="listData.sub1Status">
              <el-radio :label="1">启用</el-radio>
              <el-radio :label="0">关闭</el-radio>
            </el-radio-group></el-form-item
          >
          <el-form-item
            label="副标题一："
            prop="sub1Title"
            :rules="
              listData.sub1Status == 1 ? rules.sub1Title : [{ required: false }]
            "
          >
            <el-input
              style="width: 300px"
              v-model="listData.sub1Title"
              clearable
              placeholder="输入如：人社批准"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="副描述一："
            prop="sub1Description"
            :rules="
              listData.sub1Status == 1
                ? rules.sub1Description
                : [{ required: false }]
            "
          >
            <el-input
              style="width: 300px"
              v-model="listData.sub1Description"
              clearable
              placeholder="输入如：办学许可号：人社民440000315XXXX号"
            ></el-input> </el-form-item
        ></el-col>
        <el-col span="8">
          <el-form-item label="展示：" prop="sub2Status">
            <el-radio-group v-model="listData.sub2Status">
              <el-radio :label="1">启用</el-radio>
              <el-radio :label="0">关闭</el-radio>
            </el-radio-group></el-form-item
          >
          <el-form-item
            label="副标题二："
            prop="sub2Title"
            :rules="
              listData.sub2Status == 1 ? rules.sub2Title : [{ required: false }]
            "
          >
            <el-input
              style="width: 300px"
              v-model="listData.sub2Title"
              clearable
              placeholder="输入如：十年专注"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="副描述二："
            prop="sub2Description"
            :rules="
              listData.sub2Status == 1
                ? rules.sub2Description
                : [{ required: false }]
            "
          >
            <el-input
              style="width: 300px"
              v-model="listData.sub2Description"
              clearable
              placeholder="输入如：雄厚师资：教授、博士、工程师"
            ></el-input> </el-form-item
        ></el-col>
        <el-col span="8">
          <el-form-item label="展示：" prop="sub3Status">
            <el-radio-group v-model="listData.sub3Status">
              <el-radio :label="1">启用</el-radio>
              <el-radio :label="0">关闭</el-radio>
            </el-radio-group></el-form-item
          >
          <el-form-item
            label="副标题三："
            prop="sub3Title"
            :rules="
              listData.sub3Status == 1 ? rules.sub3Title : [{ required: false }]
            "
          >
            <el-input
              style="width: 300px"
              v-model="listData.sub3Title"
              clearable
              placeholder="输入如：教学实力"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="副描述三："
            prop="sub3Description"
            :rules="
              listData.sub3Status == 1
                ? rules.sub3Description
                : [{ required: false }]
            "
          >
            <el-input
              style="width: 300px"
              v-model="listData.sub3Description"
              clearable
              placeholder="输入如：服务5000余家企业，近50000余人次"
            ></el-input> </el-form-item
        ></el-col>
      </el-row>
      <h5>电脑端文本</h5>

      <el-table :data="tableData" style="margin-top: 10px" border
        ><el-table-column label="文本内容" align="center">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row['name']"
            ></el-input> </template></el-table-column
        ><el-table-column label="状态" align="center" width="180px">
          <template slot-scope="scope">
            <el-switch
              :active-value="1"
              :inactive-value="0"
              style="display: block"
              v-model="scope.row['status']"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-text="开启"
              inactive-text="关闭"
            >
            </el-switch></template
        ></el-table-column>
        <el-table-column align="center" width="200px">
          <template slot="header" slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              @click="tableData.push({ name: '', status: 0 })"
              >新增</el-button
            >
          </template>
          <template slot-scope="scope">
            <el-button
              type="text"
              icon="el-icon-upload2"
              @click="sort(scope.$index, 1)"
            ></el-button>
            <el-button
              type="text"
              icon="el-icon-download"
              @click="sort(scope.$index, 2)"
            ></el-button>
            <el-button type="text" @click="tableData.splice(scope.$index, 1)"
              >删除</el-button
            >
          </template></el-table-column
        >
      </el-table>

      <h5>版权所有</h5>
      <el-form-item label="展示：" prop="copyrightStatus">
        <el-radio-group v-model="listData.copyrightStatus">
          <el-radio :label="1">启用</el-radio>
          <el-radio :label="0">关闭</el-radio>
        </el-radio-group></el-form-item
      >
      <el-form-item
        label="名称："
        prop="copyright"
        :rules="
          listData.copyrightStatus == 1
            ? rules.copyright
            : [{ required: false }]
        "
      >
        <el-input
          style="width: 300px"
          v-model="listData.copyright"
          clearable
          placeholder="输入"
        ></el-input>
      </el-form-item>
      <h5>技术支持</h5>
      <el-form-item label="展示：" prop="technologyStatus">
        <el-radio-group v-model="listData.technologyStatus">
          <el-radio :label="1">启用</el-radio>
          <el-radio :label="0">关闭</el-radio>
        </el-radio-group></el-form-item
      >
      <el-form-item
        label="名称："
        prop="technology"
        :rules="
          listData.technologyStatus == 1
            ? rules.technology
            : [{ required: false }]
        "
      >
        <el-input
          style="width: 300px"
          v-model="listData.technology"
          clearable
          placeholder="输入"
        ></el-input>
      </el-form-item>
      <h5>ICP备案号</h5>
      <el-form-item label="备案号：" prop="icp">
        <el-input
          style="width: 300px"
          v-model="listData.icp"
          clearable
          placeholder="输入"
        ></el-input
      ></el-form-item>
      <el-form-item label="跳转工信部：" prop="miit">
        <el-input
          style="width: 300px"
          v-model="listData.miit"
          clearable
          placeholder="输入"
        ></el-input>
      </el-form-item>
      <el-form-item label="其他：" prop="otherHtml">
        <el-input
          type="textarea"
          :rows="4"
          v-model="listData.otherHtml"
          clearable
          placeholder="输入"
        ></el-input>
      </el-form-item>
    </el-form>
    <div style="margin-top: 20px">
      <el-button type="primary" @click="submit">保存</el-button>
    </div>
  </div>
</template>

<script>
import { listConfig, updateConfig } from "@/api/system/config";
export default {
  data() {
    return {
      initData: {
        configValue: {},
      },
      listData: {},
      tableData: [],
      rules: {
        sloganStatus: [
          { required: true, message: "请选择", trigger: "change" },
        ],
        slogan: [{ required: true, message: "请输入标题", trigger: "blur" }],
        sub1Status: [{ required: true, message: "请选择", trigger: "change" }],
        sub1Title: [
          { required: true, message: "请输入副标题一", trigger: "blur" },
        ],
        sub1Description: [
          { required: true, message: "请输入副描述一", trigger: "blur" },
        ],
        sub2Status: [{ required: true, message: "请选择", trigger: "change" }],
        sub2Title: [
          { required: true, message: "请输入副标题二", trigger: "blur" },
        ],
        sub2Description: [
          { required: true, message: "请输入副描述二", trigger: "blur" },
        ],
        sub3Status: [{ required: true, message: "请选择", trigger: "change" }],
        sub3Title: [
          { required: true, message: "请输入副标题三", trigger: "blur" },
        ],
        sub3Description: [
          { required: true, message: "请输入副描述三", trigger: "blur" },
        ],
        copyrightStatus: [
          { required: true, message: "请选择", trigger: "change" },
        ],
        copyright: [
          { required: true, message: "请输入版权所有", trigger: "blur" },
        ],
        technologyStatus: [
          { required: true, message: "请选择", trigger: "change" },
        ],
        technology: [
          { required: true, message: "请输入技术支持", trigger: "blur" },
        ],
        icp: [{ required: true, message: "请输入备案号", trigger: "blur" }],
        miit: [
          { required: true, message: "请输入工信部网站", trigger: "blur" },
        ],
      },
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    sort(index, status) {
      var goIndex;
      const ary = this.tableData[index];
      if (status == 1) {
        if (index == 0) {
          goIndex = this.tableData.length - 1;
        } else {
          goIndex = index - 1;
        }
      }
      if (status == 2) {
        if (index == this.tableData.length - 1) {
          goIndex = 0;
        } else {
          goIndex = index + 1;
        }
      }
      let tableData = JSON.parse(JSON.stringify(this.tableData));
      tableData.splice(index, 1);
      tableData.splice(goIndex, 0, ary);
      this.tableData = tableData;
    },
    init() {
      listConfig({ configKey: "client.config" }).then((res) => {
        if (res.rows.length) {
          this.initData = res.rows[0];
          let configValue = JSON.parse(res.rows[0].configValue) || {};
          this.$nextTick(() => {
            this.listData = configValue.footer || {};
            this.tableData = this.listData.tableData || [];
          });
        }
      });
    },
    submit() {
      this.$refs["listData"].validate((valid) => {
        if (valid) {
          this.listData.tableData = this.tableData;
          let initData = JSON.parse(JSON.stringify(this.initData));
          initData.configValue = JSON.parse(initData.configValue);
          initData.configValue["footer"] = this.listData;
          initData.configValue = JSON.stringify(initData.configValue);
          updateConfig(initData).then((res) => {
            this.$message.success("保存成功");
            this.init();
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
h5 {
  font-weight: bold;
  padding-left: 30px;
  margin: 10px 0px 16px;
  font-size: 14px;
}
</style>