<template>
  <div class="app-container">
    <store-staff-table ref="table" @selection-change="handleSelectionChange" :query="query">
      <template #table-operator>
        <el-col :span="1.5">
          <el-button
            type="primary"
            plain
            icon="el-icon-plus"
            size="mini"
            @click="handleAdd"
            v-hasPermi="['ss:storeStaff:add']"
          >新增</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="danger"
            plain
            icon="el-icon-delete"
            size="mini"
            :disabled="multiple"
            @click="handleDelete"
            v-hasPermi="['ss:storeStaff:remove']"
          >删除</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="warning"
            plain
            icon="el-icon-download"
            size="mini"
            @click="handleExport"
            v-hasPermi="['ss:storeStaff:export']"
          >导出</el-button>
        </el-col>
      </template>
      <template v-slot:row-operator="scope">
        <el-button
          size="mini"
          type="text"
          icon="el-icon-edit"
          @click="handleUpdate(scope.row)"
          v-hasPermi="['ss:storeStaff:edit']"
        >修改</el-button>
        <el-button
          size="mini"
          type="text"
          icon="el-icon-delete"
          @click="handleDelete(scope.row)"
          v-hasPermi="['ss:storeStaff:remove']"
        >删除</el-button>
      </template>
    </store-staff-table>

    <!-- 添加或修改店铺员工对话框 -->
    <store-staff-edit-dialog
      :show.sync="open"
      :view="view"
      :employ-id="row.employId"
      @success="getList"
      :init-form="{storeId: query.storeId}"
    />

  </div>
</template>

<script>
import { listStoreStaff, getStoreStaff, delStoreStaff, addStoreStaff, updateStoreStaff } from "@/api/ss/storeStaff";
import { $showColumns, $view } from '@/utils/mixins'
import BooleanTag from '@/components/BooleanTag/index.vue'
import StoreInput from '@/components/Business/Store/StoreInput.vue'
import UserInput from '@/components/Business/SmUser/UserInput.vue'
import { StoreStaffRole } from '@/utils/constants'
import UserLink from '@/components/Business/SmUser/UserLink.vue'
import StoreLink from '@/components/Business/Store/StoreLink.vue'
import StoreStaffTable from '@/views/ss/storeStaff/components/StoreStaffTable.vue'
import StoreStaffEditDialog from '@/views/ss/storeStaff/components/StoreStaffEditDialog.vue'

export default {
  name: "StoreStaff",
  components: { StoreStaffEditDialog, StoreStaffTable, StoreLink, UserLink, UserInput, StoreInput, BooleanTag },
  mixins: [$showColumns, $view],
  dicts: ['store_staff_permissions', 'store_staff_role'],
  props: {
    query: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      row: {},
      open: false,
    };
  },
  methods: {
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.employId)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.row = {};
      this.open = true;
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.row = row;
      this.open = true;
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const employIds = row.employId || this.ids;
      this.$modal.confirm('是否确认删除店铺员工编号为"' + employIds + '"的数据项？').then(function() {
        return delStoreStaff(employIds);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    getList() {
      this.$refs.table.getList();
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('ss/storeStaff/export', {
        ...this.queryParams
      }, `storeStaff_${new Date().getTime()}.xlsx`)
    }
  }
};
</script>
