新增设备出入库信息弹框、新增角色弹框

.eslintrc.js

@@ -65,5 +65,6 @@ module.exports = {
     'consistent-return': 0,
     'no-plusplus': 0,
     'no-unused-expressions': 0,
+    'vue/no-unused-vars': 0,
   },
 };

src/views/sop/components/TABLE.vue

@@ -7,7 +7,6 @@
       :columns="columns"
       :data="tableData"
       :editable-row-keys="editableRowKeys"
-      table-layout="auto"
       bordered
       @row-edit="onRowEdit"
       @row-validate="onRowValidate"

src/views/sop/sop-manage/device-out-in/add-device-dialog.vue

@@ -0,0 +1,189 @@
+<template>
+  <my-dialog
+    :visible="visible"
+    @close="emit('update:visible', false)"
+    header="新增设备出入库信息"
+    :width="1100"
+    :closeOnOverlayClick="false"
+  >
+    <t-form ref="formRef" :model="formData" :labelWidth="120">
+      <t-row :gutter="[0, 20]">
+        <t-col :span="6">
+          <t-form-item label="设备出入库选择">
+            <t-radio-group v-model="formData.a" style="width: 100%">
+              <t-radio value="1">出库</t-radio>
+              <t-radio value="2">入库</t-radio>
+            </t-radio-group>
+          </t-form-item>
+        </t-col>
+        <t-col :span="6">
+          <t-form-item label="设备出入库时间">
+            <t-date-picker v-model="formData.b" style="width: 100%" />
+          </t-form-item>
+        </t-col>
+        <t-col :span="12">
+          <t-form-item label="设备出入库登记">
+            <div class="w-full">
+              <t-table
+                class="dynamic-table"
+                ref="tableRef"
+                row-key="key"
+                :columns="columns"
+                :data="tableData"
+                bordered
+                size="small"
+              >
+                <template #key="{ row }">
+                  <div class="flex items-center key-cell">
+                    <Icon
+                      name="delete"
+                      class="delete-icon"
+                      @click="deleteRow(row)"
+                    ></Icon>
+                    <span class="key-index">{{ row.key }}</span>
+                  </div>
+                </template>
+                <template #a="{ row }">
+                  <t-select v-model="row.a">
+                    <t-option value="1">111</t-option>
+                    <t-option value="2">222</t-option>
+                  </t-select>
+                </template>
+                <template #d="{ row }">
+                  <span v-if="formData.a == '1'">{{ row.d }}</span>
+                  <t-input v-model="row.d" v-else></t-input>
+                </template>
+                <template #e="{ row }">
+                  <span v-if="formData.a == '1'">{{ row.e }}</span>
+                  <t-input v-model="row.e" v-else></t-input>
+                </template>
+                <template #f="{ row }">
+                  <t-input v-model="row.f" v-if="formData.a == '1'"></t-input>
+                  <span v-else>{{ row.f }}</span>
+                </template>
+              </t-table>
+              <t-button theme="primary" class="m-t-15px" @click="createOneRow">
+                <template #icon><Icon name="add"></Icon></template>
+                添加
+              </t-button>
+            </div>
+          </t-form-item>
+        </t-col>
+      </t-row>
+    </t-form>
+    <template #foot>
+      <t-button theme="default" @click="emit('update:visible', false)"
+        >取消</t-button
+      >
+      <t-button theme="primary" @click="save">保存</t-button>
+    </template>
+  </my-dialog>
+</template>
+<script setup name="AddDeviceDialog">
+import { ref, watch } from 'vue';
+import { cloneDeep } from 'lodash';
+import { Icon } from 'tdesign-icons-vue-next';
+const emit = defineEmits(['update:visible', 'success']);
+const formRef = ref(null);
+
+const props = defineProps({
+  visible: Boolean,
+});
+let data = {
+  a: '1',
+  b: 2,
+  c: [],
+};
+const formData = ref(cloneDeep(data));
+watch(
+  () => props.visible,
+  () => {
+    formData.value = cloneDeep(data);
+  }
+);
+
+const columns = [
+  {
+    title: '',
+    coleKey: 'key',
+    cell: 'key',
+    align: 'left',
+    width: 80,
+  },
+  {
+    title: '设备编号',
+    colKey: 'a',
+    width: 150,
+  },
+  {
+    title: '供应商',
+    colKey: 'b',
+  },
+  {
+    title: '运行状态',
+    colKey: 'c',
+    width: 80,
+  },
+  {
+    title: '总扫描量',
+    colKey: 'd',
+    width: 80,
+  },
+  {
+    title: '当前所在地',
+    colKey: 'e',
+  },
+  {
+    title: '发往地',
+    colKey: 'f',
+  },
+  {
+    title: '快递单拍照',
+    colKey: 'g',
+    width: 100,
+  },
+];
+const tableData = ref([]);
+const resetKeys = () => {
+  tableData.value.forEach((item, index) => {
+    item.key = index + 1 + '';
+  });
+};
+
+const createOneRow = () => {
+  tableData.value.push({ a: '', b: '', c: '', d: '', e: '', f: '', g: '' });
+  resetKeys();
+};
+
+createOneRow();
+const deleteRow = (row) => {
+  let index = tableData.value.findIndex((item) => item.key == row.key);
+  tableData.value.splice(index, 1);
+  resetKeys();
+};
+
+const save = () => {
+  //ajax...
+  emit('success');
+};
+</script>
+<style lang="less" scoped>
+.dynamic-table {
+  width: 100%;
+  margin-bottom: 15px;
+  .key-cell {
+    .key-index {
+      font-size: 14px;
+    }
+    .delete-icon {
+      font-size: 18px;
+      color: #777;
+      margin-right: 10px;
+      cursor: pointer;
+      &:hover {
+        color: var(--td-brand-color);
+      }
+    }
+  }
+}
+</style>

