edit

src/views/superTube/batchVideo/addEdit.vue

@@ -0,0 +1,324 @@
+<template>
+  <el-dialog
+    v-loading="loading"
+    :title="title"
+    :center="true"
+    align="left"
+    top="12vh"
+    width="800px"
+    :close-on-click-modal="false"
+    :visible.sync="showModelThis"
+    element-loading-text="拼命加载中"
+    element-loading-spinner="el-icon-loading"
+    element-loading-background="rgba(0, 0, 0, 0.8)"
+    @close="closeModel"
+  >
+    <el-card style="margin-top: -25px">
+      <el-row :gutter="10">
+        <el-col :span="24">
+          <el-form
+            ref="ruleForm"
+            :model="ruleForm"
+            status-icon
+            :rules="rulesThis"
+            label-width="110px"
+            class="demo-ruleForm"
+          >
+            <el-form-item label="企业名称" prop="testName">
+              <exSelect :type="isDetail" :dataList="test" :seleValue="ruleForm.testName" @selectFn = "selectFn" />
+              
+            </el-form-item>
+            <!-- <el-form-item label="企业名称" prop="testName">
+              <el-input
+                v-model="ruleForm.testName"
+                placeholder="请输入企业名称"
+                :disabled="isDetail === '007'"
+              />
+            </el-form-item> -->
+            <el-form-item label="联系人" prop="nickname">
+              <el-input
+                v-model="ruleForm.nickname"
+                placeholder="请输入联系人"
+                :disabled="isDetail === '007'"
+              />
+            </el-form-item>
+            <el-form-item label="手机号" prop="mobile">
+              <el-input
+                v-model="ruleForm.mobile"
+                placeholder="请输入手机号手机号"
+                :disabled="isDetail === '007'"
+              />
+            </el-form-item>
+            <el-form-item label="备注" prop="remark">
+              <el-input
+                v-model="ruleForm.remark"
+                type="textarea"
+                :autosize="{ minRows: 4, maxRows: 4 }"
+                placeholder="请输入内容"
+                :disabled="isDetail === '007'"
+                maxlength="250"
+                show-word-limit
+              />
+            </el-form-item>
+          </el-form>
+        </el-col>
+        <el-col :span="24" style="text-align: right">
+          <el-button
+            v-if="isDetail !== '007'"
+            type="primary"
+            @click="submitForm"
+            >保 存
+          </el-button>
+          <el-button @click="showModelThis = false">{{
+            isDetail !== "007" ? "取 消" : "关 闭"
+          }}</el-button>
+        </el-col>
+      </el-row>
+    </el-card>
+  </el-dialog>
+</template>
+<script>
+import asyncRequest from "@/apis/service/superTube/batchAccount";
+import resToken from "@/mixins/resToken";
+import PeriodDateTimePicker from "@/components/PeriodDateTimePicker";
+import exSelect from "@/components/global/exSelect";
+import {
+  isnumber,
+  isMobile,
+  isChinese,
+  isEmoticon,
+  validAlphabets,
+} from "@/utils/validate";
+export default {
+  name: "batchAccount",
+  props: ["showModel", "id", "isDetail", "sitem"],
+  mixins: [resToken],
+  components: {
+    PeriodDateTimePicker,
+    exSelect,
+  },
+  data() {
+    const validatename = (rule, value, callback) => {
+      if ((value ?? "") != "") {
+        callback();
+      } else {
+        callback(new Error("联系人不能为空！"));
+      }
+    };
+    const validatetestName = (rule, value, callback) => {
+      if ((value ?? "") != "") {
+        callback();
+      } else {
+        callback(new Error("企业名称不能为空！"));
+      }
+    };
+    const validateremark = (rule, value, callback) => {
+      if ((value ?? "") != "") {
+        callback();
+      } else {
+        callback(new Error("备注不能为空！"));
+      }
+    };
+    const validatemobile = (rule, value, callback) => {
+      if ((value ?? "") != "") {
+        if (!isMobile(value) && value) {
+          callback(new Error("手机号格式不正确！"));
+        } else {
+          callback();
+        }
+      } else {
+        callback(new Error("联系方式不能为空！"));
+      }
+    };
+    return {
+      seleValue:"2",
+      test: [
+        { value: "1", label: "哈哈" },
+        { value: "2", label: "AG" },
+        { value: "3", label: "嘎嘎" },
+      ],
+
+      options: [],
+      value: [],
+      list: [],
+      states: [],
+      tags: [],
+      roleList: [],
+      loading: false,
+      title: "添加账号",
+      showModelThis: this.showModel,
+      parmValue: {
+        testName: "",
+        nickname: "",
+        remark: "",
+        mobile: "",
+        page: 1,
+        size: 15,
+      },
+      ruleForm: {
+        testName: "",
+        nickname: "",
+        mobile: "",
+        remark: "",
+      },
+      rulesThis: this.rules,
+      rules: {
+        testName: [
+          {
+            required: true,
+            validator: validatetestName,
+            // trigger: "change",
+            trigger: "blur",
+
+          },
+        ],
+        nickname: [
+          {
+            required: true,
+            validator: validatename,
+            trigger: "blur",
+          },
+        ],
+        mobile: [
+          {
+            required: true,
+            validator: validatemobile,
+            trigger: "blur",
+          },
+        ],
+        remark: [
+          {
+            required: true,
+            validator: validateremark,
+            trigger: "blur",
+          },
+        ],
+      },
+    };
+  },
+  watch: {
+    showModel: function (val) {
+      this.showModelThis = val;
+      if (val) {
+        this.initForm();
+      }
+    },
+    showModelThis(val) {
+      if (!val) {
+        this.$emit("cancel");
+      }
+    },
+  },
+
+  methods: {
+    selectFn(val){
+      this.ruleForm.testName = val;
+      this.$refs.ruleForm.validateField("testName");
+      console.log(this.ruleForm.testName)
+    },
+    restSearch() {
+      this.select = "1";
+      this.input = "";
+      this.pageInfo = {
+        size: 15,
+        curr: 1,
+        total: 0,
+      };
+      this.parmValue = {
+        testName: "",
+        nickname: "",
+        remark: "",
+        mobile: "",
+        page: 1,
+        size: 15,
+      };
+    },
+
+    closeModel() {},
+    async initForm() {
+      this.loading = true;
+      if (this.isDetail === "003") {
+        this.title = "新建企业";
+        this.rulesThis = this.rules;
+        await this.resetForm();
+      } else {
+        if (this.isDetail === "007") {
+          this.title = "企业详情";
+          this.rulesThis = {};
+        } else {
+          this.title = "编辑企业";
+          this.rulesThis = this.rules;
+        }
+        await this.resetForm();
+        await this.initData();
+      }
+      this.loading = false;
+    },
+    async initData() {
+      const res = await asyncRequest.detail({ id: this.id });
+      if (res && res.code === 0 && res.data) {
+        const { testName, nickname, mobile, remark } = res.data;
+
+        this.ruleForm = {
+          testName,
+          nickname,
+          mobile,
+          remark,
+        };
+      } else if (res && res.code >= 100 && res.code <= 104) {
+        await this.logout();
+      }
+    },
+    async resetForm() {
+      this.tags = [];
+      this.options = [];
+      this.value = [];
+      await this.$nextTick(() => {
+        if (this.$refs.ruleForm) {
+          // this.$refs.videoSet.$data.selectedLabel = "";
+          // this.$refs.ruleForm.resetFields();
+          // this.$refs.ruleForm.clearValidate();
+          this.ruleForm = {
+            testName: "",
+
+            nickname: "",
+            mobile: "",
+            remark: "",
+          };
+        }
+      });
+    },
+    async submitForm() {
+      await this.$refs.ruleForm.validate(async (valid) => {
+        if (valid) {
+          this.loading = true;
+
+          let res = {};
+          if (this.id === "add") {
+            res = await asyncRequest.add(model);
+          } else {
+            res = await asyncRequest.update(model);
+          }
+          this.loading = false;
+          if (res && res.code === 0) {
+            const title = this.id === "add" ? "添加成功" : "修改成功";
+            this.$notify.success({
+              title,
+              message: "",
+            });
+            this.showModelThis = false;
+            this.$emit("refresh");
+          } else if (res && res.code >= 100 && res.code <= 104) {
+            await this.logout();
+          } else {
+            this.$message.warning(res.msg);
+          }
+        } else {
+          return false;
+        }
+      });
+    },
+  },
+};
+</script>
+

