BST_bigScreen/src/views/BasicSettings/urgentSetting.vue

<template>
  <div>
    <Toptitle :title="title">
      <slot name="titleButton">
        <!-- <Button @click="back"
                type='primary'
                ghost
                style="margin-right:10px;">返回</Button> -->
        <Button type="primary"
                style="margin-right:10px;"
                @click="handleRowClick({},null,1)"
                ghost>新增</Button>
      </slot>
    </Toptitle>
    <div style="padding-top:20px">
      <Form inline>
        <FormItem>
          <Input style="width:150px"
                 clearable
                 v-model="search_title"
                 size="small"
                 placeholder="请输入紧急程度名称" />
        </FormItem>
        <FormItem>
          <Button type="primary"
                  size="small"
                  @click="init">搜索</Button>
        </FormItem>
      </Form>
    </div>
    <div style="padding:20px 0px">
      <Table border
             ref="refTableData"
             draggable
             :columns="columns"
             :data="tableData"
             @on-drag-drop="onDragDrop">
        <template slot="colorStyle"
                  slot-scope="{row}">
          <div :style="row.style">
            颜色展示
          </div>
        </template>
        <template slot="op"
                  slot-scope="{row,index}">
          <a @click="handleRowClick(row,index,2)"
             style="margin-right:10px">编辑</a>
          <a @click="handleRowClick(row,index,3)">删除</a>
        </template>
      </Table>
    </div>
    <Modal class="modal"
           title='请选择'
           v-model='showModal'
           :mask-closable="false"
           :width="400">
      <div>
        <span>ID：</span>
        <span>
          <Input style="width:150px"
                 v-model="currencyRow.id"
                 disabled
                 placeholder="自动生成" />
        </span>
      </div>
      <div>
        <span>紧急程度名称：</span>
        <span>
          <Input style="width:150px"
                 v-model="currencyRow.title"
                 placeholder="请输入紧急程度名称" />
        </span>
      </div>
      <div>
        <span>字体颜色： </span>
        <span>
          <ColorPicker v-model="currencyRow.color" />
        </span>
      </div>
      <div class="modal-footer"
           slot="footer">
        <Button @click="showModal = false">取消</Button>
        <Button type="primary"
                @click="handleColorConfirm">确认</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';

export default {
  name: 'colorSetting',
  components: {

  },
  props: {},
  // import引入的组件需要注入到对象中才能使用
  data () {
    // 这里存放数据
    return {
      title: '紧急程度',
      columns: [
        { type: 'index', key: '', align: 'center' },
        { title: '紧急程度名称', key: 'title', align: 'center', },
        { title: '字体颜色', key: 'color', align: 'center', slot: 'colorStyle' },
        { title: '操作', key: 'operation', align: 'center', slot: 'op' }
      ],
      tableData: [],
      maxSort: 0,
      showModal: false,
      //1新增2编辑
      addState: 0,
      currencyRow: {
        color: ''
      },
      currencyIndex: 0
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {
    // this.initData()
    this.init()
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {
  },
  methods: {
    init () {
      this.axios.get('/api/warning_list', {
        params: {
          title: this.search_title
        }
      }).then(res => {
        if (res.code == 200) {
          this.tableData = res.data.data
          this.tableData.forEach(element => {
            element.style = {
              backgroundColor: element.color,
              color: element.color,
            }
          });
        }
      }).catch(err => { console.error(err); })
    },
    back () {
      this.$router.go(-1)
    },
    handleRowClick (row, index, type) {
      this.currencyRow = JSON.parse(JSON.stringify(row))
      this.currencyIndex = index
      this.addState = type
      switch (type) {
        case 1:
        case 2:
          this.showModal = true
          break;
        case 3:
          this.$Modal.confirm({
            title: '确认删除？',
            content: '此操作无法恢复，请确认！',
            onOk: () => {
              this.axios({
                method: 'post',
                url: '/api/warning_del',
                data: {
                  id: row.id
                }
              }).then((res) => {
                this.$Message.success(res.msg)
                this.init()
              }).catch((err) => { });
            },
            onCancel: () => { }
          })
          break;
      }
    },
    handleColorChange (row, index, type) {
      this.addState = type
      this.showModal = true
    },
    handleColorConfirm () {
      this.axios({
        method: 'post',
        url: '/api/warning_edit',
        data: {
          ...this.currencyRow
        }
      }).then((res) => {
        this.$Message.success(res.msg)
        this.showModal = false
        this.init()
      }).catch((err) => { });
    },
    handleSave () {
      this.tableData.forEach((el, index) => {
        el.sort = index + 1
      });
      this.axios({
        method: 'post',
        url: '/api/basics_color_edit',
        data: {
          ...this.tableData
        }
      }).then((res) => {
        this.$Message.success(res.msg)
        this.showModal = false
        // this.init()
      }).catch((err) => { });
    },
    onDragDrop (a, b) {
      this.tableData.splice(b, 0, ...this.tableData.splice(a, 1))
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  beforeCreate () { }, // 生命周期 - 创建之前
  beforeMount () { }, // 生命周期 - 挂载之前
  beforeUpdate () { }, // 生命周期 - 更新之前
  updated () { }, // 生命周期 - 更新之后
  beforeDestroy () { }, // 生命周期 - 销毁之前
  destroyed () { }, // 生命周期 - 销毁完成
  activated () { }, // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style lang='scss' scoped>
.modal {
  div {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 10px 0;
    span {
      width: 150px;
    }
  }
}
</style>