123

src/scrm_pages/systemsetting/staffmanagement.vue

@@ -1,339 +1,381 @@
 <template>
   <div class="main-contain">
     <div class="position">
-      <bread-crumb :crumbs='crumbs'></bread-crumb>
-       <el-button  style="float:right;" type="primary" size="small" icon="el-icon-circle-plus-outline" @click="openCreate()" >添加员工</el-button>
+      <bread-crumb :crumbs="crumbs"></bread-crumb>
+      <el-button
+        style="float:right;"
+        type="primary"
+        size="small"
+        icon="el-icon-circle-plus-outline"
+        @click="openCreate()"
+      >添加员工</el-button>
     </div>
     <div class="app-container">
-         <div>
-             <el-row :gutter="24">
-                <el-col :span="8">
-                  <el-input style="width: 300px" v-model="keyword"  placeholder="请输入您需要搜索的内容"></el-input>
-                  <el-button type="primary"  icon="el-icon-search" @click="changeKey()">搜索</el-button>
-                </el-col>
-             </el-row>
-         </div>
-         <div class="filter-container" style="margin-top: 10px;margin-left: 5px">
-            <el-checkbox style="width: 30px"  @change="changeCheck" v-model="checkAllStatus">全选</el-checkbox>
-            <el-button size="small" icon="el-icon-delete" @click="openDeleteStaffs">批量删除</el-button>
-          </div>
-              <el-table ref="multipleTable"
-              :header-cell-style="{ backgroundColor:
+      <div>
+        <el-row :gutter="24">
+          <el-col :span="8">
+            <el-input style="width: 300px" v-model="keyword" placeholder="请输入您需要搜索的内容"></el-input>
+            <el-button type="primary" icon="el-icon-search" @click="changeKey()">搜索</el-button>
+          </el-col>
+        </el-row>
+      </div>
+      <div class="filter-container" style="margin-top: 10px;margin-left: 5px">
+        <el-checkbox style="width: 30px" @change="changeCheck" v-model="checkAllStatus">全选</el-checkbox>
+        <el-button size="small" icon="el-icon-delete" @click="openDeleteStaffs">批量删除</el-button>
+      </div>
+      <el-table
+        :row-style="{height:'40px'}"
+        class="elTable"
+        ref="multipleTable"
+        :header-cell-style="{ backgroundColor:
               'rgb(245, 247, 250)'}"