src/views/superTube/batchVideo/index.vue

@@ -1,13 +1,437 @@
 <template>
-  <div>333</div>
-</template>
+  <div class="batchVideo pagePadding">
+    <div
+      v-if="powers && powers.length > 0 && powers.some((item) => item == '001')"
+    >
+      <ex-table
+        v-loading="loading"
+        v-if="
+          powers && powers.length > 0 && powers.some((item) => item == '001')
+        "
+        :table="table"
+        :data="tableData"
+        :columns="columns"
+        :page="pageInfo"
+        :size="size"
+        @page-curr-change="handlePageChange"
+        @page-size-change="handleSizeChange"
+        @screen-reset="
+          pageInfo.curr = 1;
+          searchList();
+        "
+        @screen-submit="
+          pageInfo.curr = 1;
+          searchList();
+        "
+      >
+        <template #table-header="{}">
+          <div style="width: 100%">
+            <el-row>
+              <el-col :span="24">
+                <el-col :span="4" style="width: 180px">
+                  <el-select
+                    :size="searchSize"
+                    v-model="parmValue.status"
+                    filterable
+                    clearable
+                    placeholder="请选择状态"
+                    style="width: 100%"
+                  >
+                    <el-option
+                      v-for="item in statusList"
+                      :key="'status' + item.id"
+                      :label="item.label"
+                      :value="item.id"
+                    />
+                  </el-select>
+                </el-col>
+                <el-col :span="4" style="width: 390px; padding: 0 0 0 10px">
+                  <el-input
+                    :size="searchSize"
+                    v-model="input"
+                    :maxlength="40"
+                    placeholder="关键字"
+                  >
+                    <el-select
+                      v-model="select"
+                      slot="prepend"
+                      style="width: 115px"
+                      placeholder="请选择"
+                    >
+                      <el-option
+                        v-for="(item, index) in selectList"
+                        :label="item.name"
+                        :value="item.code"
+                        :key="index + 'se'"
+                      ></el-option>
+                    </el-select>
+
+                    <el-button
+                      slot="append"
+                      icon="el-icon-search"
+                      @click.native="searchList"
+                    ></el-button>
+                  </el-input>
+                </el-col>
+
+                <el-col
+                  :span="4"
+                  style="width: 80px; padding: 0 0 0 10px"
+                  v-if="powers.some((item) => item == '008')"
+                >
+                  <el-button
+                    type="warning"
+                    :size="searchSize"
+                    @click="restSearch"
+                  >
+                    重置
+                  </el-button>
+                </el-col>
+                <el-col
+                  :span="3"
+                  v-if="powers.some((item) => item == '002')"
+                  style="width: 80px; padding: 0 0 0 10px; float: right"
+                >
+                  <el-button
+                    :size="searchSize"
+                    type="primary"
+                    style="float: right"
+                    @click="searchList"
+                  >
+                    刷新
+                  </el-button>
+                </el-col>
+
+                <el-col
+                  :span="3"
+                  style="width: 60px; float: right"
+                  v-if="powers.some((item) => item == '003')"
+                >
+                  <el-button
+                    type="success"
+                    :size="searchSize"
+                    style="float: right"
+                    @click="openModal('add', '003', {})"
+                  >
+                    添加
+                  </el-button>
+                </el-col>
+              </el-col>
+            </el-row>
+          </div>
+        </template>
+        <template #status="{ scope }">
+          <el-tag
+            :size="tablebtnSize"
+            :type="
+              scope.row.status == '0'
+                ? 'warning'
+                : scope.row.status == '1'
+                ? 'success'
+                : ''
+            "
+            v-text="
+              (statusList.find((item) => item.id == scope.row.status) || {})
+                .label || '--'
+            "
+          ></el-tag>
+        </template>
+        <template #time="{ scope }">
+          <span>{{ scope.row.starttime }}~{{ scope.row.expiretime }}</span>
+        </template>
+        <template #operation="{ scope }">
+           <!-- v-if="roles === 'admin'" -->
+          <el-tooltip
+           
+            class="item"
+            effect="dark"
+            content="置顶"
+            placement="top"
+          >
+            <i
+              class="el-icon-top tb-icon"
+              @click="sortTop(scope.row)"
+            ></i>
+          </el-tooltip>
+
+          <el-tooltip
+            v-if="powers.some((item) => item == '007')"
+            class="item"
+            effect="dark"
+            content="详情"
+            placement="top"
+          >
+            <i
+              class="el-icon-view tb-icon"
+              @click="openModal(scope.row.id, '007', scope.row)"
+            ></i>
+          </el-tooltip>
+          <el-tooltip
+            v-if="powers.some((item) => item == '005')"
+            class="item"
+            effect="dark"
+            content="修改"
+            placement="top"
+          >
+            <i
+              class="el-icon-edit tb-icon"
+              @click="openModal(scope.row.id, '005', scope.row)"
+            ></i>
+          </el-tooltip>
 
