wly_chain_ui.git

<template>
  <div>
    <list-condition-template ref="table" :form="listQuery" :formLabel="formLabel"
                             :tableData="tableData" :total="total"
                             @page-info-change="pageInfoChange">
      <template slot="otherElement">
        <el-col :span="6" :offset="0">
          <el-form-item>
            <el-button size="mini" type="primary" @click="queryData">查询</el-button>
            <el-button size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-col>
      </template>
      <template slot="operationSection">
        <el-button size="mini" type="success" @click="addItem">新增</el-button>
      </template>
      <template slot="columns">
        <!-- <el-table-column label="栏位类目编号" prop="columnId"></el-table-column> -->
        <el-table-column label="栏目名称" prop="columnName" show-overflow-tooltip></el-table-column>
        <el-table-column label="栏目编号" prop="columnId"></el-table-column>
        <el-table-column label="序列号" prop="seqNum"></el-table-column>
        <el-table-column label="所属页面" prop="pageId"></el-table-column>
        <el-table-column label="状态" width="100px">
          <template slot-scope="scope">
            <span class="statusTag"
                  :style="{ background: scope.row.columnStatus ==='0' ? '#f5222d' :'#52c41a'}"></span>
            <span>{{scope.row.columnStatus ==='0' ? '不可用' : '可用'}}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" :width="`${2 * $store.getters.colSize}px`">
          <template slot-scope="scope">
            <wly-btn type="primary" @click="updateItem(scope.row,scope.$index)">编辑</wly-btn>
            <wly-btn type="danger" @click="delitem(scope.row,scope.$index)">删除</wly-btn>
          </template>
        </el-table-column>
      </template>
    </list-condition-template>
    <el-dialog :title="title" :visible.sync="addDaligVis" :close-on-click-modal="false"
               :modal-append-to-body="false" width="50%" v-if="addDaligVis">
      <common-form labelWidth="120px" :inline="inline" :form="addForm" :defaultStyle="true"
                   ref="form" :formLabel="addFormLabel" :formRules="formRules" defaultPadding="0">
      </common-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" :loading="addBtnLoading" @click="confirmAdd" size="mini">保存
        </el-button>
        <el-button @click="addDaligVis = false" size="mini">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import AdvertisingProgramApi from '@/api/marketing/programMgt'
