@bsgoal/common 0.0.10 → 0.1.1

package/src/components/bsgoal-base-search-operation/index.vue

@@ -0,0 +1,76 @@
+<!--
+ * @Author: canlong.shen
+ * @Date: 2023-04-13 18:09:43
+ * @LastEditors: canlong.shen
+ * @LastEditTime: 2023-04-15 11:04:58
+ * @FilePath: \common\src\components\bsgoal-base-search-operation\index.vue
+ * @Description:  表格查询操作项 组件
+ * 
+-->
+
+<script>
+export default {
+  name: "BsgoalBaseSearchOperation",
+};
+</script>
+<script setup>
+/* setup模板
+---------------------------------------------------------------- */
+import { Delete, Search, ArrowDown, ArrowUp } from '@element-plus/icons-vue'
+import { ref, unref } from 'vue'
+defineProps({
+  /**
+   * 是否显示折叠按钮
+   */
+  fold: {
+    type: [Boolean],
+    default: false
+  }
+})
+
+const emit = defineEmits(['on-fold'])
+
+
+
+const foldStatus = ref(false); // 折叠的状态
+
+/**
+ * @Author: canlong.shen
+ * @description: 折叠事件
+ * @default: 
+ * @return {}
+ */
+const handleFold = () => {
+  foldStatus.value = !unref(foldStatus)
+  emit('on-fold', foldStatus.value)
+}
+
+
+</script>
+<template>
+  <div class="bsgoal-base-search-operation">
+    <el-button type="primary" :icon="Search" @click="$emit('on-search')">搜索</el-button>
+    <el-button :icon="Delete" @click="$emit('on-clear')">清空</el-button>
+    <div v-if="fold"  class="operation_fold" style="color:var(--el-color-primary);"  @click="handleFold"> {{ foldStatus ? '收起' : '展开' }}<el-icon color="#409EFC">
+        <ArrowUp v-show="foldStatus" />
+        <ArrowDown v-show="!foldStatus" />
+      </el-icon> </div>
+  </div>
+</template>
+<style lang="scss" scoped>
+/* 自定义样式
+---------------------------------------------------------------- */
+.bsgoal-base-search-operation {
+  display: flex;
+  align-items: center;
+}
+.operation_fold {
+  margin-left: 12px;
+  cursor: pointer;
+  min-width: 3em;
+}
+</style>
+<style lang="scss">
+/* 覆盖样式
+---------------------------------------------------------------- */
+</style>

package/src/components/bsgoal-base-search-table/demo-table.vue

@@ -0,0 +1,52 @@
+<template>
+  <el-table :data="tableData" style="width: 100%">
+    <el-table-column type="index" :index="indexMethod" />
+    <el-table-column prop="date" label="Date" width="180" />
+    <el-table-column prop="name" label="Name" width="180" />
+    <el-table-column prop="address" label="Address" />
+  </el-table>
+</template>
+
+<script  setup>
+const indexMethod = (index) => {
+  return index * 2
+}
+const tableData = [
+  {
+    date: '2016-05-03',
+    name: 'Tom',
+    state: 'California',
+    city: 'Los Angeles',
+    address: 'No. 189, Grove St, Los Angeles',
+    zip: 'CA 90036',
+    tag: 'Home',
+  },
+  {
+    date: '2016-05-02',
+    name: 'Tom',
+    state: 'California',
+    city: 'Los Angeles',
+    address: 'No. 189, Grove St, Los Angeles',
+    zip: 'CA 90036',
+    tag: 'Office',
+  },
+  {
+    date: '2016-05-04',
+    name: 'Tom',
+    state: 'California',
+    city: 'Los Angeles',
+    address: 'No. 189, Grove St, Los Angeles',
+    zip: 'CA 90036',
+    tag: 'Home',
+  },
+  {
+    date: '2016-05-01',
+    name: 'Tom',
+    state: 'California',
+    city: 'Los Angeles',
+    address: 'No. 189, Grove St, Los Angeles',
+    zip: 'CA 90036',
+    tag: 'Office',
+  },
+]
+</script>