+          <el-tooltip
+            
+            class="item"
+            effect="dark"
+            content="启/禁用"
+            placement="top"
+          >
+            <i
+              class="el-icon-sort tb-icon"
+              @click="dabActive(scope.row)"
+            ></i>
+          </el-tooltip>
+          <el-tooltip
+            
+            class="item"
+            effect="dark"
+            content="预览视频"
+            placement="top"
+          >
+            <i
+              class="el-icon-monitor tb-icon"
+              @click="preview(scope.row)"
+            ></i>
+          </el-tooltip>
+
+          <el-tooltip
+            
+            class="item"
+            effect="dark"
+            content="复制链接"
+            placement="top"
+          >
+            <i
+              class="el-icon-mouse tb-icon"
+              @click="clone(scope.row)"
+            ></i>
+          </el-tooltip>
+        </template>
+      </ex-table>
+      <add-edit
+        :id="modelId"
+        :sitem="sitem"
+        :show-model="showModel"
+        :is-detail="isDetail"
+        @refresh="searchList"
+        @cancel="showModel = false"
+      />
+
+      <!-- <reset-password
+        :id="passwordModelId"
+        :show-model="passwordModel"
+        :is-detail="isPasswordDetail"
+        @refresh="searchList"
+        @cancel="passwordModel = false"
+      /> -->
+    </div>
+    <div v-else>
+      <no-auth></no-auth>
+    </div>
+  </div>
+</template>
 <script>
