supply-front/src/views/pset/login_setting.vue

<template>
  <div class="app-container">
    <div class="page-header">
      轮播图管理
    </div>
    <el-divider></el-divider>

    <div class="btn-group">
      <el-button
        type="primary"
        size="small"
        @click="(dialogVisible = true), (type = 1)"
      >新增</el-button>

      <el-button size="small" type="danger"  @click="batchDelete()">删除</el-button>

    </div>
    <div class="mymain-container">
      <el-table
        v-loading="listLoading"
        :data="dataList"
        element-loading-text="Loading"
        border
        fit
        highlight-current-row
        stripe
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" align="center">
        </el-table-column>
        <template v-for="col in columns">
          <el-table-column
            align="center"
            :label="col.lable"
            :prop="col.prop"
            :min-width="col.widht"
            show-overflow-tooltip
            v-if="col.prop == 'status'"
          >
            <template slot-scope="scope">
              <div style="z-index: 99">
                <el-tag type="success"   v-if="scope.row.status == '1'"  >显示</el-tag>
                <el-tag type="danger"  v-else-if="scope.row.status == '0'">隐藏 </el-tag>
              </div>
            </template>
          </el-table-column>

          <el-table-column
            align="center"
            :label="col.lable"
            :prop="col.prop"
            :min-width="col.widht"
            show-overflow-tooltip
            v-if="col.prop == 'imgCarouselUrl'"
          >
            <template slot-scope="scope">
              <a :href="scope.row.imgCarouselUrl" >
                <img :src="scope.row.imgCarouselUrl" alt="轮播图"  class="el-image__inner el-image__preview"/>
              </a>
            </template>
          </el-table-column>

          <el-table-column
            v-else
            align="center"
            :label="col.lable"
            :prop="col.prop"
            :min-width="col.widht"
            show-overflow-tooltip
          >
          </el-table-column>
        </template>

        <el-table-column
          align="center"
          fixed="right"
          label="操作"
          min-width="160"
        >
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="hanleEdit(scope.row)"
            >编辑</el-button
            >

            <el-button type="text" size="small" @click="hanleStatus(scope.row.id)"  v-if="scope.row.status === '1'">隐藏</el-button>
            <el-button type="text" size="small" @click="hanleStatus(scope.row.id)"  v-if="scope.row.status === '0'">显示</el-button>


            <el-popconfirm
              title="确定要删除这张轮播图吗？"
              style="margin-left: 10px"
              @onConfirm="hanleDelete(scope.row.id)"
            >
              <el-button slot="reference" type="text" size="small"
              >删除</el-button
              >
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <!--      <div style="margin: 20px 0">-->
      <!--        <el-pagination-->
      <!--          @size-change="handleSizeChange"-->
      <!--          @current-change="handleCurrentChange"-->
      <!--          :current-page="currentPage"-->
      <!--          :page-sizes="[10, 20, 30, 50]"-->
      <!--          :page-size="10"-->
      <!--          layout="total, sizes, prev, pager, next, jumper"-->
      <!--          :total="listTotal"-->
      <!--        >-->
      <!--        </el-pagination>-->
      <!--      </div>-->
    </div>

    <!-- 添加公司备案信息 -->
    <div>
      <div class="setting_title">备案管理</div>
      <el-divider></el-divider>

      <el-card shadow="never" class="my-card">
        <el-form
          class="my-form"
          ref="mainForm"
          :model="comPanyDialogForm"
          label-width="120px"
          label-position="right"
        >
          <el-form-item label="ICP备案:" prop="nickName">
            <el-input
              autocomplete="off"
              placeholder="请输入"
              v-model="comPanyDialogForm.icpRecord"
            ></el-input
            >
          </el-form-item>

          <el-form-item label="ICP备案链接:" prop="nickName">
            <el-input
              autocomplete="off"
              placeholder="请输入"
              v-model="comPanyDialogForm.icpRecordLink"
            ></el-input
            > (填写链接，可跳转至链接页面)
          </el-form-item>

          <el-form-item label="公网安备案:" prop="nickName">
            <el-input
              autocomplete="off"
              placeholder="请输入"
              v-model="comPanyDialogForm.pubSecurityRecord"
            ></el-input
            >
          </el-form-item>

          <el-form-item label="公网安备案链接:" prop="nickName">
            <el-input
              autocomplete="off"
              placeholder="请输入"
              v-model="comPanyDialogForm.pubSecurityRecordLink"
            ></el-input
            > (填写链接，可跳转至链接页面)
          </el-form-item>

          <div class="setting_title">公司名称管理</div>
          <el-divider></el-divider>

          <el-form-item label="公司名称:" prop="nickName">
            <el-input
              autocomplete="off"
              placeholder="单行输入"
              v-model="comPanyDialogForm.companyName"
            ></el-input
            >
          </el-form-item>

        </el-form>

      </el-card>
    </div>



    <div class="page-footer">
      <div class="footer">
        <!--        <el-button type="primary" @click="editFn">修改</el-button>-->
        <el-button type="primary" @click="addComPany">确定</el-button>
      </div>
    </div>

    <div>
      <el-dialog
        :visible.sync="dialogVisible"
        width="50%"
        @close="resetForm"
        :close-on-click-modal="false"
      >
        <el-form
          ref="dialogForm"
          :model="dialogForm"
          :rules="type == 1 ? rules : ''"
          label-width="120px"
          size="normal"
        >
          <el-form-item label="轮播图名称" prop="saleCode">
            <el-input v-model="dialogForm.imgCarouselName"></el-input>
          </el-form-item>

          <el-form-item label="轮播图" prop="fileUrl">
            <ImageUpload :fileList="fileList" :multiple="true" />
          </el-form-item>

          <el-form-item label="排序" prop="mainId">
            <el-input v-model="dialogForm.imgCarouselOrder"></el-input>
          </el-form-item>

        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="(dialogVisible = false), resetForm()"
          >取 消</el-button
          >
          <el-button type="primary" @click="addImgCarousel">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
    import Mixin from "@/mixin/index";
    import Pagination from "@/components/Pagination";
    import ImageUpload from '@/components/Common/image-upload.vue';
    import {
        getProductList,
        getImgCarouseList,
        handleImgIsShow,
        addImgCarousel,
        delImgData,
        addCompany,
        editImgCarousel,
    } from "@/api/policy_list";

    export default {
        mixins: [Mixin],
        data() {
            return {

                type: 0, // 0,1
                screenForm: {
                    companyRecordManageId: "",
                    imgCarouselName: "",
                    imgCarouselUrl: "",
                    imgCarouselOrder: "",
                    status: "",
                },
                dialogForm: {
                    id: "",
                    companyRecordManageId: "",
                    imgCarouselName: "",
                    imgCarouselUrl: "",
                    imgCarouselOrder: "",
                    status: "1",
                },
                comPanyDialogForm: {
                    id: "",
                    icpRecord: "",
                    icpRecordLink: "",
                    pubSecurityRecord: "",
                    pubSecurityRecordLink: "",
                    companyName: "",
                },

                dataList: [
                    {
                        date: "2016-05-02",
                        name: "王小虎",
                        label: "姓名",
                        address: "上海市普陀区金沙江路 1518 弄",
                    },
                ],
                columns: [
                    {
                        prop: "imgCarouselName",
                        lable: "轮播图名称",
                        widht: 160,
                    },
                    {
                        prop: "imgCarouselUrl",
                        lable: "轮播图",
                        widht: 160,
                    },

                    {
                        prop: "imgCarouselOrder",
                        lable: "排序",
                        widht: 160,
                    },
                    {
                        prop: "createTime",
                        lable: "创建时间",
                        widht: 160,
                    },
                    {
                        prop: "status",
                        lable: "状态",
                        widht: 160,
                    },

                ],

                rules: {
                    imgCarouselName: [
                        { required: true, message: "请输入轮播图名称", trigger: "blur" },
                    ],
                    // saleName: [
                    //   { required: true, message: "请输入销售类型名称", trigger: "blur" },
                    // ],
                    // mainName: [
                    //   { required: true, message: "请输入品类名称", trigger: "blur" },
                    // ],
                },
                productList: [],
                fileList: [],
                multipleSelection: [],
            };
        },
        methods: {

            getList() {
                this.listLoading = true;
                const params = {
                    pageNum: this.currentPage,
                    pageSize: this.pageSize,
                    saleCode: this.screenForm.saleCode,
                    saleName: this.screenForm.saleName,
                    mainId: "",
                    status: this.screenForm.status,
                };
                // getTypeList(params).then((res) => {
                //   this.dataList = res.data.records;
                //   this.listTotal = res.data.total;
                //   this.listLoading = false;
                // });
                getImgCarouseList(params).then((res) => {
                    this.dataList = res.data;
                    this.listLoading = false;
                });
                getProductList({
                    productCategoryName: "",
                    productCategoryNumber: "",
                }).then((res) => {
                    this.productList = res.data;
                });
            },
            handleChange(e) {
                this.productList.find((k) => {
                    if (k.productCategoryNumber == e) {
                        this.dialogForm.mainId = k.productCategoryNumber;
                        this.dialogForm.mainName = k.productCategoryName;
                        this.screenForm.mainId = k.productCategoryNumber;
                        this.screenForm.mainName = k.productCategoryName;
                    }
                });
            },
            hanleDelete(id) {
                this.hanleDeleteAllPromise(id).then((ids) => {
                    delImgData({
                        ids: ids[0],
                    }).then((res) => {
                        this.$successMsg("删除成功");
                        this.hanleReset();
                    });
                });
            },
            hanleEdit(item) {
                this.dialogForm = {
                    id: item.id,
                    companyRecordManageId: item.companyRecordManageId,
                    imgCarouselName: item.imgCarouselName,
                    imgCarouselUrl: item.imgCarouselUrl,
                    imgCarouselOrder: item.imgCarouselOrder,
                    status: item.status,
                };
                this.type = 0;
                this.dialogVisible = true;
            },
            hanleDateil(item) {
                this.dialogVisible = true;
                this.dialogForm = {
                    ...item,
                };
                this.type = 3;
            },

            hanleStatus(id){
                handleImgIsShow({
                    id:id
                }).then((res) => {
                    this.$successMsg("状态已更改");
                    this.hanleReset();
                });
            },

            addImgCarousel(){
                if (this.type == 1) {
                    this.$refs.dialogForm.validate((valid) => {
                        //console.log(...this.dialogForm)
                        if (valid) {
                            this.dialogForm.imgCarouselUrl = "http://hg.zfire.top/api/img/get?key=" + this.fileList[0].url
                            const params = {
                                ...this.dialogForm,
                            };
                            addImgCarousel(params).then((res) => {
                                this.$successMsg("添加成功");
                                this.hanleReset();
                            });
                        } else {
                            console.log("error submit!!");
                            return false;
                        }
                    });
                } else if (this.type == 0) {
                    const upParams = {
                        ...this.dialogForm,
                    };
                    editImgCarousel(upParams).then((res) => {
                        this.$successMsg("修改成功");
                        this.hanleReset();
                    });
                } else {
                    this.dialogVisible = false;
                }
            },
            // 表格选择
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },

            //添加公司信息
            addComPany(){
                const params = {
                    ...this.comPanyDialogForm,
                };
                addCompany(params).then((res) => {
                    this.$successMsg("添加成功");
                    this.hanleReset();
                });

            },
            resetForm(formName) {
                this.$refs.dialogForm.resetFields();
            },
            hanleReset() {
                this.dialogForm = {
                    companyRecordManageId: "",
                    imgCarouselName: "",
                    imgCarouselUrl: "",
                    imgCarouselOrder: "",
                    status: "1"
                };
                // this.$refs.dialogForm.resetFields()
                this.dialogVisible = false;
                this.getList();
            },
            batchDelete() {
                if(this.multipleSelection.length < 1) {
                    return this.$errorMsg('请选择信息');
                }
                this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let ids = [];
                    this.multipleSelection.forEach(item => {
                        ids.push(item.id);
                    });
                    delImgData({ids: ids.join(',')}).then(res => {
                        this.$successMsg('删除成功');
                        this.hanleReset();
                    })
                }).catch(() => {});
            },

        },
        components: {
            Pagination,
            ImageUpload
        },
    };
</script>

<style scoped>
  .el-switch.is-disabled {
    opacity: inherit;
  }
  .page-header{
    font-size: 18px;
    padding-bottom: 10px;
    font-weight: 600;
  }
  .cname-footer{
    margin-top: 15px;
  }
  .my-form{
    width :60%
  }

</style>