-              :data="staffsData" border fit highlight-current-row  style="width: 100%;margin-top: 10px;"
-               @selection-change="handleSelectionChange"
-              >
-              <el-table-column
-                type="selection"
-                width="55">
-              </el-table-column>
-              <el-table-column label="员工" align="center">
-               <template slot-scope="scope">
-                  <div style="display:flex;align-items: center;">
-                   <img :src="scope.row.dochead" alt="" srcset="" style="width:50px;height:50px; border-radius:50%;margin-right:5px;" >
-                    <div>
-                     <span>{{scope.row.name}}</span>
-                    </div>
-                 </div>
-                  <!-- {{scope.row.name}} -->
-               </template>
-             </el-table-column>
-            <el-table-column label="职称" align="center" >
-              <template slot-scope="scope">
-                   {{staffTitle(scope.row.user_title)}}
-              </template>
-            </el-table-column>
-            <el-table-column label="介绍" align="center">
-              <template slot-scope="scope">
-                 <li v-html="scope.row.content"></li>
-              </template>
-            </el-table-column>
-            <el-table-column label="手机号" align="center">
-              <template slot-scope="scope">
-                 {{scope.row.phone}}
-              </template>
-            </el-table-column>
-            <el-table-column label="创建时间" align="center">
-              <template slot-scope="scope">
-                {{staffCreateTime(scope.row.ctime)}}
-              </template>
-            </el-table-column>
-            <el-table-column label="操作" align="center">
-              <template slot-scope="scope">
-                <el-tooltip class="item" effect="dark" content="编辑" placement="top" >
-                  <el-button
-                    size="mini"
-                    type="primary"
-                    icon="el-icon-edit-outline"
-                    @click="openEdit(scope.row,scope.$index)">
-                  </el-button>
-                </el-tooltip>
-                  <el-tooltip class="item" effect="dark" content="删除" placement="top">
-                  <el-button 
-                  size="mini"
-                   type="danger" 
-                   icon="el-icon-delete"
-                    @click="openDelete(scope.row,scope.$index)">
-                   </el-button>
-                </el-tooltip>
-              </template>
-            </el-table-column>
-          </el-table>
-          <el-pagination
-            @size-change="handleSizeChange"
-            @current-change="handleCurrentChange"
-            :page-sizes="[10,20,50,100]"
-            :page-size="10"
-            background
-            style="margin-top:20px;float: right"
-            layout="total, sizes, prev, pager, next, jumper"
-            :total="total">
-          </el-pagination>
-            <!-- 添加员工 -->
-          <create-staff-form ref="createStaffForm" :staffsData="staffsData"></create-staff-form>
-          <!--编辑员工-->
-          <edit-staff-form ref="editStaffForm" :staffsData="staffsData" :form="staffData" :staffIndex = "staffIndex"></edit-staff-form>
+        :data="staffsData"
+        border
+        fit
+        highlight-current-row
+        style="width: 100%;margin-top: 10px;"
+        @selection-change="handleSelectionChange"
+      >
+        <el-table-column type="selection" width="55"></el-table-column>
+        <el-table-column label="员工" align="center">
+          <template slot-scope="scope">
+            <div style="display:flex;align-items: center;">
+              <img
+                :src="scope.row.dochead"
+                alt
+                srcset
+                style="width:50px;height:50px; border-radius:50%;margin-right:5px;"
+              />
+              <div>
+                <span>{{scope.row.name}}</span>
+              </div>
+            </div>
+            <!-- {{scope.row.name}} -->
+          </template>
+        </el-table-column>
+        <el-table-column label="职称" align="center">
+          <template slot-scope="scope">{{staffTitle(scope.row.user_title)}}</template>
+        </el-table-column>
+        <el-table-column label="介绍" align="center" row-style="{}">
+          <template slot-scope="scope">
+            <li v-html="scope.row.content"></li>
+          </template>
+        </el-table-column>
+        <el-table-column label="手机号" align="center">
+          <template slot-scope="scope">{{scope.row.phone}}</template>
+        </el-table-column>
+        <el-table-column label="创建时间" align="center">
+          <template slot-scope="scope">{{staffCreateTime(scope.row.ctime)}}</template>
+        </el-table-column>
+        <el-table-column label="操作" align="center">
+          <template slot-scope="scope">
+            <el-tooltip class="item" effect="dark" content="编辑" placement="top">
+              <el-button
+                size="mini"
+                type="primary"
+                icon="el-icon-edit-outline"
+                @click="openEdit(scope.row,scope.$index)"
+              ></el-button>
+            </el-tooltip>
+            <el-tooltip class="item" effect="dark" content="删除" placement="top">
+              <el-button
+                size="mini"
+                type="danger"
+                icon="el-icon-delete"
+                @click="openDelete(scope.row,scope.$index)"
+              ></el-button>
+            </el-tooltip>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-pagination
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :page-sizes="[10,20,50,100]"
+        :page-size="10"
+        background
+        style="margin-top:20px;float: right"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="total"
+      ></el-pagination>
+      <!-- 添加员工 -->
+      <create-staff-form ref="createStaffForm" :staffsData="staffsData"></create-staff-form>
+      <!--编辑员工-->
+      <edit-staff-form
+        ref="editStaffForm"
+        :staffsData="staffsData"
+        :form="staffData"
+        :staffIndex="staffIndex"
+      ></edit-staff-form>
     </div>
   </div>
 </template>
 
 <script>
