<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
  <CurdPanel title-search-form="通知管理" title-data-table="通知列表" title-editor="通知管理" :editor-width="'600px'" :editor-validate="validate" :doQuery="NoticeApi.doQuery" :doGet="NoticeApi.doGet"
    :doSave="NoticeApi.doSave" :doDelete="NoticeApi.doDelete" close-on-save autoLoad>

    <!-- 查询条件区域 -->
    <template v-slot:search-form="{formData}">
      <el-form-item label="通知用户" prop="userName">
        <el-input v-model="formData.userName"></el-input>
      </el-form-item>
    </template>

    <!-- 表格列区域 -->
    <template slot="table-columns">
      <el-table-column prop="username" label="通知用户" show-overflow-tooltip />
      <el-table-column prop="smsphone" label="短信号码" show-overflow-tooltip />
      <el-table-column prop="cellphone" label="手机号码" show-overflow-tooltip />
      <el-table-column prop="email" label="电子邮箱" show-overflow-tooltip />
      <el-table-column prop="opensms" label="短信通知" width='120' show-overflow-tooltip align="center">
        <template slot-scope="scope">
          <i v-if="scope.row.opensms==='1'" class="font-green-success el-icon-check" style="font-weight:blod"></i>
          <i v-if="scope.row.opensms==='0'" class="font-red el-icon-close" style="font-weight:blod"></i>
        </template>
      </el-table-column>
      <el-table-column prop="opencall" label="电话通知" width='120' show-overflow-tooltip align="center">
        <template slot-scope="scope">
          <i v-if="scope.row.opencall==='1'" class="font-green-success el-icon-check" style="font-weight:blod"></i>
          <i v-if="scope.row.opencall==='0'" class="font-red el-icon-close" style="font-weight:blod"></i>
        </template>
      </el-table-column>
      <el-table-column prop="openemail" label="邮件通知" width='120' show-overflow-tooltip align="center">
        <template slot-scope="scope">
          <i v-if="scope.row.openemail==='1'" class="font-green-success el-icon-check" style="font-weight:blod"></i>
          <i v-if="scope.row.openemail==='0'" class="font-red el-icon-close" style="font-weight:blod"></i>
        </template>
      </el-table-column>
    </template>

    <!-- 数据编辑区域 -->
    <template v-slot:editor="{data}">
      <el-form :model="data" ref="queryform" label-width="90px" show-message label-position="top">
        <el-form-item class="flex-1" prop="userName" label="用户名" required>
          <el-input v-model="data.userName"></el-input>
        </el-form-item>
        <el-form-item class="flex-1" prop="smsPhone" label="短信号码">
          <el-input v-model="data.smsPhone"></el-input>
        </el-form-item>
        <el-form-item class="flex-1" prop="cellPhone" label="手机号码">
          <el-input v-model="data.cellPhone"></el-input>
        </el-form-item>
        <el-form-item class="flex-1" prop="email" label="电子邮箱">
          <el-input v-model="data.email"></el-input>
        </el-form-item>
        <el-row>
          <el-col :span="8">
            <el-form-item class="flex-1" prop="openSms" label="短信通知">
              <el-switch v-model="data.openSms" active-color="#13ce66" inactive-color="#ff4949" active-value="1" inactive-value="0" :disabled="!/^\d{11}$/.test(data.smsPhone)">
              </el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item class="flex-1" prop="openCall" label="电话通知">
              <el-switch v-model="data.openCall" active-color="#13ce66" inactive-color="#ff4949" active-value="1" inactive-value="0" :disabled="!/^\d{11}$/.test(data.cellPhone)">
              </el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item class="flex-1" prop="openEmail" label="邮件通知">
              <el-switch v-model="data.openEmail" active-color="#13ce66" inactive-color="#ff4949" active-value="1" inactive-value="0"
                :disabled="!/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(data.email)">
              </el-switch>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </template>

  </CurdPanel>

</template>

<script>
import { Ajax } from "cnetong-core-frontend";
import NoticeApi from "@/api/base/sysm/NoticeApi";

export default {
  name: "SampleCurd",
  data() {
    return { NoticeApi };
  },
  methods: {
    validate() {
      return this.$refs["queryform"].validate();
    }
  }
};
</script>

<style scoped>
</style>