congmao-cli 1.0.0

package/src/template/Vue2/src/pages/list/components/CommonTable.vue

@@ -0,0 +1,313 @@
+<template>
+  <div class="list-common-table">
+    <t-form
+      ref="form"
+      :data="formData"
+      :label-width="80"
+      colon
+      @reset="onReset"
+      @submit="onSubmit"
+      :style="{ marginBottom: '8px' }"
+    >
+      <t-row>
+        <t-col :span="10">
+          <t-row :gutter="[16, 24]">
+            <t-col :flex="1">
+              <t-form-item label="合同名称" name="name">
+                <t-input
+                  v-model="formData.name"
+                  class="form-item-content"
+                  type="search"
+                  placeholder="请输入合同名称"
+                  :style="{ minWidth: '134px' }"
+                />
+              </t-form-item>
+            </t-col>
+            <t-col :flex="1">
+              <t-form-item label="合同状态" name="status">
+                <t-select
+                  v-model="formData.status"
+                  class="form-item-content`"
+                  :options="CONTRACT_STATUS_OPTIONS"
+                  placeholder="请选择合同状态"
+                />
+              </t-form-item>
+            </t-col>
+            <t-col :flex="1">
+              <t-form-item label="合同编号" name="no">
+                <t-input
+                  v-model="formData.no"
+                  class="form-item-content"
+                  placeholder="请输入合同编号"
+                  :style="{ minWidth: '134px' }"
+                />
+              </t-form-item>
+            </t-col>
+            <t-col :flex="1">
+              <t-form-item label="合同类型" name="type">
+                <t-select
+                  v-model="formData.type"
+                  class="form-item-content`"
+                  :options="CONTRACT_TYPE_OPTIONS"
+                  placeholder="请选择合同类型"
+                />
+              </t-form-item>
+            </t-col>
+          </t-row>
+        </t-col>
+
+        <t-col :span="2" class="operation-container">
+          <t-button theme="primary" type="submit" :style="{ marginLeft: '8px' }"> 查询 </t-button>
+          <t-button type="reset" variant="base" theme="default"> 重置 </t-button>
+        </t-col>
+      </t-row>
+    </t-form>
+    <div class="table-container">
+      <t-table
+        :data="data"
+        :columns="columns"
+        :rowKey="rowKey"
+        :verticalAlign="verticalAlign"
+        :hover="hover"
+        :pagination="pagination"
+        @page-change="rehandlePageChange"
+        @change="rehandleChange"
+        :loading="dataLoading"
+        :headerAffixedTop="true"
+        :headerAffixProps="{ offsetTop, container: getContainer }"
+      >
+        <template #status="{ row }">
+          <t-tag v-if="row.status === CONTRACT_STATUS.FAIL" theme="danger" variant="light">审核失败</t-tag>
+          <t-tag v-if="row.status === CONTRACT_STATUS.AUDIT_PENDING" theme="warning" variant="light">待审核</t-tag>
+          <t-tag v-if="row.status === CONTRACT_STATUS.EXEC_PENDING" theme="warning" variant="light">待履行</t-tag>
+          <t-tag v-if="row.status === CONTRACT_STATUS.EXECUTING" theme="success" variant="light">履行中</t-tag>
+          <t-tag v-if="row.status === CONTRACT_STATUS.FINISH" theme="success" variant="light">已完成</t-tag>
+        </template>
+        <template #contractType="{ row }">
+          <p v-if="row.contractType === CONTRACT_TYPES.MAIN">审核失败</p>
+          <p v-if="row.contractType === CONTRACT_TYPES.SUB">待审核</p>
+          <p v-if="row.contractType === CONTRACT_TYPES.SUPPLEMENT">待履行</p>
+        </template>
+        <template #paymentType="{ row }">
+          <p v-if="row.paymentType === CONTRACT_PAYMENT_TYPES.PAYMENT" class="payment-col">
+            付款
+            <trend class="dashboard-item-trend" type="up" />
+          </p>
+          <p v-if="row.paymentType === CONTRACT_PAYMENT_TYPES.RECIPT" class="payment-col">
+            收款
+            <trend class="dashboard-item-trend" type="down" />
+          </p>
+        </template>
+        <template #op="slotProps">
+          <a class="t-button-link" @click="rehandleClickOp(slotProps)">管理</a>
+          <a class="t-button-link" @click="handleClickDelete(slotProps)">删除</a>
+        </template>
+      </t-table>
+      <t-dialog
+        header="确认删除当前所选合同？"
+        :body="confirmBody"
+        :visible.sync="confirmVisible"
+        @confirm="onConfirmDelete"
+        :onCancel="onCancel"
+      >
+      </t-dialog>
+    </div>
+  </div>
+</template>
+<script>
+import { prefix } from '@/config/global';
+import Trend from '@/components/trend/index.vue';
+
+import {
+  CONTRACT_STATUS,
+  CONTRACT_STATUS_OPTIONS,
+  CONTRACT_TYPES,
+  CONTRACT_TYPE_OPTIONS,
+  CONTRACT_PAYMENT_TYPES,
+} from '@/constants';
+
+export default {
+  name: 'list-table',
+  components: {
+    Trend,
+  },
+  data() {
+    return {
+      CONTRACT_STATUS,
+      CONTRACT_STATUS_OPTIONS,
+      CONTRACT_TYPES,
+      CONTRACT_TYPE_OPTIONS,
+      CONTRACT_PAYMENT_TYPES,
+      prefix,
+      formData: {
+        name: '',
+        no: undefined,
+        status: undefined,
+      },
+      data: [],
+      dataLoading: false,
+      value: 'first',
+      columns: [
+        {
+          title: '合同名称',
+          fixed: 'left',
+          width: 200,
+          align: 'left',
+          ellipsis: true,
+          colKey: 'name',
+        },
+        { title: '合同状态', colKey: 'status', width: 200, cell: { col: 'status' } },
+        {
+          title: '合同编号',
+          width: 200,
+          ellipsis: true,
+          colKey: 'no',
+        },
+        {
+          title: '合同类型',
+          width: 200,
+          ellipsis: true,
+          colKey: 'contractType',
+        },
+        {
+          title: '合同收付类型',
+          width: 200,
+          ellipsis: true,
+          colKey: 'paymentType',
+        },
+        {
+          title: '合同金额 (元)',
+          width: 200,
+          ellipsis: true,
+          colKey: 'amount',
+        },
+        {
+          align: 'left',
+          fixed: 'right',
+          width: 200,
+          colKey: 'op',
+          title: '操作',
+        },
+      ],
+      rowKey: 'index',
+      tableLayout: 'auto',
+      verticalAlign: 'top',
+      bordered: true,
+      hover: true,
+      rowClassName: (rowKey) => `${rowKey}-class`,
+      // 与pagination对齐
+      pagination: {
+        defaultPageSize: 20,
+        total: 100,
+        defaultCurrent: 1,
+      },
+      confirmVisible: false,
+      deleteIdx: -1,
+    };
+  },
+  computed: {
+    confirmBody() {
+      if (this.deleteIdx > -1) {
+        const { name } = this.data?.[this.deleteIdx];
+        return `删除后，${name}的所有合同信息将被清空，且无法恢复`;
+      }
+      return '';
+    },
+    offsetTop() {
+      return this.$store.state.setting.isUseTabsRouter ? 48 : 0;
+    },
+  },
+  mounted() {
+    this.dataLoading = true;
+    this.$request
+      .get('/api/get-list')
+      .then((res) => {
+        if (res.code === 0) {
+          const { list = [] } = res.data;
+          this.data = list;
+          this.pagination = {
+            ...this.pagination,
+            total: list.length,
+          };
+        }
+      })
+      .catch((e) => {
+        console.log(e);
+      })
+      .finally(() => {
+        this.dataLoading = false;
+      });
+  },
+  methods: {
+    getContainer() {
+      return document.querySelector('.tdesign-starter-layout');
+    },
+    onReset(data) {
+      console.log(data);
+    },
+    onSubmit(data) {
+      console.log(data);
+    },
+    rehandlePageChange(curr, pageInfo) {
+      console.log('分页变化', curr, pageInfo);
+    },
+    rehandleChange(changeParams, triggerAndData) {
+      console.log('统一Change', changeParams, triggerAndData);
+    },
+    rehandleClickOp({ text, row }) {
+      console.log(text, row);
+    },
+    handleClickDelete(row) {
+      this.deleteIdx = row.rowIndex;
+      this.confirmVisible = true;
+    },
+    onConfirmDelete() {
+      // 真实业务请发起请求
+      this.data.splice(this.deleteIdx, 1);
+      this.pagination.total = this.data.length;
+      this.confirmVisible = false;
+      this.$message.success('删除成功');
+      this.resetIdx();
+    },
+    onCancel() {
+      this.resetIdx();
+    },
+    resetIdx() {
+      this.deleteIdx = -1;
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+@import '@/style/variables.less';
+
+.list-common-table {
+  background-color: var(--td-bg-color-container);
+  padding: 30px 32px;
+  border-radius: var(--td-radius-default);
+}
+
+.form-item-content {
+  width: 100%;
+}
+
+.operation-container {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+
+.payment-col {
+  display: flex;
+
+  .trend-container {
+    display: flex;
+    align-items: center;
+    margin-left: 8px;
+  }
+}
+.t-button + .t-button {
+  margin-left: var(--td-comp-margin-s);
+}
+</style>

package/src/template/Vue2/src/pages/list/filter/index.vue

@@ -0,0 +1,15 @@
+<template>
+  <t-card :bordered="false">
+    <common-table />
+  </t-card>
+</template>
+<script lang="ts">
+import CommonTable from '../components/CommonTable.vue';
+
+export default {
+  name: 'ListFilter',
+  components: {
+    CommonTable,
+  },
+};
+</script>

package/src/template/Vue2/src/pages/list/tree/index.vue

@@ -0,0 +1,174 @@
+<template>
+  <t-card :bordered="false">
+    <div class="table-tree-container">
+      <div class="list-tree-wrapper">
+        <div class="list-tree-operator">
+          <t-input v-model="filterText" @input="onInput" placeholder="请输入关键词">
+            <search-icon slot="suffix-icon" size="20px" />
+          </t-input>
+          <t-tree :data="items" hover expand-on-click-node :default-expanded="expanded" :filter="filterByText" />
+        </div>
+        <div class="list-tree-content">
+          <common-table />
+        </div>
+      </div>
+    </div>
+  </t-card>
+</template>
+<script>
+import { SearchIcon } from 'tdesign-icons-vue';
+import CommonTable from '../components/CommonTable.vue';
+
+export default {
+  name: 'ListTree',
+  components: {
+    SearchIcon,
+    CommonTable,
+  },
+  data() {
+    return {
+      data: [],
+      filterText: '',
+      filterByText: null,
+      options: [
+        {
+          label: '一级操作',
+          value: '1',
+        },
+        {
+          label: '二级操作',
+          value: '2',
+        },
+      ],
+      value: 'first',
+      expanded: ['0', '0-0', '0-1', '0-2', '0-3', '0-4'],
+      items: [
+        {
+          label: '深圳总部',
+          value: 0,
+          children: [
+            {
+              label: '总办',
+              value: '0-0',
+            },
+            {
+              label: '市场部',
+              value: '0-1',
+              children: [
+                {
+                  label: '采购1组',
+                  value: '0-1-0',
+                },
+                {
+                  label: '采购2组',
+                  value: '0-1-1',
+                },
+              ],
+            },
+            {
+              label: '技术部',
+              value: '0-2',
+            },
+          ],
+        },
+        {
+          label: '北京总部',
+          value: 1,
+          children: [
+            {
+              label: '总办',
+              value: '1-0',
+            },
+            {
+              label: '市场部',
+              value: '1-1',
+              children: [
+                {
+                  label: '采购1组',
+                  value: '1-1-0',
+                },
+                {
+                  label: '采购2组',
+                  value: '1-1-1',
+                },
+              ],
+            },
+          ],
+        },
+        {
+          label: '上海总部',
+          value: 2,
+          children: [
+            {
+              label: '市场部',
+              value: '2-0',
+            },
+            {
+              label: '财务部',
+              value: '2-1',
+              children: [
+                {
+                  label: '财务1组',
+                  value: '2-1-0',
+                },
+                {
+                  label: '财务2组',
+                  value: '2-1-1',
+                },
+              ],
+            },
+          ],
+        },
+        {
+          label: '湖南',
+          value: 3,
+        },
+        {
+          label: '湖北',
+          value: 4,
+        },
+      ],
+    };
+  },
+
+  methods: {
+    onInput() {
+      this.filterByText = (node) => {
+        const rs = node.label.indexOf(this.filterText) >= 0;
+        return rs;
+      };
+    },
+    rehandleClickOp({ text, row }) {
+      console.log(text, row);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+@import '@/style/variables.less';
+
+.table-tree-container {
+  background-color: var(--td-bg-color-container);
+  border-radius: var(--td-radius-default);
+
+  .t-tree {
+    margin-top: 24px;
+  }
+}
+
+.list-tree-wrapper {
+  overflow-y: hidden;
+}
+
+.list-tree-operator {
+  width: 200px;
+  float: left;
+  padding: 30px 32px;
+}
+
+.list-tree-content {
+  border-left: 1px solid var(--td-component-border);
+  overflow: auto;
+}
+</style>

package/src/template/Vue2/src/pages/login/components/components-header.vue

@@ -0,0 +1,74 @@
+<template>
+  <header class="login-header">
+    <logo-full-icon class="logo" />
+    <div class="operations-container">
+      <t-button theme="default" shape="square" variant="text" @click="navToGitHub">
+        <logo-github-icon class="icon" />
+      </t-button>
+      <t-button theme="default" shape="square" variant="text" @click="navToHelper">
+        <help-circle-icon class="icon" />
+      </t-button>
+      <t-button theme="default" shape="square" variant="text" @click="toggleSettingPanel">
+        <setting-icon class="icon" />
+      </t-button>
+    </div>
+  </header>
+</template>
+
+<script>
+import LogoFullIcon from '@/assets/assets-logo-full.svg';
+import { LogoGithubIcon, HelpCircleIcon, SettingIcon } from 'tdesign-icons-vue';
+
+export default {
+  components: { LogoFullIcon, LogoGithubIcon, HelpCircleIcon, SettingIcon },
+  methods: {
+    navToGitHub() {
+      window.open('https://github.com/Tencent/tdesign-vue-starter');
+    },
+    navToHelper() {
+      window.open('https://tdesign.tencent.com/starter/docs/get-started');
+    },
+    toggleSettingPanel() {
+      this.$store.commit('setting/toggleSettingPanel', true);
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+@import '@/style/variables.less';
+
+.login-header {
+  height: var(--td-comp-size-xxxl);
+  padding: 0 24px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  backdrop-filter: blur(5px);
+  color: var(--td-text-color-primary);
+
+  .logo {
+    width: 188px;
+    height: var(--td-comp-size-xxxl);
+  }
+
+  .operations-container {
+    display: flex;
+    align-items: center;
+
+    .t-button {
+      margin-left: 16px;
+    }
+
+    .icon {
+      height: 20px;
+      width: 20px;
+      padding: 6px;
+      box-sizing: content-box;
+
+      &:hover {
+        cursor: pointer;
+      }
+    }
+  }
+}
+</style>