-  import BreadCrumb from '../components/bread-crumb'
-  import {getAllStaffInfo,DeleteStaffs} from '@/api/act/staffmanager'
-  import {getToken} from '@/api/qiniu'
-  import {getFileExtension,uParseTime} from '@/utils/tools'
-  import CreateStaffForm from "./components/CreateStaffForm";
-  import EditStaffForm from "./components/EditStaffForm";
-  export default {
-    name: 'articleComment',
-    components:{
-      EditStaffForm,
-      BreadCrumb,
-      CreateStaffForm,
-      EditStaffForm,
+import BreadCrumb from "../components/bread-crumb";
+import { getAllStaffInfo, DeleteStaffs } from "@/api/act/staffmanager";
+import { getToken } from "@/api/qiniu";
+import { getFileExtension, uParseTime } from "@/utils/tools";
+import CreateStaffForm from "./components/CreateStaffForm";
+import EditStaffForm from "./components/EditStaffForm";
+export default {
+  name: "articleComment",
+  components: {
+    EditStaffForm,
+    BreadCrumb,
+    CreateStaffForm,
+    EditStaffForm
+  },
+  data() {
+    return {
+      crumbs: [
+        { path: false, name: "系统设置" },
+        { path: "/Systemsetting/staffmanagement", name: "员工管理" }
+      ],
+      centerDialogVisible: false,
+      radio: "1",
+      value: "",
+      qiniuDomain: "https://images.shengws.com/",
+      uploadData: { token: "", key: "" },
+      user_types: [
+        { index: 2, name: "医生" },
+        { index: 3, name: "护士" },
+        { index: 4, name: "运营" }
+      ],
+      user_titles: [
+        { index: 1, name: "医士" },
+        { index: 2, name: "医师" },
+        { index: 3, name: "住院医师" },
+        { index: 4, name: "主治医师" },
+        { index: 5, name: "副主任医师" },
+        { index: 6, name: "主任医师" },
+        { index: 7, name: "护士" },
+        { index: 8, name: "护师" },
+        { index: 9, name: "主管护师" },
+        { index: 10, name: "副主任护师" },
+        { index: 11, name: "主任护师" },
+        { index: 12, name: "运营专员" },
+        { index: 13, name: "运营主管" }
+      ],
+      imageUrl: "",
+      staffsData: [],
+      form: {
+        name: "",
+        phone: "",
+        birthday: "",
+        gender: "",
+        user_type: "",
+        user_title: "",
+        dochead: "",
+        page: 1,
+        limit: 10,
+        content: ""
+      },
+      staffData: {
+        id: 0,
+        name: "",
+        phone: "",
+        birthday: "",
+        gender: "",
+        user_type: "",
+        user_title: "",
+        dochead: "",
+        page: 1,
+        limit: 10,
+        content: ""
+      },
+      total: 0,
+      keyword: "",
+      staffform: [],
+      staffIndex: -1,
+      checkAllStatus: false
+    };
+  },
+  methods: {
+    openCreate() {
+      this.$refs.createStaffForm.open();
+    },
+    staffAvatar(row) {
+      if (
+        typeof row.avatar == "undefined" ||
+        !row.avatar ||
+        row.avatar.length == 0
+      ) {
+        if (row.gender == 2) {
+          return "https://images.shengws.com/201809182128222.png";
+        } else {
+          return "https://images.shengws.com/201809182128111.png";
+        }
+      } else {
+        return row.avatar;
+      }
+    },
+    handleSelectionChange(val) {
+      this.selectedArticles = val;
+    },
+    handleSizeChange(limit) {
+      this.form.limit = limit;
+      this.getAllStaffInfo();
+    },
+    handleCurrentChange(page) {
+      this.form.page = page;
+      this.getAllStaffInfo();
+    },
+    getAllStaffInfo() {
+      getAllStaffInfo(this.form, this.keyword).then(response => {
+        if (response.data.state == 1) {
+          this.staffsData = response.data.data.userStaffInfo;
+
+          console.log("员工管理数据", this.staffsData);
+          this.total = response.data.data.total;
+          console.log("总页数", this.total);
+        }
+      });
+    },
+    staffCreateTime(time) {
+      return uParseTime(time, "{y}-{m}-{d} {h}:{i}:{s}");
+    },
+    staffTitle(title) {
+      if (title == 1) {
+        return "医士";
+      } else if (title == 2) {
+        return "医师";
+      } else if (title == 3) {
+        return "住院医师";
+      } else if (title == 4) {
+        return "主治医师";
+      } else if (title == 5) {
+        return "副主任医师";
+      } else if (title == 6) {
+        return "主任医师";
+      } else if (title == 7) {
+        return "护士";
+      } else if (title == 8) {
+        return "护师";
+      } else if (title == 9) {
+        return "主管护师";
+      } else if (title == 10) {
+        return "副主任护师";
+      } else if (title == 11) {
+        return "主任护师";
+      } else if (title == 12) {
+        return "运营专员";
+      } else if (title == 13) {
+        return "运营主管";
+      }
+    },
+    changeKey() {
+      this.getAllStaffInfo();
     },
-    data(){
-      return{
-        crumbs: [
-          { path: false, name: '系统设置' },
-          { path: '/Systemsetting/staffmanagement', name: '员工管理' }
-        ],
-         centerDialogVisible: false,
-          radio: '1',
-          value: '',
-          qiniuDomain: 'https://images.shengws.com/',
-          uploadData: { token: '', key: '' },
-         user_types: [
-            { index: 2, name: '医生' },
-            { index: 3, name: '护士' },
-            { index: 4, name: '运营' },
-            ],
-        user_titles: [
-            { index: 1, name: '医士' },
-            { index: 2, name: '医师' },
-            { index: 3, name: '住院医师' },
-            { index: 4, name: '主治医师' },
-            { index: 5, name: '副主任医师' },
-            { index: 6, name: '主任医师' },
-            { index: 7, name: '护士' },
-            { index: 8, name: '护师' },
-            { index: 9, name: '主管护师' },
-            { index: 10, name: '副主任护师' },
-            { index: 11, name: '主任护师' },
-            { index: 12, name: '运营专员' },
-            { index: 13, name: '运营主管' },
-            ],
-        imageUrl: '',
-        staffsData:[],
-        form:{
-          name:'',
-          phone:'',
-          birthday:'',
-          gender:'',
-          user_type:'',
-          user_title:'',
-          dochead:'',
-          page:1,
-          limit:10,
-          content:'',
-        },
-        staffData:{
-          id:0,
-          name:'',
-          phone:'',
-          birthday:'',
-          gender:'',
-          user_type:'',
-          user_title:'',
-          dochead:'',
-          page:1,
-          limit:10,
-          content:'',
-        },
-         total:0,
-         keyword:'',
-        staffform:[],
-        staffIndex:-1,
-        checkAllStatus:false,
+    openEdit(row, index) {
+      for (const key in this.staffData) {
+        if (key === "birthday" && row.birthday != 0) {
+          this.staffData.birthday = uParseTime(row.birthday, "{y}-{m}-{d}");
+        } else if (key in row) {
+          this.staffData[key] = row[key];
+        }
+        console.log("数据是多少", this.staffsData);
+        this.staffIndex = index;
+        this.$refs.editStaffForm.open();
       }
     },
-    methods: {
-      openCreate(){
-           this.$refs.createStaffForm.open();
-        },
-        staffAvatar(row) {
-          if(typeof(row.avatar) == "undefined" || !row.avatar || row.avatar.length==0) {
-              if(row.gender == 2) {
-             return 'https://images.shengws.com/201809182128222.png';
-              }else {
-                return 'https://images.shengws.com/201809182128111.png';
+    openDelete(row, index) {
+      this.$confirm(
+        "确认要删除该会员吗？<br>删除后，该会员信息将无法恢复",
+        "删除提示",
+        {
+          dangerouslyUseHTMLString: true,
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning"
+        }
+      )
+        .then(() => {
+          var ids = [];
+          ids.push(row.id);
+          DeleteStaffs({ ids: ids })
+            .then(response => {
+              if (response.data.state == 1) {
+                this.staffsData.splice(index, 1);
+                this.$message.success("删除会员成功");
+              } else {
+                this.$message.error(res.msg);
               }
-           }else {
-             return row.avatar
+            })
+            .catch(e => {});
+        })
+        .catch(() => {
+          return false;
+        });
+    },
+    changeCheck() {
+      this.$refs.multipleTable.clearSelection();
+      if (this.checkAllStatus) {
+        this.$refs.multipleTable.toggleAllSelection();
+      }
+    },
+    handleSelectionChange(val) {
+      this.selectedStaffs = val;
+    },
+    openDeleteStaffs() {
+      if (this.selectedStaffs.length == 0) {
+        this.$message.error("请选择要删除的会员");
+        return false;
+      }
+      this.$confirm(
+        "确认要删除所选的人员吗? <br>删除后,人员信息将无法恢复",
+        "删除提示",
+        {
+          dangerouslyUseHTMLString: true,
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning"
+        }
+      )
+        .then(() => {
+          var ids = [];
+          var idMap = {};
+          for (const index in this.selectedStaffs) {
+            ids.push(this.selectedStaffs[index].id);
+            idMap[this.selectedStaffs[index].id] = this.selectedStaffs[
+              index
+            ].id;
           }
-        },
-        handleSelectionChange(val){
-           this.selectedArticles = val;
-        },
-        handleSizeChange(limit) {
-            this.form.limit = limit;
-            this.getAllStaffInfo();
-          },
-        handleCurrentChange(page) {
-         this.form.page = page;
-          this.getAllStaffInfo();
-        },
-        getAllStaffInfo(){
-          getAllStaffInfo(this.form,this.keyword).then(response=>{
-            if(response.data.state ==1){
-              this.staffsData = response.data.data.userStaffInfo;
-              
-              console.log("员工管理数据",this.staffsData)
-              this.total = response.data.data.total;
-              console.log("总页数",this.total)
-           }
-         })
-      },
-        staffCreateTime(time) {
-          return uParseTime(time, "{y}-{m}-{d} {h}:{i}:{s}");
-        },
-        staffTitle(title){
-            if(title == 1){
-              return "医士";
-            }else if(title == 2){
-                return "医师";
-            }else if(title == 3){
-                return "住院医师";
-            }else if(title == 4){
-                return "主治医师";
-            }else if(title == 5){
-                return "副主任医师";
-            }else if(title == 6){
-                return "主任医师";
-            }else if (title == 7){
-                return "护士";
-            }else if (title == 8){
-                return "护师";
-            }else if (title == 9){
-                return "主管护师";
-            }else if (title ==10){
-                return "副主任护师";
-            }else if (title == 11){
-                return "主任护师";
-            }else if (title == 12) {
-                return "运营专员";
-            }else if (title == 13) {
-                 return "运营主管";
-            }
 
-        },
-        changeKey(){
-          this.getAllStaffInfo();
-         },
-        openEdit(row,index){
-           for(const key in this.staffData){
-             if(key === "birthday" && row.birthday!=0){    
-                this.staffData.birthday = uParseTime(row.birthday, "{y}-{m}-{d}");
-             }else if(key in row){
-                this.staffData[key] = row [key];
-                }
-                console.log("数据是多少",this.staffsData)
-                this.staffIndex = index;
-                this.$refs.editStaffForm.open();
-           }
-        },
-        openDelete(row,index){
-           this.$confirm('确认要删除该会员吗？<br>删除后，该会员信息将无法恢复','删除提示',{
-            dangerouslyUseHTMLString:true,
-            confirmButtonText: '确定',
-            cancelButtonText: '取消',
-            type: 'warning'
-           }).then(()=>{
-               var ids = [];
-              ids.push(row.id);
-              DeleteStaffs({ids:ids}).then(response=>{
-                    if(response.data.state == 1){
-                        this.staffsData.splice(index, 1);
-                        this.$message.success("删除会员成功");
-                    }else{
-                      this.$message.error(res.msg);
-                    }
-              }).catch(e=>{});
-           }).catch(() => {
-            return false        
-          }); 
-        },
-         changeCheck(){
-          this.$refs.multipleTable.clearSelection();
-          if (this.checkAllStatus) {
-            this.$refs.multipleTable.toggleAllSelection();
-          }
-        },
-          handleSelectionChange(val){
-          this.selectedStaffs = val;
-        },
-        openDeleteStaffs(){
-          if (this.selectedStaffs.length==0) {
-            this.$message.error("请选择要删除的会员");
-            return false;
-          }
-          this.$confirm('确认要删除所选的人员吗? <br>删除后,人员信息将无法恢复','删除提示',{
-             dangerouslyUseHTMLString:true,
-             confirmButtonText: '确定',
-             cancelButtonText: '取消',
-             type: 'warning'  
-          }).then(()=>{
-             var ids = [];
-             var idMap = {};
-            for (const index in this.selectedStaffs) {
-              ids.push(this.selectedStaffs[index].id);
-              idMap[this.selectedStaffs[index].id] = this.selectedStaffs[index].id;
-            }
-             
-             DeleteStaffs({ids:ids}).then(response=>{
-                if(response.data.state==1){
-                     var membersDataLength = this.staffsData.length;
-                for (let index = membersDataLength-1; index >= 0; index--) {
-                  if(this.staffsData[index].id in idMap) {
+          DeleteStaffs({ ids: ids })
+            .then(response => {
+              if (response.data.state == 1) {
+                var membersDataLength = this.staffsData.length;
+                for (let index = membersDataLength - 1; index >= 0; index--) {
+                  if (this.staffsData[index].id in idMap) {
                     this.staffsData.splice(index, 1);
-                  }                  
+                  }
                 }
-                  this.$message.success("删除会员成功");
-                }else{
-                   this.$message.error(res.msg);
-                }
-             }).catch(e=>{});
-          }).catch(() => {
-            return false        
-          });
-        }
-    },
-    created(){
-      this.getAllStaffInfo();
-     }
+                this.$message.success("删除会员成功");
+              } else {
+                this.$message.error(res.msg);
+              }
+            })
+            .catch(e => {});
+        })
+        .catch(() => {
+          return false;
+        });
+    }
+  },
+  created() {
+    this.getAllStaffInfo();
   }
+};
 </script>
 
-<style scoped>
-
+<style>
+.cell {
+  max-height: 90px !important;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+}
 </style>