+import mixinPage from "@/mixins/elPaginationHandle";
+import asyncRequest from "@/apis/service/superTube/batchVideo";
+import ExTable from "@/components/ExTableNew.vue";
+import addEdit from "./addEdit";
+import { mapGetters } from "vuex";
+// import resetPassword from "./resetPassword";
+import resToken from "@/mixins/resToken";
 export default {
+  name: "batchVideo",
+  components: {
+    addEdit,
+    ExTable,
+    // resetPassword,
+  },
+  mixins: [mixinPage, resToken],
+  computed: {
+    ...mapGetters(["tablebtnSize", "searchSize", "size", "roles"]),
+    powers() {
+      let tran =
+        this.$store.getters.btnList.find((item) => item.menu_route == "batchVideo") ||
+        {};
+      if (tran && tran.action && tran.action.length > 0) {
+        return tran.action;
+      } else {
+        return [];
+      }
+    },
+  },
+  data() {
+    return {
+      showDetail: "",
+      sitem: null,
+      select: "1",
+      input: "",
+      selectList: [
+        { code: "1", name: "视频名称" },
+        { code: "2", name: "视频链接" },
+        { code: "3", name: "视频编号" },
+      ],
+      // 状态
+      statusList: [
+        { id: "0", label: "禁用" },
+        { id: "1", label: "启用" },
+      ],
+      loading: true,
+      showModel: false,
+      isDetail: false,
+      modelId: 0,
+      parmValue: {
+        username: "", // 账户名
+        nickname: "", // 用户名
+        status: "", //状态
+        mobile: "",//手机号
+        page: 1, // 页码
+        size: 15, // 每页显示条数
+      },
+      passwordModel: false,
+      passwordModelId: 0,
+      isPasswordDetail: false,
+      // 表格 - 数据
+      tableData: [],
+      // 表格 - 参数
+      table: {
+        stripe: true,
+        border: true,
+      },
+      // 表格 - 分页
+      pageInfo: {
+        size: 15,
+        curr: 1,
+        total: 0,
+      },
+      // 表格 - 列参数
+      columns: [
+        {
+          prop: "username",
+          label: "账号",
+          width: "120px",
+          fixed: "left",
+        },
+        {
+          prop: "status",
+          label: "账号状态",
+          _slot_: "status",
+          width: "80px",
+        },
+        {
+          prop: "nickname",
+          label: "客户姓名",
+        },
+        {
+          prop: "mobile",
+          label: "客户手机号",
+          width: "110px",
+        },
+        {
+          prop: "time",
+          label: "账户有效期",
+          _slot_: "time",
+          width: "280px",
+        },
+        {
+          prop: "activetime",
+          label: "账户激活时间",
+        //   sortable: true,
+          width: "140px",
+        },
 
-}
+        {
+          prop: "addtime",
+          label: "创建时间",
+        //   sortable: true,
+          width: "140px",
+        },
+        {
+          prop: "",
+          label: "操作",
+          fixed: "right",
+          _noset_: true,
+          width: "195px",
+          _slot_: "operation",
+        },
+      ],
+    };
+  },
+  mounted() {
+    alert("table数据非真实数据，需要更换表头，筛选及数据需要更换接口")
+    this.searchList();
+  },
+  methods: {
+    sortTop(row){
+      alert("置顶")
+    },
+    dabActive(row){
+      alert("启用禁用")
+    },
+    preview(row){
+      alert("预览视频")
+    },
+    clone(row){
+      alert("复制链接")
+    },
+    restSearch() {
+      this.select = "1";
+      this.input = "";
+      // 表格 - 分页
+      this.pageInfo = {
+        size: 15,
+        curr: 1,
+        total: 0,
+      };
+      this.parmValue = {
+        username: "", // 账户名
+        nickname: "", // 用户名
+        status: "", //状态
+        mobile: "",//手机号
+        page: 1, // 页码
+        size: 15, // 每页显示条数
+      };
+      this.searchList();
+    },
+    openModal(id, isDetail, sitem) {
+      this.showModel = true; //显示弹窗框
+      this.modelId = id;
+      this.isDetail = isDetail;
+      this.sitem = sitem;
+    },
+    openPasswordModal(id, isDetail) {
+      this.passwordModel = true;
+      this.passwordModelId = id;
+      this.isPasswordDetail = isDetail;
+    },
+    async searchList() {
+      this.loading = true;
+      this.parmValue.username = this.select === "1" ? this.input : "";
+      this.parmValue.nickname = this.select === "2" ? this.input : "";
+      this.parmValue.mobile = this.select === "3" ? this.input : "";
+      const res = await asyncRequest.list(this.parmValue);
+      if (res && res.code === 0 && res.data) {
+        this.tableData = res.data.list;
+        this.pageInfo.total = Number(res.data.count);
+      } else if (res && res.code >= 100 && res.code <= 104) {
+        await this.logout();
+      } else {
+        this.tableData = [];
+        this.pageInfo.total = 0;
+      }
+      this.loading = false;
+    },
+  },
+};
 </script>
-
-<style>
-
-</style>
+<style lang="scss" scoped>
+</style>