import AdvertisingPageApi from '@/api/marketing/pageMgt'
export default {
  name: 'ProgramMgt',
  data() {
    const inputNumberValid = (rule, value, callback) => {
      const reg = /^[0-9]*$/ // 只能输入正整数
      if (value < 1 || !reg.test(value)) {
        callback(new Error('请输入1-99999之间的正整数'))
      } else {
        callback()
      }
    }
    return {
      edit: false,
      title: null,
      addBtnLoading: false,
      pageList: [], // 页面信息
      inline: false,
      addDaligVis: false,
      tableData: [],
      total: 0,
      listQuery: {
        columnName: null,
        columnStatus: null
      },
      formLabel: [
        {
          model: 'columnName',
          label: '栏目名称',
          type: 'input'
        },
        {
          model: 'columnStatus',
          label: '栏目状态 ',
          type: 'select',
          opts: [
            {
              id: '1',
              name: '可用'
            },
            {
              id: '0',
              name: '不可用'
            }
          ]
        }
      ],
      addForm: {
        columnId: null,
        columnName: null,
        seqNum: null,
        columnStatus: '1',
        pageId: null,
        columnDesc: null
      },
      addFormLabel: [
        {
          model: 'columnId',
          label: '栏目编号',
          type: 'number',
          disabled: null,
          sx: 24,
          sm: 12
        },
        {
          model: 'columnName',
          label: ' 栏目名称',
          type: 'input',
          sx: 24,
          sm: 12
        },
        {
          model: 'seqNum',
          label: '序列号',
          type: 'number',
          sx: 24,
          sm: 12
        },
        {
          model: 'columnStatus',
          label: '状态',
          type: 'select',
          sx: 24,
          sm: 12,
          opts: [
            {
              id: '1',
              name: '可用'
            },
            {
              id: '0',
              name: '不可用'
            }
          ]
        },
        {
          model: 'pageId',
          label: '所属页面',
          type: 'select',
          sx: 24,
          sm: 12,
          opts: []
        },
        {
          model: 'columnDesc',
          label: '栏目描述',
          sx: 24,
          sm: 12,
          type: 'input'
        }
      ],
      formRules: {
        columnName: [
          { required: true, message: '请输入栏目名称' },
          { max: 60, message: '栏目名称最多只能输入 60 个字' }
        ],
        columnId: [
          { required: true, message: '请输入栏目编号' },
          { validator: inputNumberValid }
        ],
        seqNum: [
          { required: true, message: '请输入序列号' }
        ],
        columnStatus: [{ required: true, message: '请选择状态' }],
        pageId: [{ required: true, message: '请选择所属页面' }],
        columnDesc: [
          { max: 100, message: '栏目描述最多只能输入 100 个字' }
        ]
      }
    }
  },
  /**
   * 数据变化后刷新列表
   */
  activated() {
    this.queryList(this.$refs.table.getPageInfo())
    this.getPage() // 查询页面信息
  },
  methods: {
    /**
     * 新增
     */
    addItem() {
      this.addDaligVis = true
      this.edit = false
      this.title = '新增'
      this.addFormLabel[0].disabled = false
      this.intiForm()
    },
    /**
     * 清空表单数据
     */
    intiForm() {
      for (const key in this.addForm) {
        this.addForm[key] = null
      }
      this.addForm.columnStatus = '1'
    },
    getPage() {
      AdvertisingPageApi.getList({ pageSize: 1000000, param: {} }).then(
        (res) => {
          if (res.data) {
            this.pageList = res.data.list
            var arr = []
            this.pageList.map(v => {
              var obj = {
                id: v.pageId,
                name: v.pageName
              }
              arr.push(obj)
            })
            this.addFormLabel.map(item => {
              if (item.model === 'pageId') {
                item.opts = arr
              }
            })
          }
        }
      )
    },
    /**
     *删除
     */
    delitem(row, index) {
      this.$confirm('确认删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        AdvertisingProgramApi.del({ columnId: row.columnId }).then(
          (res) => {
            if (res.code === '0') {
              this.queryData()
            }
          }
        )
      }).catch(() => {
      })
    },
    /**
     * 修改
     */
    updateItem(row, index) {
      this.edit = true
      this.addDaligVis = true
      this.title = '编辑'
      this.addFormLabel[0].disabled = true
      this.addForm = JSON.parse(JSON.stringify(row))
    },
    /**
     * '分页信息改变时查询列表
     */
    pageInfoChange(pageInfo) {
      this.queryList(pageInfo)
    },
    /**
     * 重置
     */
    resetQuery() {
      this.$refs.table.reloadCurrent()
    },
    /**
     * 点击查询按钮
     */
    queryData() {
      this.$refs.table.changeCondition()
    },
    /**
     * 查询列表
     */
    queryList(pageInfo = { pageNum: 1, pageSize: 10 }) {
      AdvertisingProgramApi.getList({ param: this.listQuery, ...pageInfo }).then(
        (res) => {
          if (res.data) {
            this.tableData = res.data.list
            this.total = res.data.total
          }
        }
      )
    },
    // 添加
    confirmAdd() {
      this.$refs.form.$refs.form.validate().then((res) => {
        this.addBtnLoading = true
        if (this.edit) {
          AdvertisingProgramApi.edit(this.addForm).then(
            (res) => {
              this.edit = false
              this.addBtnLoading = false
              if (res.code === '0') {
                this.$message.success('操作成功')
                this.addDaligVis = false
                this.queryData()
              }
            }
          )
        } else {
          AdvertisingProgramApi.add(this.addForm).then(
            (res) => {
              this.addBtnLoading = false
              if (res.code === '0') {
                this.$message.success('操作成功')
                this.addDaligVis = false
                this.queryData()
              }
            }
          )
        }
      })
    }
  }
}
</script>