src/views/sop/sop-manage/device-out-in/index.vue

@@ -4,7 +4,9 @@
 
     <div class="flex-1 page-wrap">
       <div class="btn-group">
-        <t-button theme="success">新增</t-button>
+        <t-button theme="success" @click="showAddDeviceDialog = true"
+          >新增</t-button
+        >
         <t-button theme="success" :disabled="!selectedRowKeys.length"
           >作废</t-button
         >
@@ -27,6 +29,7 @@
       >
       </t-table>
     </div>
+    <AddDeviceDialog v-model:visible="showAddDeviceDialog"></AddDeviceDialog>
   </div>
 </template>
 
@@ -34,10 +37,12 @@
 import { ref, reactive } from 'vue';
 import { getTableData } from '@/api/test';
 import useFetchTable from '@/hooks/useFetchTable';
+import AddDeviceDialog from './add-device-dialog.vue';
 const selectedRowKeys = ref([]);
 const selectChange = (value, { selectedRowData }) => {
   selectedRowKeys.value = value;
 };
+const showAddDeviceDialog = ref(false);
 const columns = [
   {
     colKey: 'row-select',

src/views/user/auth-manage/role-manage/add-role-dialog.vue

@@ -0,0 +1,68 @@
+<template>
+  <my-dialog
+    :visible="visible"
+    @close="emit('update:visible', false)"
+    :header="`${isEdit ? '修改' : '新增'}用户`"
+    :width="800"
+    :closeOnOverlayClick="false"
+  >
+    <t-form ref="formRef" :model="formData" labelWidth="120px">
+      <t-form-item label="角色名称">
+        <t-input v-model="formData.a"></t-input>
+      </t-form-item>
+      <t-form-item label="绑定权限">
+        <!-- <t-tree-select v-model="formData.d" :data="treeData" multiple /> -->
+
+        <t-tree
+          :data="treeData"
+          hover
+          expand-all
+          :checkable="true"
+          @change="onTreeChange"
+        ></t-tree>
+      </t-form-item>
+    </t-form>
+    <template #foot>
+      <t-button theme="default" @click="emit('update:visible', false)"
+        >取消</t-button
+      >
+      <t-button theme="primary" @click="save">保存</t-button>
+    </template>
+  </my-dialog>
+</template>
+<script setup name="AddRoleDialog">
+import useClearDialog from '@/hooks/useClearDialog';
+import { ref, watch } from 'vue';
+const props = defineProps({
+  visible: Boolean,
+  curRow: Object,
+});
+const emit = defineEmits(['update:visible']);
+const formRef = ref(null);
+const getDetail = async () => {
+  //编辑状态下获取回显数据的接口请求业务,如果curRow里的字段够用，就直接把curRow里的字段赋值给formData
+  alert('获取详情中...');
+};
+const { formData, isEdit } = useClearDialog(
+  {
+    a: '',
+    b: '',
+  },
+  props,
+  getDetail
+);
+const treeData = ref([
+  {
+    label: '系统资源',
+    value: '1',
+    children: [
+      { label: '服务单元管理', value: '2' },
+      { label: 'SOP管理', value: '3' },
+    ],
+  },
+]);
+const onTreeChange = (checked, context) => {
+  console.info('onChange:', checked, context);
+};
+const save = () => {};
+</script>

src/views/user/auth-manage/role-manage/index.vue

@@ -1,7 +1,92 @@
 <template>
-  <div class="role">角色管理</div>
+  <div class="role h-full">
+    <div class="flex-1 page-wrap">
+      <div class="btn-group">
+        <t-button
+          theme="success"
+          @click="
+            curRow = null;
+            showAddRoleDialog = true;
+          "
+          >新增角色</t-button
+        >
+      </div>
+      <t-table
+        size="small"
+        row-key="id"
+        :columns="columns"
+        :data="tableData"
+        bordered
+        :pagination="{
+          defaultCurrent: 1,
+          defaultPageSize: 10,
+          onChange,
+          total: pagination.total,
+        }"
+      >
+      </t-table>
+    </div>
+    <AddRoleDialog
+      v-model:visible="showAddRoleDialog"
+      :curRow="curRow"
+    ></AddRoleDialog>
+  </div>
 </template>
 
-<script setup name="Role"></script>
+<script setup name="User" lang="jsx">
+import { reactive, ref } from 'vue';
+import { useRequest } from 'vue-request';
+import { getTableData } from '@/api/test';
+import useFetchTable from '@/hooks/useFetchTable';
+import AddRoleDialog from './add-role-dialog.vue';
+const showAddRoleDialog = ref(false);
+const curRow = ref(null);
+const columns = [
+  { colKey: 'a', title: '角色名称' },
+
+  {
+    title: '操作',
+    colKey: 'operate',
+    fixed: 'right',
+    width: 150,
+    cell: (h, { row }) => {
+      return (
+        <div class="table-operations">
+          <t-link
+            theme="primary"
+            hover="color"
+            onClick={(e) => {
+              e.stopPropagation();
+              curRow.value = row;
+              showAddUserDialog.value = true;
+            }}
+          >
+            修改
+          </t-link>
+          <t-link
+            theme="primary"
+            hover="color"
+            onClick={(e) => {
+              e.stopPropagation();
+            }}
+          >
+            删除
+          </t-link>
+        </div>
+      );
+    },
+  },
+];
+
+const {
+  loading: tableLoading,
+  pagination,
+  tableData,
+  fetchData,
+  onChange,
+} = useFetchTable(getTableData);
+
+const refresh = async () => {};
+</script>
 
 <style></style>